You can search records in a Grid, by using the Search method with search key as a parameter. This also provides an option to integrate search text box in grid’s toolbar by adding Search item to the toolbar.
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" height="272" toolbar="@(new List<string>() { "Search"})">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
</e-grid-columns>
</ejs-grid>public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}To apply search at initial rendering, set the fields, operator, key, and ignoreCase in e-grid-searchSettings tag helper.
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" height="272" toolbar="@(new List<string>() { "Search"})">
<e-grid-searchSettings fields="@(new string[] { "CustomerID"})" operator="contains" key="Ha" ignoreCase="true"></e-grid-searchSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
</e-grid-columns>
</ejs-grid>public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}By default, grid searches all the bound column values. To customize this behavior define the
fieldsproperty of e-grid-searchSettings tag helper.
The search operator can be defined in the operator property of e-grid-searchSettings 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
operatorvalue is contains.
To search grid records from an external button, invoke the search method.
<ejs-button id="search" content="Search" ></ejs-button>
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" height="272">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="150"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
document.getElementById('search').addEventListener('click', () => {
var gridObj = document.getElementById("Grid").ej2_instances[0];
var searchString = "Ha";
gridObj.search(searchString);
});
</script>public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}By default, grid searches all visible columns. You can search specific columns by defining the specific column’s field names in the fields property of e-grid-searchSettings tag helper.
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" height="272" toolbar="@(new List<string>() { "Search"})">
<e-grid-searchsettings fields="@(new string[] { "CustomerID","ShipCity","ShipName"})" ></e-grid-searchsettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="150"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}To clear the searched grid records from the external button, set key property of e-grid-searchSettings as empty string.
<ejs-button id="clear" content="Clear Search" ></ejs-button>
<ejs-grid id="Grid" dataSource="@ViewBag.datasource" height="272" toolbar="@(new List<string>() { "Search"})">
<e-grid-searchSettings fields="@(new string[] { "CustomerID"})" operator="contains" key="Ha" ignoreCase="true"></e-grid-searchSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="150"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
document.getElementById('clear').addEventListener('click', () => {
var gridObj = document.getElementById("Grid").ej2_instances[0];
gridObj.searchSettings.key ='';
});
</script>public IActionResult Index()
{
var orders = OrderDetails.GetAllRecords();
ViewBag.datasource = orders;
return View();
}