Search in ASP.NET MVC Grid Component

16 Mar 202316 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.

NOTE

The clear icon is shown in the Data Grid search text box when it is focused on search text or after typing the single character in the search text box. A single click of the clear icon clears the text in the search box as well as the search results in the Data Grid.

CSHTML
Search.cs
@Html.EJS().Grid("Search").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
  col.Field("OrderID").HeaderText("Order ID").Width("160").Add();
  col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
  col.Field("Freight").HeaderText("Freight").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
  col.Field("OrderDate").HeaderText("Order Date").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();

}).AllowPaging().PageSettings(page => page.PageCount(2)).Toolbar(new List<string>() { "Search" }).Render()
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 the SearchSettings property.

CSHTML
Initial-search.cs
@Html.EJS().Grid("Search").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").Width("160").Add();
    col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
    col.Field("Freight").HeaderText("Freight").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
    col.Field("OrderDate").HeaderText("Order Date").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();

}).AllowPaging().SearchSettings(search => { search.Fields(new string[] { "CustomerID" }).Key("Ha").Operator("contains").IgnoreCase(true); }).PageSettings(page => page.PageCount(2)).Toolbar(new List<string>() { "Search" }).Render()
public IActionResult Index()
 {
   var orders = OrderDetails.GetAllRecords();
   ViewBag.datasource = orders;            
   return View();
 }

NOTE

By default, grid searches all the bound column values. To customize this behavior define the Fields of SearchSettings property.

Search operators

The search operator can be defined in the Operator property of 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.

NOTE

By default, the Operator value is contains.

Search by external button

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

CSHTML
External-btn.cs
@Html.EJS().Button("search").Content("Search").Render()

@Html.EJS().Grid("Search").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").Width("160").Add();
    col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
    col.Field("Freight").HeaderText("Freight").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
    col.Field("OrderDate").HeaderText("Order Date").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();

}).AllowPaging().PageSettings(page=>page.PageCount(2)).Render()

<script>
    document.getElementById('search').addEventListener('click', () => {
        var gridObj = document.getElementById("Search").ej2_instances[0];
        var searchString = "AL";
        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 SearchSettings.

CSHTML
Search-a-column.cs
@Html.EJS().Grid("Search").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").Width("160").Add();
    col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
    col.Field("ShipName").HeaderText("Ship Name").Width("170").Add();
    col.Field("ShipCity").HeaderText("Ship City").Width("140").Add();

}).AllowPaging().SearchSettings(search => { search.Fields(new string[] { "CustomerID", "ShipCity", "ShipName" }); }).PageSettings(page => page.PageCount(2)).Toolbar(new List<string>() { "Search" }).Render()
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 as empty string.

CSHTML
Clear-search.cs
@Html.EJS().Button("clear").Content("Clear Search").Render()

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").Width("160").Add();
    col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
    col.Field("Freight").HeaderText("Freight").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
    col.Field("OrderDate").HeaderText("Order Date").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();

}).AllowPaging().SearchSettings(search => { search.Fields(new string[] { "CustomerID" }).Key("Ha").Operator("contains").IgnoreCase(true); }).PageSettings(page => page.PageCount(2)).Toolbar(new List<string>() { "Search" }).Render()

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

CSHTML
Search-each-key.cs
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").Width("160").Add();
    col.Field("CustomerID").HeaderText("Customer ID").Width("170").Add();
    col.Field("ShipName").HeaderText("Ship Name").Width("170").Add();
    col.Field("ShipCity").HeaderText("Ship City").Width("140").Add();

}).AllowPaging().Created("created").Toolbar(new List<string>() { "Search" }).Render()

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

Perform search operation in Grid using multiple keywords

You can perform a searching operation in the Grid using multiple keywords. This can be achieved by the ActionBegin event of the Grid.
In the following sample, we have performed the searching with multiple keywords by using the query property of grid when the requestType is searching in the ActionBegin event.

CSHTML
Search-multiple-keywords.cs
@using dotnet_mvc_sample.Controllers;
@{
    List<object> toolbarItems = new List<object>();
    toolbarItems.Add("Search");
}
@(Html.EJS().Grid<HomeController.BigData>("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
    col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).Width("120").Add();
    col.Field("CustomerID").HeaderText("CustomerID").Width("120").Add();
    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").Add();
    col.Field("ShipCity").HeaderText("ShipCity").Width("120").Add();

}).Toolbar(toolbarItems).ActionBegin("actionBegin").ActionComplete("actionComplete").Render())

<script>
    var values;
    var key = '';
    var refresh = false;
    var removeQuery = false;
    var valueAssign = false;

    function actionBegin(args) {
        if (args.requestType == 'searching') {
            const keys = args.searchString.split(',');
            var flag = true;
            var predicate;
            if (keys.length > 1) {
                if (this.searchSettings.key !== '') {
                    values = args.searchString;
                    keys.forEach((key) => {
                        this.getColumns().forEach((col) => {
                            if (flag) {
                                predicate = new ej.data.Predicate(
                                    col.field,
                                    'contains',
                                    key,
                                    true
                                );

                                flag = false;
                            } else {
                                var predic = new ej.data.Predicate(
                                    col.field,
                                    'contains',
                                    key,
                                    true
                                );

                                predicate = predicate.or(predic);
                            }
                        });
                    });
                    this.query = new ej.data.Query().where(predicate);
                    this.searchSettings.key = '';
                    refresh = true;
                    valueAssign = true;
                    removeQuery = true;
                    this.refresh();
                }
            }
        }
    }
    function actionComplete(args) {
        if (args.requestType === 'refresh' && valueAssign) {
            document.getElementById(this.element.id + '_searchbar').value = values;
            valueAssign = false;
        } else if (
            document.getElementById(this.element.id + '_searchbar').value === '' &&
            args.requestType === 'refresh' &&
            removeQuery
        ) {
            this.query = new ej.data.Query();
            removeQuery = false;
            this.refresh();
        }
    }
</script>
public IActionResult Index()
 {
   var orders = OrderDetails.GetAllRecords();
   ViewBag.Datasource = orders;            
   return View();
 }

NOTE

Define multiple keywords by using a comma separator in search bar to search.

NOTE

Search operation can be performed in foreign key column based on following way.

* When a value is searched on a grid with the foreign key column, a filter query is sent to the foreign key data source, and the appropriate column is filtered depending on the search value. The search query will be sent to the grid data source, and the value of the associated field will be returned.