Row drag and drop with grouping

[Malcolm van Staden]

Hi,

We are using the grid with a local data source. So there should be no server side interaction. 

The grid has grouping enabled on it. 

We want to be able to drag and drop the rows between the groups. Also, when dropping a row onto a different group the dragged row needs to have it's group updated.

How can we go about achieving this?

[Padmavathy Kamalanathan]

Hi Malcolm, 

 

Thanks for contacting Syncfusion Forums. 

 

QUERY: We want to be able to drag and drop the rows between the groups 

 

From your query we understand that you need to drag and drop rows in a grid with grouping. When you drag a row from a group and drop in another group, drag and drop will not work since the grid get refreshed again which in turn applies grouping. In order to achieve drag and drop in grouping, we suggest you to follow the below steps, 

 

1. In the rowDrop event, you can get the dragged data, target row.
2. From that, you need to find the index of dragged and dropped row, so that you can change the value of the column(column based on which grouping is done)  of the dragged data in the currentViewData.

 

Thus you can drag and drop properly. 

 

Please refer the below help documentation, 

https://help.syncfusion.com/api/js/ejgrid#events:rowdrop 

 

Please check the below example code snippet, 

 

 

<script type="text/javascript"> 

    $(function () { 

        $("#Grid").ejGrid({ 

            // the datasource "window.gridData" is referred from jsondata.min.js 

            dataSource: window.gridData, 

            allowPaging: true, 

            allowGrouping: true, 

             allowRowDragAndDrop: true, 

          rowDrop: function (args) { 

            var dragRowIndex = args.rows[0].rowIndex; //get index of dragged row 

            var dropRowIndex = args.target.closest("tr")[0].rowIndex; //get index of dr row 

            var groupedColumns = this.model.groupSettings.groupedColumns; // grouped columnn 

            //var dataIndex =this.model.currentViewData.records.indexOf(args.data[0]); 

            // grouped column is shipCountry 

           // if you have multiple group columns , you need to loop thorugh it to get and set blow “value” 

            var value = this.model.currentViewData["records"][dropRowIndex]["ShipCountry"]; // get the value of group for the dropped row 

            this.model.currentViewData["records"][dragRowIndex ]["ShipCountry"] = value; //set that group value of the dragged row in the record list of currentViewData 

            this.refreshContent(); 

            args.cancel = true; 

             

          }, 

            groupSettings: { groupedColumns: ["ShipCountry"] }, 

            columns: [ 

                     { field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 65 }, 

                     { field: "CustomerID", headerText: "Customer ID", width: 90 }, 

                     { field: "ShipCity", headerText: "Ship City", width: 90 }, 

                     { field: "ShipCountry", headerText: "Ship Country", width: 90 }, 

                     { field: "EmployeeID", headerText: "Employee ID", width: 90, textAlign: ej.TextAlign.Right } 

            ] 

        }); 

    }); 

</script> 

 

 

 

If you have further queries, please get back to us. 

 

Regards, 

Padmavathy Kamalanathan