ASP.NET MVC
Demos
Support
Forum
Download
Search results

Search

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.

razor
search.cs
@Html.EJS().Grid("Search").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").Width("160").Add();
    col.Field("Customer ID").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();
        }

To apply search at initial rendering, set the fields, operator, key, and ignoreCase in the SearchSettings.

razor
initial-search.cs
@Html.EJS().Grid("Search").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
    col.Field("CategoryName").HeaderText("Category Name").Width("160").Add();
    col.Field("ProductName").HeaderText("Product Name").Width("170").Add();
    col.Field("UnitsInStock").HeaderText("Units In Stock").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("QuantityPerUnit").HeaderText("Quantity Per Unit").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("Discontinued").HeaderText("Discontinued").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("140").Type("boolean").DisplayAsCheckBox(true).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();
        }

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

Search operators

The search operator can be defined in the SearchSettings.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 SearchSettings.Operator value is contains.

Search by external button

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

razor
@Html.EJS().Button("search").Content("Search").Render()

@Html.EJS().Grid("Search").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
{
    col.Field("CategoryName").HeaderText("Category Name").Width("160").Add();
    col.Field("ProductName").HeaderText("Product Name").Width("170").Add();
    col.Field("UnitsInStock").HeaderText("Units In Stock").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("QuantityPerUnit").HeaderText("Quantity Per Unit").Width("170").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("Discontinued").HeaderText("Discontinued").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("140").Type("boolean").DisplayAsCheckBox(true).Add();
}).AllowPaging()).PageSettings(page=>page.PageCount(2)).Render()

<script>
document.getElementById('search').addEventListener('click', () => {
    var gridObj = document.getElementById("Search").ej2_instances[0];
    var searchString = "Ha";
    gridObj.search(searchString);
});
</script>

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 SearchSettings.Fields property.

razor
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 searchSettings.key property as empty string.

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