how to link the 'update' button (on the toolbar) click event to controller method

[Harry Zheng]

Hi,

I am using treegrid to display data and also for user to edit some data.

After editing, I'd like user to click the 'update' button on the toolbar to save the changed data to database.

I already have action method to update data in controller, just wonder how to link the 'update' button click event to my action method.

Thank you,

Harry

[Mahalakshmi Karthikeyan]

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.

[Harry Zheng]

Hi Mahalakshmi,

Thank you for your solution. Is it possible just use the built in 'update' button  on the toolbar to do the same thing without creating custom 'save' button?

Thanks,

Harry

[Mahalakshmi Karthikeyan]

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.

[Harry Zheng]

Hi Mahalakshmi,,

Thank you for your solutions. They work great!

Regards,

Harry

[Mahalakshmi Karthikeyan]

Hi Harry,
We are happy to assist you,
Please let us know if you need further assistance on this.
Regards,
Mahalakshmi K.