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>
By default, treegrid searches all the bound column values. To customize this behavior define the
fields
property ine-treegrid-searchSettings
tag helper.
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. |
By default, the
operator
value is contains.
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();
}
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();
}