Searching

14 Mar 20184 minutes to read

The Grid has an option to search its content using the JavaScript method search with search key as parameter. Also, it provides an option to integrate Search text box in grid toolbar, by adding theSearch toolbar item in ToolbarItems property of ToolbarSettings.

The following code example describes the previous behavior.

@(Html.EJ().Grid<OrdersView>("Searching")
            .Datasource((IEnumerable<object>)ViewBag.datasource)
            .AllowPaging()
            .ToolbarSettings(toolbar =>{ toolbar.ShowToolbar().ToolbarItems(items => { items.AddTool(ToolBarItems.Search); }); })
            .AllowSearching()           
            .Columns(col =>
            {
                col.Field("OrderID").Add();
                col.Field("EmployeeID").Add();   
                col.Field("CustomerID").Add();
                col.Field("ShipCountry").Add(); 
                col.Field("Freight").Add();    
            })
        )
namespace MVCSampleBrowser.Controllers
     	 {
          public partial class GridController : Controller
          {
           public ActionResult Searching()
             {
                var DataSource = new NorthwindDataContext().OrdersViews.ToList();
                ViewBag.datasource = DataSource;
                return View();
              }
          }
       }

The following output is displayed as a result of the previous code example.

Initial searching

While initializing the grid, there is an option to display only the searched data in grid. To perform initial searching, define Fields, Operator, Key and IgnoreCase in the SearchSettings property.

NOTE

The Key value must be passed as string.

The following code example describes the previous behavior.

@(Html.EJ().Grid<OrdersView>("Selection")
            .Datasource((IEnumerable<object>)ViewBag.datasource)
            .AllowPaging()
            .ToolbarSettings(toolbar => { toolbar.ShowToolbar().ToolbarItems(items => { items.AddTool(ToolBarItems.Search); }); })
            .AllowSearching()  
			.SearchSettings(col => { col.Fields(search => { search.Add("CustomerID"); }).Operator(Operator.Contains).Key("frank").IgnoreCase(false); })         
            .Columns(col =>
            {
                col.Field("OrderID").Add();
                col.Field("EmployeeID").Add();   
                col.Field("CustomerID").Add();
                col.Field("ShipCountry").Add(); 
                col.Field("Freight").Add();    
            })
        )
namespace MVCSampleBrowser.Controllers
     	 {
          public partial class GridController : Controller
          {
           public ActionResult Selection()
             {
                var DataSource = new NorthwindDataContext().OrdersViews.ToList();
                ViewBag.datasource = DataSource;
                return View();
              }
           }
         }

The following output is displayed as a result of the previous code example.

List of supported operators in searching.

Operator.Equal
Operator.NotEqual
Operator.StartsWith
Operator.EndsWith
Operator.Contains