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
.
@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();
}
To apply search at initial rendering, set the fields, operator, key, and ignoreCase in the SearchSettings
property.
@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();
}
By default, grid searches all the bound column values. To customize this behavior define the
Fields
ofSearchSettings
property.
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. |
By default, the
Operator
value is contains.
To search grid records from an external button, invoke the search
method.
@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>
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
.
@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();
}
To clear the searched grid records from the external button, set Key
property as empty string.
@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();
}