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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

119700 Jul 22,2015 08:01 PM UTC Jul 28,2015 03:19 PM UTC ASP.NET MVC 5
loading
Tags: TreeGrid
Harry Zheng
Asked On July 22, 2015 08:01 PM UTC

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 [Syncfusion]
Replied On 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.


Harry Zheng
Replied On 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

Mahalakshmi Karthikeyan [Syncfusion]
Replied On 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.


Harry Zheng
Replied On July 27, 2015 04:04 PM UTC

Hi Mahalakshmi,,

Thank you for your solutions. They work great!

Regards,

Harry

Mahalakshmi Karthikeyan [Syncfusion]
Replied On 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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;