Search toolbar is the functionality to show filtering top row directly below the header of the grid (as opposed to separate search dialog). To enable this functionality, set the ToolBarSettings.ShowSearchToolBar property to true.

This setting can be set in both the Model or the Controller, depending on your preferences. In this example, we are using a method setting up the grid for search mode in the Controller.

When a column is searchable, you can select how end-users will edit it. This is controlled by the Column.SearchType property and current has two different options - TextBox and DropDown.

In addition to that, you can specify the values end-users will see in value:name pairs in the EditValues property of Columns - this is especially useful for SearchType.DropDown. Here is an example

Here is some sample code how you can setup dropdowns in additoin to textboxes.

private void SetUpGrid(JQGrid ordersGrid) { // show the search toolbar ordersGrid.ToolBarSettings.ShowSearchToolBar = true; ordersGrid.Columns.Find(c => c.DataField == "OrderID").Searchable = false; ordersGrid.Columns.Find(c => c.DataField == "OrderDate").Searchable = false; SetUpCustomerIDSearchDropDown(ordersGrid); SetUpFreightSearchDropDown(ordersGrid); SetShipNameSearchDropDown(ordersGrid); } private void SetUpCustomerIDSearchDropDown(JQGrid ordersGrid) { // setup the grid search criteria for the columns JQGridColumn customersColumn = ordersGrid.Columns.Find(c => c.DataField == "CustomerID"); customersColumn.Searchable = true; // DataType must be set in order to use searching customersColumn.DataType = typeof(string); customersColumn.SearchToolBarOperation = SearchOperation.IsEqualTo; customersColumn.SearchType = SearchType.DropDown; // Populate the search dropdown only on initial request, in order to optimize performance if (ordersGrid.AjaxCallBackMode == AjaxCallBackMode.RequestData) { var northWindModel = new NorthwindDataContext(); var searchList = from customers in northWindModel.Customers select new SelectListItem { Text = customers.CustomerID, Value = customers.CustomerID }; customersColumn.SearchList = searchList.ToList<SelectListItem>(); customersColumn.SearchList.Insert(0, new SelectListItem { Text = "All", Value = "" }); } } private void SetUpFreightSearchDropDown(JQGrid ordersGrid) { // setup the grid search criteria for the columns JQGridColumn freightColumn = ordersGrid.Columns.Find(c => c.DataField == "Freight"); freightColumn.Searchable = true; // DataType must be set in order to use searching freightColumn.DataType = typeof(decimal); freightColumn.SearchToolBarOperation = SearchOperation.IsGreaterOrEqualTo; freightColumn.SearchType = SearchType.DropDown; // Populate the search dropdown only on initial request, in order to optimize performance if (ordersGrid.AjaxCallBackMode == AjaxCallBackMode.RequestData) { List<SelectListItem> searchList = new List<SelectListItem>(); searchList.Add(new SelectListItem { Text = "> 10", Value = "10" }); searchList.Add(new SelectListItem { Text = "> 30", Value = "30" }); searchList.Add(new SelectListItem { Text = "> 50", Value = "50" }); searchList.Add(new SelectListItem { Text = "> 100", Value = "100" }); freightColumn.SearchList = searchList.ToList<SelectListItem>(); freightColumn.SearchList.Insert(0, new SelectListItem { Text = "All", Value = "" }); } } private void SetShipNameSearchDropDown(JQGrid ordersGrid) { JQGridColumn freightColumn = ordersGrid.Columns.Find(c => c.DataField == "ShipName"); freightColumn.Searchable = true; freightColumn.DataType = typeof(string); freightColumn.SearchToolBarOperation = SearchOperation.Contains; freightColumn.SearchType = SearchType.TextBox; }