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

TreeGrid Event Binding

Hello,

I'm developing a small web app and I needed a treegrid. I'm using a MVC pattern connected to a MySQL database. Displaying the results of my queries on the treegrid is pretty straightforward and it worked fine.

However, I'm a bit confused on what could be the best way to communicate changes to my data back to my controller using the treegrid.

The documentation of the treegrid is pretty basic so I've looked into the grid. So I thought of using DataManager but I didn't find how to set it up in the treegrid (there is no datamanagerID to setup, like for the grid). Then, I've noticed that there were client events to which I could bind to in javascript, but I wasn't sure it was the right way to do it.

Any clues/examples that could enlighten me a bit would be very appreciated.

Thanks,

Mathieu

3 Replies

JD Jayakumar Duraisamy Syncfusion Team March 3, 2017 04:41 PM UTC

Hi Mathieu, 
Thanks for contacting Syncfusion support. 
In TreeGrid we have various client side events to get the currently effected record details. “ActionComplete” event is triggered on add, delete action and “EndEdit” event is triggered on cell edit and row edit actions. 
By using this client side events and AJAX post we can update the effected record details in data base. 
Please find the code snippet below. 
@(Html.EJ().TreeGrid("TreeGridcontainer") 
 
.ClientSideEvents(eve => 
      { 
        eve.EndEdit("endEditAction");                               
        eve.ActionComplete("completeAction");                                  
 
      }) 
 
<script> 
function endEditAction(args){                     
          var data = args.data.item; // affected record when edit 
                    $.ajax({ 
                        type: "POST", 
                        url: '/TreeGrid/Update', 
                        contentType: "application/json; charset=utf-8", 
                        data: JSON.stringify(data), 
                        dataType: "json", 
                        success: function (result) { 
 
                        } 
                    }) 
                }, 
Function completeAction(args) { 
 
            if (args.requestType == "addNewRow") { 
                        
                var data = args.addedRow.item; // Affected record while adding 
                        $.ajax({ 
                            type: "POST", 
                            url: '/TreeGrid/Add', 
                            contentType: "application/json; charset=utf-8", 
                            data: JSON.stringify(data), 
                            dataType: "json", 
                            success: function (result) { 
 
                            }, 
                        }); 
 
                    } 
              else if (args.requestType == "delete") { 
                        //Triggered on delete action 
                 var data = args.data.item; // affected record when delete 
                        $.ajax({ 
                            type: "POST", 
                            url: '/TreeGrid/Delete', 
                            contentType: "application/json; charset=utf-8", 
                            data: JSON.stringify(data), 
                            dataType: "json", 
                            success: function (result) { 
 
                            }, 
                        }); 
                    } 
}); 
 
Please let us know if you need more information on this. 
Regards, 
Jayakumar D. 



MB Mathieu Belanger March 3, 2017 05:49 PM UTC

Hi Jayakumar,

Thanks for the very complete answer. It is very appreciated. 

I was wondering if it was possible to use the datamanager approach similar to what you can do using a Grid. Also, I've found a taghelper named <e-tree-grid-data-manager> but I can't find any documentation on how to use it properly. 

Thanks again,

Mathieu


JD Jayakumar Duraisamy Syncfusion Team March 6, 2017 01:13 PM UTC

Hi Mathieu,
We regret for the inconvenience caused.
At present, there is no support for performing CRUD operation using datamanager in TreeGrid. We can perform CRUD operation by using AJAX Post. Hence we have logged a feature report “Support for performing CRUD action using datamanager in TreeGrid”. It will be implemented in any of our upcoming main release. 
We can able to find the TreeGrid taghelper <e-tree-grid-data-manager>in the intellisense, but as TreeGrid doesn’t support datamanager, we have confirmed this as bug. Hence, we have logged a bug report to remove the taghelper from the definition. Also, created a support incident under your account to track the status of this issue.
Please log on to our support website to check for further updates.
 Please let us know if you require further assistance on this.

Regards,
Jayakumar D


Loader.
Live Chat Icon For mobile
Up arrow icon