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.
Hi Harry,
For your kind information, we can update the edited TreeGrid data in the toolbar icon click event. Please refer the below code snippet to achieve it.
|
@(Html.EJ().TreeGrid("TreeGridContainer"). //… ClientSideEvents(eve => { eve.ActionComplete("ActionComplete"); eve.Create("create"); }). ) <script type = "text/javascript" > function create(args) { var toolbar = $("#TreeGridContainer_toolbarItems");
//Toolbar item to be added var toolbarItem = "<li tabindex= " + "0" + " title=" + "Update" + " class=" + "e-tooltxt " + " id=" + "TreeGridContainer_customicon " + " style=width:30px;height:24px;" + "><span id=customicon" + "></span></li>";
//appending the new item to the existing toolbar $($(toolbar).children()).append(toolbarItem);
$("#TreeGridContainer_customicon").click(function() { debugger; var treeobj = $("#TreeGridContainer").data("ejTreeGrid"); treeobj.saveCell(); var record = treeobj.model.flatRecords[treeobj.model.selectedRowIndex]; $.ajax({ type: "POST", url: "/TreeGrid/Update", //Update is Server side method data: record.item, dataType: "json" }); }) } //… < /script> |
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/119700/ze/MVCsampleSQL-812894169
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.
Hi Harry,
For your kind information, we can add and update the edited data to the DataBase in TreeGrid control with the help of “ActionComplete” and “EndEdit” client side event. When we click the update button in the toolbar, EndEdit event will be triggered and there we can get the edited data in the event argument as “args.data.item”. We can pass this item to database using AJAX post method. Please refer the below code snippet to enable the client side events, and add and update the edited changes to the data base.
|
@(Html.EJ().TreeGrid("TreeGridContainer"). //… ClientSideEvents(eve=>{ eve.EndEdit("endEdit"); eve.ActionComplete("ActionComplete"); }). )
@(Html.EJ().ScriptManager()) <script type="text/javascript"> function endEdit(args) { var editedRecord = args.data.item; //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); } }
// To update the database during editing and update operation else if (args.requestType === 'recordUpdate') { var item = args.data.item; $.ajax({ type: "POST", url: "/Gantt/Update", //Update is Server side method data: item, dataType: "json" }); } }
//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> |
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/119700/ze/ToolbarUpdate274267161
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.
