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

How to Save Data to MySql of New added Row in Treegrid ?

Hello everyone,

Anyone tell me, how to save Data to MySql of Newly added Row in Treegrid.
means as of now I am adding new row in treegrid but I can't found any event/Property of Treegrid by which I will get data of that row to save into tht MySql Database.



5 Replies

MK Mahalakshmi Karthikeyan Syncfusion Team July 23, 2015 01:04 PM UTC

Hi Krishna,

Thanks for using Syncfusion product.

For your kind information, there is no support to connect to the SQL database in Javascript platform for rendering TreeGrid. So we have prepared a sample in ASP.Net MVC to achieve the database connectivity. We have retrieved and updated the TreeGrid datasource with the help of “EndEdit” and “ActionComplete” client side events. Please refer the below code snippet to achieve this.

   @(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/Delete"//Delete 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>


As of now we have prepared a sample with MS SQL Server database. But events are the same to update a SQL database in TreeGrid . Please find the sample in the below location.

Sample: http://www.syncfusion.com/downloads/support/forum/119689/ze/Simpledatabase-1129834942

Please get back to us if you need the TreeGrid sample using MY SQL database .


Please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.



KR krishna July 23, 2015 01:29 PM UTC

Thank you so much, mahalakshmi, 

it works fantastic......... :)
but I want to add the row with above and below options in context-menu but event handler for sub-menu items (above and below) is NULL
so to resolve that issue I have created custom context menu items with event handler functionality but it will not work for sub-menu items (like for above and below) mns on first level it works fine but for 2nd level doesn't work, why???????????????????????   







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

Hi Krishna,


Sorry about the inconvenience caused.


Currently there is no support for event handlers to sub-context menu item in TreeGrid control. We have already logged feature report regarding this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents


Please let us know if you require further assistance on this.      


Regards,

Mahalakshmi K.



KR krishna July 28, 2015 05:41 AM UTC

Thanks mahalakshmi :) 

please do replay once It will be implemented.


MK Mahalakshmi Karthikeyan Syncfusion Team July 29, 2015 08:52 AM UTC

Hi Krishna,

Thanks for the update.

We will let you know once the feature has got implemented.

Please let us know if you need further assistance on this.

Regards,

Mahalakshmi K.


Loader.
Up arrow icon