Searching in ASP.NET Core Grid control

20 Jan 2022 / 2 minutes to read

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.

tagHelper

search.cs

<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();
 }

Initial search

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

tagHelper

initial-search.cs

<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 fields property of e-grid-searchSettings tag helper.

Search operators

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 operator value is contains.

Search by external button

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

tagHelper

external-btn.cs

<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();
 }

Search specific columns

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.

tagHelper

search-a-column.cs

<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();
 }

Clear search by external button

To clear the searched grid records from the external button, set key property of e-grid-searchSettings as empty string.

tagHelper

clear-search.cs

<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();
 }

Search on each key stroke

You can search the Grid data on each key stroke by binding the keyup event for the search input element inside the created event. Inside the keyup handler you can search the Grid by invoking the search method of the Grid component.

tagHelper

search-each-key.cs

<ejs-grid id="Grid" dataSource="@ViewBag.datasource" height="272" created="created" 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="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>
function created() {
       var grid = document.getElementById("Grid").ej2_instances[0];
        document.getElementById(grid.element.id + "_searchbar").addEventListener('keyup', () => {
                grid.search(event.target.value)
        });
    }
</script>

public IActionResult Index()
 {
   var orders = OrderDetails.GetAllRecords();
   ViewBag.datasource = orders;            
   return View();
 }

Contents

Initial search
Search operators
Search by external button
Search specific columns
Clear search by external button
Search on each key stroke

Contents

Initial search
Search operators
Search by external button
Search specific columns
Clear search by external button
Search on each key stroke