Search

21 Dec 20226 minutes to read

You can search records in a TreeGrid, by using the search method with search key as a parameter. This also provides an option to integrate search text box in treegrid’s toolbar by adding search item to the toolbar.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="270" toolbar="@(new List<string>() { "Search" })" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

To apply search at initial rendering, set the fields, operator, key, and ignoreCase in the e-treegrid-searchSettings tag helper.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="270" toolbar="@(new List<string>() { "Search" })" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-searchSettings fields="@(new string[] { "TaskName" })" operator="contains" key="plan" ignoreCase="true">
    </e-treegrid-searchSettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

NOTE

By default, treegrid searches all the bound column values. To customize this behavior define the fields property in e-treegrid-searchSettings tag helper.

Search operators

The search operator can be defined in the operator property to configure specific searching.

The following operators are supported in searching:

Operator  Description
startsWith  Checks whether a value begins with the specified value.
endsWith  Checks whether a value ends with the specified value.
contains  Checks whether a value contains the specified value.
equal  Checks whether a value is equal to the specified value.
notEqual  Checks for values not equal to the specified value.

NOTE

By default, the operator value is contains.

Search by external button

To search treegrid records from an external button, invoke the search method.

<input type="text" id="searchText">
<ejs-button id="Search" content="Search" cssClass="e-primary"></ejs-button>

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="270" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

<script>
    document.getElementById('Search').addEventListener('click', function (args) {
        var val = document.getElementById('searchText').value;
        var treegrid = document.getElementById('TreeGrid').ej2_instances[0];
        treegrid.search(val);
    });
</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Search specific columns

By default, treegrid searches all visible columns. You can search specific columns by defining the specific column’s field names in the fields property of e-treegrid-searchSettings tag helper.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="270" toolbar="@(new List<string>() { "Search" })" childMapping="Children" treeColumnIndex="1">
    <e-treegrid-searchSettings fields="@(new string[] { "TaskName", "Duration"})">
    </e-treegrid-searchSettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

NOTE

You can refer to our ASP.NET Core Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example ASP.NET Core Tree Grid example to knows how to present and manipulate data.