TreeGrid Search inside a toolbar list

[Scott Peal]

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]

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. 

https://ej2.syncfusion.com/blazor/documentation/treegrid/searching/#initial-search 

Demo Link:- https://blazor.syncfusion.com/demos/TreeGrid/Search?theme=bootstrap4 

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:- 

https://www.syncfusion.com/downloads/support/forum/150673/ze/Test-1768597733 

Refer to the sample Link:- 

https://ej2.syncfusion.com/blazor/documentation/treegrid/searching/#search-by-external-button 

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

Regards, 

Farveen sulthana T