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

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:

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() :

 
 
 
... (other colums as you wish)

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/