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

Save entire grid to databse

How can i implement save functionality

i use a strongly typed view and same model is used in data source.

I have a submit button, which will post to an action,


3 Replies

MK Mahalakshmi Karthikeyan Syncfusion Team July 31, 2015 11:36 AM UTC

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.



MG mg December 21, 2017 05:03 PM UTC

I tried the solution below and got it to work for text columns but not for date columns.

I like the RemoteSaveAdaptor for the grid control is there a way to use this for the treegrid?

Or do you have another solution for passing date values?


JR John Rajaram Syncfusion Team December 22, 2017 09:39 AM UTC

Hi Mark, 
In TreeGrid, at present there is no support for “RemoteSaveAdaptor”. But we are able to update the values of date columns to the database from TreeGrid using the code snippets of previous update. We have also prepared the sample with Start date and End date columns. Please find the sample in the following location. 
If this problem still occurs, please revert us by modifying the sample based on your application along with the replication procedure. This would be helpful for us to serve you. 
Please let us know if you need further assistance on this. 
Regards, 
John R 


Loader.
Live Chat Icon For mobile
Up arrow icon