Row drag and drop with grouping

Thread ID:	Created:	Updated:	Platform:	Replies:
148387	Oct 17,2019 12:12 PM UTC	Oct 21,2019 02:51 AM UTC	ASP.NET MVC	1

Subscribe to this post

Tags: Grid

Malcolm van Staden

Asked On October 17, 2019 12:12 PM UTC

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?

Reply | Reply with quote

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,

In the rowDrop event, you can get the dragged data, target row.
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,

$(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

Reply | Reply with quote

Row drag and drop with grouping

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US