How to maintain collapsed state while performing Row with Remote Data in JavaScript TreeGrid?
This Knowledge base explains how to maintain collapsed state while performing Row with Remote Data in JavaScript Tree Grid.
Solution
By default, while using remote data, collapsed state will not be maintained while performing Row DD or adding new record. But we can achieve the same by following the below steps:
- RowDrop event will be triggered when we perform row drag and drop.
- Similarly, ActionBegin event with requestType “add” will be triggered when we add new record to Tree Grid.
- In both events, we can check the “expanded” property of each record from current view data (with the help of getCurrentViewRecords method)
- If a record is in collapsed state, its expanded property will be “false”. We need to collect the “primary key” of the collapsed records in those events.
- After performing RowDD or adding a new record, BeforeDataBound event will be triggered.
- In that event, we can update the “expanded” state of the records based on the expanded state values that are already saved.
MVC
@(Html.EJS().TreeGrid("TreeGrid").IdMapping("TaskId").ParentIdMapping("ParentId")
.HasChildMapping("isParent").TreeColumnIndex(0).AllowPaging().LoadChildOnDemand()
.Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })
.AllowRowDragAndDrop(true).RowDrop("rowDrop").BeforeDataBound("beforeDataBound").ActionBegin("begin")
.SelectionSettings(selection => selection.Type(Syncfusion.EJ2.TreeGrid.SelectionType.Multiple))
.DataSource(dataManager =>
{
dataManager.Url("Home/DataSource").InsertUrl("/Home/Insert").UpdateUrl("/Home/Update").RemoveUrl("/Home/Remove").Adaptor("UrlAdaptor");
})
.EditSettings(edit =>
{
edit.AllowAdding(true);
edit.AllowDeleting(true);
edit.AllowEditing(true);
edit.Mode(Syncfusion.EJ2.TreeGrid.EditMode.Row);
edit.NewRowPosition(Syncfusion.EJ2.TreeGrid.RowPosition.Child);
})
.Columns(col =>
{
col.Field("TaskId").HeaderText("Task ID").IsPrimaryKey(true).Width(95).TextAlign(TextAlign.Right).Add();
col.Field("TaskName").HeaderText("Task Name").Width(295).Add();
col.Field("Duration").HeaderText("Duration").Width(95).Add();
}).Render()
)
CORE
<ejs-treegrid id="TreeGrid" idMapping="TaskId" parentIdMapping="ParentId" hasChildMapping="isParent" treeColumnIndex="0" loadChildOnDemand="true" allowPaging="true"
toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"
allowRowDragAndDrop="true" rowDrop="rowDrop" beforeDataBound="beforeDataBound" actionBegin="begin">
<e-treegrid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" newRowPosition="Child" mode="Row"></e-treegrid-editSettings>
<e-data-manager url="Home/DataSource" updateUrl="/Home/Update" insertUrl="/Home/Insert" removeUrl="Home/Remove" adaptor="UrlAdaptor"></e-data-manager>
<e-treegrid-selectionsettings type="Multiple" persistSelection="false"></e-treegrid-selectionsettings>
<e-treegrid-columns>
<e-treegrid-column field="TaskId" isPrimaryKey="true" headerText="ID" width="95" textAlign="Left"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Name" textAlign="Left" width="205"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Tag Data" textAlign="Left" width="95"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
JS
<script>
var primaryKeyList = [];
function rowDrop(args) {//for handling Row Drag and Drop at server end
var proxy = this;
var record1 = this.getCurrentViewRecords()[args.fromIndex][this.idMapping];
var record2 = this.getCurrentViewRecords()[args.dropIndex][this.idMapping];
var data = args.data[0];
var currentViewRecord = this.getCurrentViewRecords();
primaryKeyList = [];
for (var i = 0; i < currentViewRecord.length; i++) { //looping current view data to check which records are in collapsed state
if (currentViewRecord[i].isParent && !currentViewRecord[i].expanded) { // if any record is in collapsed state
primaryKeyList.push(currentViewRecord[i].TaskId);// saving that record's primary key using which we can maintain state after row drag and drop
}
}
var position = { dragidMapping: record1, dropidMapping: record2, position: args.dropPosition }; // if you need to update the Row Drag and Drop value at server end you can use ajax post
args.cancel = true; // setitng args.cancel to true to prevent asynchronous row dd at cient and server end
$.ajax({
url: '@Url.Action("MyTestMethod")',
data: JSON.stringify({ value: data, pos: position }),
dataType: "json",
method: 'POST',
contentType: "application/json; charset=utf-8",
success: function (data) {
proxy.refresh(); // calling refresg method to refresh the changes made using ROWDD
}
});
}
function beforeDataBound(args) {
if (!this.initialRender && primaryKeyList.length) {
for (var key = 0; key < primaryKeyList.length; key++) { //looping saved primary key list
var iD = primaryKeyList[key];
var record = args.result.filter((e) => e["TaskId"] === iD); // filtering record of task id which matched saved primary key
if (record && record.length) {
if (record[0].expanded) { // checking if the expanded property is true
record[0].expanded = false; // resetting it to false to maintain expanded state
}
}
}
}
}
function begin(args) {
if (args.requestType == "add") {
var currentViewRecord = this.getCurrentViewRecords();
primaryKeyList = [];
for (var i = 0; i < currentViewRecord.length; i++) { //looping current view data to check which records are in collapsed state
if (currentViewRecord[i].isParent && !currentViewRecord[i].expanded) { // if any record is in collapsed state
primaryKeyList.push(currentViewRecord[i].TaskId); // saving that record's primary key using which we can maintain state after adding new data
}
}
}
}
</script>
You can find the controller code from the below documentation links and sample.
Documentation Links:
https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/editing/#url-adaptor
https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/editing/#url-adaptor
You can use the demo from this Link to implement the same functionality on your own.
Conclusion
I hope you enjoyed learning about how to maintain collapsed state while performing row with remote data in JavaScript Treegrid.
You can refer to our JavaScript TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript TreeGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
