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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Row drag and drop with grouping

Thread ID:





148387 Oct 17,2019 12:12 PM UTC Oct 21,2019 02:51 AM UTC ASP.NET MVC 1
Tags: Grid
Malcolm van Staden
Asked On October 17, 2019 12:12 PM UTC


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 [Syncfusion]
Replied On 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 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon