Hi Vivek,
Thanks for using Syncfusion Product.
We can add, delete and update the TreeGrid data to the database using “EndEdit” and “ActionComplete” client side events. Please refer the below code snippet the do the operation over the TreeGrid data and send it the database via webservice.
@(Html.EJ().TreeGrid("TreeGridContainer"). //… ClientSideEvents(eve => { eve.EndEdit("endEdit"); eve.ActionComplete("ActionComplete"); eve.Create("create"); }). Datasource(ViewBag.dataSource) ) <script type="text/javascript"> function endEdit(args) { var editedRecord = args.data != null ? args.data.item : args.currentValue; //This varible holds the data of the edited record. You can updated it to your remote datasource $.ajax({ type: "POST", url: "/TreeGrid/Update", //Update is Server side method data: editedRecord, dataType: "json" }); }
function ActionComplete(args) { var record = args.data; if (args.requestType === 'addNewRow') { //Newly Added Record is obtained here , which can be updated to database addedRecord = args.addedRow; $.ajax({ type: "POST", url: "/TreeGrid/Add",//Add is Server side method data: addedRecord, dataType: "json" });
} else if (args.requestType === 'delete') { var data = args.data; var deletedRecord = data.item; //This is the deleted item. $.ajax({ type: "POST", url: "/TreeGrid/Delete", //Delete is Server side method data: deletedRecord, dataType: "json" });
//If deleted item has child records, we need to delete that too
if (data.hasChildRecords) { deleteChildRecords(data); } } }
//Delete inner level child records function deleteChildRecords(record) { var childRecords = record.childRecords, length = childRecords.length, count, currentRecord; for (count = 0; count < length; count++) { currentRecord = childRecords[count]; var deletedChildRecord = currentRecord.item; //This is the deleted child item. //If the above deleted child record has child records, then we need to delete that too. if (currentRecord.hasChildRecords) { deleteChildRecords(currentRecord); } } } </script> |
“EndEdit” client side event is used to get the edited value from the TreeGrid through the “args.data.item” we can pass this data to the database throught the AJAX post method,
“ActionComplete” client side event will be triggered at the time of adding a new row and delete any item from TreeGrid.
args.requestType==”addNewRow” is used to get the newly added item in TreeGrid.
args.requestType==”delete” is used to get the item we select to delete
We have also prepared a sample based on this and you can find the sample under the following location.
Sample: http://www.syncfusion.com/downloads/support/forum/119780/ze/MVC5TreeGrid830103901
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.