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.
Unfortunately, activation email could not send to your email. Please try again.

How To Perform search in TreeGrid.

Thread ID:

Created:

Updated:

Platform:

Replies:

132707 Sep 16,2017 06:31 AM Sep 18,2017 08:33 AM ASP.NET MVC 1
loading
Tags: TreeGrid
sachin
Asked On September 16, 2017 06:31 AM

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 

Suriyaprasanth Ravikumar [Syncfusion]
Replied On September 18, 2017 08:33 AM

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

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.

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.

;