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. Image for the cookie policy date
close icon

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

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

5 Replies

MK Mahalakshmi Karthikeyan Syncfusion Team July 23, 2015 09:09 AM UTC

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.



HZ Harry Zheng July 23, 2015 06:32 PM UTC

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


MK Mahalakshmi Karthikeyan Syncfusion Team July 27, 2015 11:35 AM UTC

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.



HZ Harry Zheng July 27, 2015 04:04 PM UTC

Hi Mahalakshmi,,

Thank you for your solutions. They work great!

Regards,

Harry


MK Mahalakshmi Karthikeyan Syncfusion Team July 28, 2015 03:19 PM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon