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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

TreeGrid Search inside a toolbar list

Thread ID:

Created:

Updated:

Platform:

Replies:

150673 Jan 15,2020 04:04 PM UTC Jan 17,2020 04:14 PM UTC Blazor 1
loading
Tags: TreeGrid
Scott Peal
Asked On January 15, 2020 04:04 PM UTC


If we include the searchbox into the toolbar list, how do we get it to function? 

@{
    List<ItemModel> Toolbaritems = new List<ItemModel>();
    Toolbaritems.Add(new ItemModel() { Text = "Expand all", TooltipText = "Expand all", PrefixIcon = "e-expand" });
    Toolbaritems.Add(new ItemModel() { Text = "Collapse all", TooltipText = "Collapse all", PrefixIcon = "e-collapse" });
    Toolbaritems.Add(new ItemModel() { Text = "Quick Filter", TooltipText = "Quick Filter", Id = "toolbarfilter" });
    Toolbaritems.Add(new ItemModel() { Text = "Print", TooltipText = "Print", Id = "print" });
    Toolbaritems.Add(new ItemModel() { Text = "Search", TooltipText = "Search", Id = "search" });
    Toolbaritems.Add(new ItemModel() { Text = "PDF Export", TooltipText = "Export to a PDF document", Id = "pdfexport" });
    Toolbaritems.Add(new ItemModel() { Text = "Excel Export", TooltipText = "Export to a Excel spreadsheet", Id = "excelexport" });
    Toolbaritems.Add(new ItemModel() { Text = "CSV Export", TooltipText = "Export to a comma separated file", Id = "csvexport" });
}

< EjsTreeGrid ID="TreeGrid" @ref="TreeGrid" DataSource="@TreeData" IdMapping="OrgUnitId" ParentIdMapping="ParentOrgUnitId" TreeColumnIndex="3"
             AllowPaging="true" AllowExcelExport="true" AllowFiltering="true" AllowMultiSorting="true" AllowPdfExport="true"
             AllowReordering="true" AllowResizing="true" AllowRowDragAndDrop="true" AllowSorting="true" AutoCheckHierarchy="true"
             EnableAltRow="true" EnableCollapseAll="true" EnableHover="true" ShowColumnMenu="true"
             Toolbar="Toolbaritems">
    < TreeGridEvents TValue="string" OnToolbarClick="Toolbarclick"></TreeGridEvents>
    < TreeGridPageSettings PageSizeMode="PageSizeMode.Root" PageSize="50"></TreeGridPageSettings>
    < TreeGridEditSettings AllowEditing="true" />
    < TreeGridFilterSettings Type="Syncfusion.EJ2.Blazor.TreeGrid.FilterType.Menu"></TreeGridFilterSettings>
    < TreeGridColumns>
        < TreeGridColumn Field="Id" HeaderText="Id" Width="100" IsPrimaryKey="true" Visible="false" AllowEditing="false"></TreeGridColumn>
        < TreeGridColumn Field="ParentId" HeaderText="ParentId" Width="100" Visible="false" AllowEditing="false"></TreeGridColumn>
        < TreeGridColumn Field="Code" HeaderText="Code" Width="20"></TreeGridColumn>
        < TreeGridColumn Field="Name" HeaderText="Name" Width="40"></TreeGridColumn>
    < /TreeGridColumns>
< /EjsTreeGrid>

        protected void Toolbarclick(Syncfusion.EJ2.Blazor.Navigations.ClickEventArgs args)
        {
            if (args.Item.Text == "PDF Export")
            {
                this.TreeGrid.PdfExport();
            }
            else if (args.Item.Text == "Excel Export")
            {
                this.TreeGrid.ExcelExport();
            }
            else if (args.Item.Text == "CSV Export")
            {
                this.TreeGrid.CsvExport();
            }
            else if (args.Item.Text == "Expand all")
            {
                this.TreeGrid.ExpandAll();
            }
            else if (args.Item.Text == "Collapse all")
            {
                this.TreeGrid.CollapseAll();
            }
            else if (args.Item.Text == "Quick Filter")
            {
                this.TreeGrid.FilterByColumn("Name", "StartsWith", "Ap");
            }
            else if (args.Item.Text == "Search")
            {
                // What do we do here?
            }
        }

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On January 17, 2020 04:14 PM UTC

Hi Scott, 

Thanks for contacting Syncfusion Support. 

Query#:- If we include the searchbox into the toolbar list, how do we get it to function?  

By default when we add Search Item in the Toolbar it will display the search text box on the right top corner of the TreeGrid as like below documentation and you can perform search operation by typing the required value on Textbox. 


Otherwise If you want to perform Search operation on any button click or else by customized toolbar(Instead of default Search Item) you can perform it using search method of the TreeGrid.  
  
Refer to the code example:- 

@{ 
    List<ItemModel> Toolbaritems = new List<ItemModel>(); 
    Toolbaritems.Add(new  ItemModel() { Text = "SearchData", TooltipText = "Search" }); 
 
} 
<div class="row"> 
            <EjsTreeGrid ID="TreeGrid" @ref="TreeGrid" DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" ShowColumnMenu="true" AllowFiltering="true" AllowSorting="true" AllowPaging="true" AllowRowDragAndDrop="true" Toolbar="Toolbaritems"> 
                <TreeGridEvents TValue="string" OnToolbarClick="ToolBarClick" ></TreeGridEvents> 
                   <TreeGridColumns> 
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" IsPrimaryKey="true" Width="80" TextAlign=" Syncfusion.EJ2.Blazor.Grids.TextAlign.Right"></TreeGridColumn> 
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="170"></TreeGridColumn> 
                        .   .   . 
                </TreeGridColumns> 
    </EjsTreeGrid> 
 
     public void ToolBarClick(Syncfusion.EJ2.Blazor.Navigations.ClickEventArgs args) 
    { 
        if (args.Item.Text == "SearchData") 
        { 
            this.TreeGrid.Search("Child Task 1"); 
        } 
         
    } 
         

Sample Link:- 

Refer to the sample Link:- 

Please get back to us if you need any further assistance. 

Regards, 
Farveen sulthana T 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon