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 Perform search in TreeGrid.

Hello,

I recently started working with TreeGrid and i have some queries for which i need your help -
  1. How to perform search in TreeGrid like we do in normal Grid?
  2. Is it possible to create a double click event on TreeGrid like we already have in normal Grid? basically i need to perform some action when the user double clicks on either parent row or the child of TreeGrid.
  3. How to overwrite the default event on contextMenu's Edit button?  I want to show a dialog or any message when user click on edit button without editing the row.
I hope you have understood my queries.

Regards, 
Sachin 

1 Reply

SR Suriyaprasanth Ravikumar Syncfusion Team September 18, 2017 12:33 PM UTC

Hi Sachin, 
Please find the response below. 
Query1: How to perform search in TreeGrid like we do in normal Grid? 
Answer: Currently we don’t have support to perform search operation in TreeGrid. For this we have already logged a feature report as “Support for search operation in TreeGrid”, and it will be included in our upcoming Volume 4 main release which will be expected to out at end of October, 2017. 
 
Query2: Is it possible to create a double click event on TreeGrid  
Answer: Currently we dont have double click client side event in TreeGrid , for this we have already logged a feature report as “Support for record double click event in TreeGrid, and it will also be included in our upcoming Volume 4 main release which will be expected to out at end of October, 2017. 
We can get the double click action in TreeGrid by using “BeginEdit” event , this event will be triggered when we double click on any of the TreeGrid record. 
Please find the code snippet below, 
[CSHTML]  
<body> 
    @(Html.EJ().TreeGrid("TreeGridContainer") 
                     //.. 
                             .ClientSideEvents(ce => 
                             { 
                                 ce.BeginEdit("BeginEdit"); 
                             }) 
                             .EditSettings(es => 
                             { 
                                 es.AllowEditing(true); 
                             }) 
             .Datasource(ViewBag.datasource) 
    ) 
    @(Html.EJ().ScriptManager()) 
 
    <script type="text/javascript"> 
 
        //Event trigger at the cell edit 
        function BeginEdit(args) { 
            alert("Event trigger when the user double clicks the record"); 
            args.cancel = true; // Canceling default edit operation. 
        } 
 
    </script> 
</body> 
 
Query2: How to overwrite the default event on contextMenu's Edit button. 
Answer: We can’t overwrite the default context menu action but we can remove default items and add new custom context menu items. 
We have achieved your requirement by using “ContextMenuOpen” event, in this event we have removed the default edit context menu and added new custom menu item. 
Please find the code snippet below, 
 
[CSHTML]  
<body> 
    @(Html.EJ().TreeGrid("TreeGridContainer") 
                   //..   
                             .ContextMenuSettings(cs => 
                             { 
                                 cs.ShowContextMenu(true); 
                             }) 
                             .ContextMenuOpen("ContextMenuOpen") //Event trigger while open context menu. 
 
            .Datasource(ViewBag.datasource) 
    ) 
    @(Html.EJ().ScriptManager()) 
 
    <script type="text/javascript"> 
 
          //Event trigger while open context menu. 
        function ContextMenuOpen(args) { 
            args.contextMenuItems = []; 
            var data = args.item; 
            if (data) { 
                args.contextMenuItems.push({ 
                    headerText: "Edit", 
                    menuId: "edit", 
                    eventHandler: customMenuAddHandler, 
                    iconClass: "e-edit", 
                    disable: false 
                }); 
            } 
        } 
 
        function customMenuAddHandler() { 
            alert("Show dialog while click edit context menu"); 
        } 
    </script> 
</body> 
 
We already have demo sample with custom context menu items, please refer the below link, 
 
We have prepared a sample with custom context menu support, please find the sample location below. 
Please let us know if your require further assistance on this. 
 
Thanks, 
Suriyaprasanth R

Loader.
Up arrow icon