TReeGrid (Essential JS 1 Jquery) - How to maintain the sequential order of a column after arranging and dropping the rows?
In Treegrid I would like to maintain the sequential order of the OrderId column after dragging and dropping.
To accomplish this I think that I could read from the first to the last line of the ejTreeGrid and change that OrderId field in the database after dragging and dropping. So how can I read all the lines in sequence?
Is there another solution?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential Studio for JavaScript">
<meta name="author" content="Syncfusion">
<title>Untitled</title>
<!-- Essential Studio for JavaScript theme reference -->
<link rel="stylesheet" rel='nofollow' href="//cdn.syncfusion.com/17.4.0.46/js/web/flat-azure/ej.web.all.min.css" />
<!-- Essential Studio for JavaScript script references -->
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="//cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="//cdn.syncfusion.com/17.4.0.46/js/web/ej.web.all.min.js"> </script>
<!--Add custom scripts here -->
</head>
<body>
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<div id="TreeGridContainer" style="width:100%;height:450px;" />
</div>
</div>
</div>
<script type="text/javascript">
//DATA SOURCE DECLARATION OF TREEGRID CONTROL
var projectData = [
{ "TaskID": 1, "OrderID": 1,"TaskName": "Parent Task 1", "StartDate": new Date("02/23/2017"), "EndDate": new Date("02/27/2017"), "Progress": "40" },
{ "TaskID": 2, "OrderID": 2,"TaskName": "Child Task 1", "StartDate": new Date("02/23/2017"), "EndDate": new Date("02/27/2017"), "Progress": "40", "parentID": 1 },
{ "TaskID": 3, "OrderID": 3,"TaskName": "Child Task 2", "StartDate": new Date("02/23/2017"), "EndDate": new Date("02/27/2017"), "Progress": "40", "parentID": 1 },
{ "TaskID": 4, "OrderID": 4,"TaskName": "Child Task 3", "StartDate": new Date("02/23/2017"), "EndDate": new Date("02/27/2017"), "Duration": 5, "Progress": "40", "parentID": 1 },
{ "TaskID": 5, "OrderID": 5,"TaskName": "Parent Task 2", "StartDate": new Date("03/14/2017"), "EndDate": new Date("03/18/2017"), "Progress": "40" },
{ "TaskID": 6, "OrderID": 6,"TaskName": "Child Task 1", "StartDate": new Date("03/02/2017"), "EndDate": new Date("03/06/2017"), "Progress": "40", "parentID": 5 },
{ "TaskID": 7, "OrderID": 7,"TaskName": "Child Task 2", "StartDate": new Date("03/02/2017"), "EndDate": new Date("03/06/2017"), "Progress": "40", "parentID": 5 },
{ "TaskID": 8, "OrderID": 8,"TaskName": "Child Task 3", "StartDate": new Date("03/02/2017"), "EndDate": new Date("03/06/2017"), "Progress": "40", "parentID": 5 },
{ "TaskID": 9, "OrderID": 9,"TaskName": "Child Task 4", "StartDate": new Date("03/02/2017"), "EndDate": new Date("03/06/2017"), "Progress": "40", "parentID": 5 },
{ "TaskID": 10, "OrderID": 10,"TaskName": "Parent Task 3", "StartDate": new Date("03/09/2017"), "EndDate": new Date("03/13/2017"), "Progress": "40" }
];
$(function () {
var dateFormat = "{0:" + ej.preferredCulture()["calendars"]["standard"]["patterns"]["d"] + "}";
$("#TreeGridContainer").ejTreeGrid({
dataSource: projectData,
allowSelection: true,
allowDragAndDrop: true,
allowColumnResize: true,
idMapping: "TaskID",
parentIdMapping: "parentID",
treeColumnIndex: 2,
isResponsive: true,
rowHeight: window.theme == "material" ? 48 : window.theme == "office-365" ? 36 : 30,
load: function () {
if (window.theme == "material")
this.treeIndentLevelWidth = 16;
},
columns: [
{ field: "TaskID", headerText: "Task Id", width: window.theme == "material" ? 90 : 55, editType: "stringedit" },
{ field: "OrderID", headerText: "OrderID", width: window.theme == "material" ? 90 : 55, editType: "stringedit" },
{ field: "TaskName", headerText: "Task Name", editType: "stringedit"},
{ field: "StartDate", headerText: "Start Date", editType: "datepicker", format: dateFormat },
{ field: "EndDate", headerText: "End Date", editType: "datepicker", format: dateFormat },
{ field: "Progress", headerText: "Progress", editType: "numericedit"}
],
dragTooltip: {
showTooltip: true,
},
rowDropActionBegin: function (args) {
args.draggedRecords.filter(function (item) {
if (item.taskName == "Item can't be Dropped") {
item.canDrop = false;
}
});
},
rowDragStart: function (args) {
args.draggedRecords.filter(function (item) {
if (item.taskName == "Item can't be Dragged") {
item.canDrag = false;
}
});
}
});
});
</script>
</body>
</html>
SIGN IN To post a reply.
1 Reply
KR
Karthikeyan Raja
Syncfusion Team
March 2, 2020 02:19 PM UTC
Hi William,
We have analyzed your query. There is no in-built support for maintaining sequential order for columns while drag and drop. Each row index will always sequential for TreeGrid records. So we can achieve your requirement by rowDropActionBegin event with adding and subtracting the orderId values based on dragged and target record’s index.
Please find the below API link for reference
API link - https://help.syncfusion.com/api/js/ejtreegrid#events:rowdropactionbegin
Please find the below documentation link for reference
Please find the below documentation link for reference
Documentation - https://help.syncfusion.com/js/treegrid/rows#row-drag-and-drop
Regards,
Karthikeyan Raja
SIGN IN To post a reply.
- 1 Reply
- 2 Participants
-
WN William Neves
- Feb 28, 2020 12:10 PM UTC
- Mar 2, 2020 02:19 PM UTC
