We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Row drag and drop with grouping


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?

1 Reply

PK Padmavathy Kamalanathan Syncfusion Team October 21, 2019 02:51 AM UTC

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, 
Please check the below example code snippet, 
<script type="text/javascript"> 
    $(function () { 
            // 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 
            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 } 
If you have further queries, please get back to us. 
Padmavathy Kamalanathan 

Live Chat Icon For mobile
Up arrow icon