Drag and drop of rows primefaces datatable/datagrid?

Question

I trying to drag and drop of rows using primefaces datatable/datagrid.But this is issue in primefaces.What is best way to integrate drag and drop of primefaces datatable/dat

Answer 1

As far as i know from datatables (primefaces) in my applications, they have 2 main states/modes. It may be not the correct word but i stay with it. The 1st is display only, and 2nd editing. (In display i dont see events triggering so DnD wont work.) in editing they have a serious issue with selectivity. u have to press at the edge of the table and not in inline components reach to get the focus on the row. So The drop must be done in that area and only propably for events to trigger. If u see the examples...all drops are made on an outer component(panel etc) and the table is just updated because the ondrop event in ajax has run and changed the data the drop table will contain. That may be magic for incrementing data...but not for rearranging and updating cell or row data. SO the answer for that up to primefaces 3.5.x is i dont think you can achieve it...I dont think you can doit with jquery either because they run client side? i havent used them before so i cant tell for sure. A bit of rework of your forms may be needed.

Answer 2

You need to add some JavaScript (JQuery) in your JSF page to make Datatable sortable and to disable selection mode. Listed below doReorder() method gets the new order of the rows and save to order_q variable:

<script type="text/javascript">
    $(document).ready(function () {
        $('.ui-datatable tbody').sortable();
        $('.ui-datatable tbody').disableSelection();
    });

    function doReorder() {
        var order = '';
        var len = $('.row').length;
        $('.row').each(function (index) {
            order += ($(this).text() + ((index == (len - 1)) ? '' : ';'));
        });
        $('#order_q').val(order);
        return true;
    }
</script>

Add some code to your Datatable component. You see a new column with number of the row as value with attribute styleClass set to „row” . There is a hidden variable order_q updated during execution JavaScript method doReorder() :

<p:dataTable rowIndexVar="rowIndex"
var="entry" value="#{myBean.list}" >
 <p:column headerText="#">
 <h:outputText styleClass="row" value="#{rowIndex}"/>
 </p:column>
... (other colums as you wish)
</p:dataTable>
<h:inputHidden id="order_q" value="#{myBean.order}"/>
<p:commandButton value="Submit order" ajax="false" onclick="return doReorder()" action="#{myBean.reorder}"/>

Your bean class should contain a String field order (with getters and setters of course). The variable wil store a value from the JavaScript – the new order of our list (source data of the Datatable widget). We need to implement also a method mentioned in the xhtml - reorder() to handle action from button „Submit order”

public String reorder() {
        Map < String, String > tmp = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
        String order = tmp.get("order_q");
        if (order != null && !order.isEmpty()) {
            ArrayList < YourData > reordered = new ArrayList < > ();
            for (String s: order.split(";")) {
                try {
                    Integer i = Integer.parseInt(s);
                    YourData data = list.get(i);
                    reordered.add(data);
                } catch (NumberFormatException nfe) {}
            }
            list = reordered;
        }
        return null;
    }

That’s all! Now you can reorder your Datatable using drag&drop feature and save the new order by clicking a button. I leave a reference to my blog where all of this is described:

http://michalu.eu/wordpress/drag-and-drop-rows-to-reorder-your-datatable-in-primefaces/

Answer 3

Just use

<p:dataTable draggableRows="true"

On Primefaces 5.0 DataTable documentation you can see the parameter draggableRows, like this :

draggableRows | false | Boolean | When enabled, rows can be reordered using dragdrop.

http://www.primefaces.org/documentation