In my previous article (see here) I have explained a simple scenario to use the MvcJqGrid.
In a more advanced scenario, the requested type preferred should be POST, since the default is GET. The SetRequestType method allows the defintion of the request type.
The previous example uses an array that must return the values in the same order as the column definitions. A more generic solution is to return a json object with named properties. The MvcJqGrid supports this scenario by the SetJsonReader method.
The SetJsonReader method is used to configure the grid jsonReader so that the json data doesn't have to match the column model (ColModel) order of jqGrid.
Another feature that is advanced, is the capability to search in each desired column, using different search types.
The SetSearchType sets the seach type for the column. The seach type can be:
- Input (Default)
- Select. The SetSearchTerms method receives the collection of strings that define the select options.
- Datepicker. The SetSearchDateFormat method allow the definition of the date format.
The SetSearchOnEnter is used to define when the search is executed:
- true : the search is executed when the user presses enter
- false: the search is executed after the user stops typing
The SetRowList creates a dropdownlist in the pager of the grid with the specified number of rows per page.
Now we can create an example using the customer class.
The view:
@(Html.Grid("customerGrid") .SetRequestType(RequestType.Post) .SetJsonReader(new MvcJqGrid.DataReaders.JsonReader { Id="id", RepeatItems = false}) .SetCaption("Customers") .AddColumn(new Column("FirstName").SetWidth(100).SetLabel("First Name")) .AddColumn(new Column("LastName").SetWidth(100).SetLabel("Last Name")) .AddColumn(new Column("CountryName").SetLabel("Country") .SetSearchType(Searchtype.Select) .SetSearchTerms((string[])ViewBag.Countries)) .AddColumn(new Column("Phone").SetWidth(100)) .AddColumn(new Column("BirthDate").SetWidth(80).SetSearchType(Searchtype.Datepicker) .SetSearchDateFormat("yy-mm-dd")) .AddColumn(new Column(" ").SetSearch(false).SetCustomFormatter("buttonize") .SetWidth(25) .SetAlign(Align.Right)) .SetUrl(Url.Action("Search", "Customer")) .SetAutoWidth(true) .SetRowNum(10) .SetRowList(new[] { 10, 15, 20, 50 }) .SetViewRecords(true) .SetPager("pager") .SetSearchToolbar(true).SetSearchOnEnter(false) )
The SetCustomFormatter was explained previously and it allows to format the content of the column using a javascript function.
The controller that returns json with named properties:
public class CustomerController : Controller
{
public ActionResult Index()
{
var countries = new CountryRepository().Search();
ViewBag.Countries = (from c in countries select c.Name).ToArray();
return View();
}
public JsonResult Search(GridSettings gridSettings)
{
List<CustomerSearchResult> customers = null;
int totalRecords;
CustomerRepository customerRepository = new CustomerRepository();
CustomerSeachFilter filter = new CustomerSeachFilter();
if (gridSettings.IsSearch)
{
filter.FirstName = gridSettings.Where.rules.Any(r => r.field == "FirstName") ?
gridSettings.Where.rules.FirstOrDefault(r => r.field == "FirstName").data : string.Empty;
filter.LastName = gridSettings.Where.rules.Any(r => r.field == "LastName") ?
gridSettings.Where.rules.FirstOrDefault(r => r.field == "LastName").data : string.Empty;
filter.CountryName = gridSettings.Where.rules.Any(r => r.field == "CountryName") ?
gridSettings.Where.rules.FirstOrDefault(r => r.field == "CountryName").data : string.Empty;
filter.Phone = gridSettings.Where.rules.Any(r => r.field == "Phone") ?
gridSettings.Where.rules.FirstOrDefault(r => r.field == "Phone").data : string.Empty;
filter.BirthDate = gridSettings.Where.rules.Any(r => r.field == "BirthDate") ?
filter.BirthDate = gridSettings.Where.rules.Any(r => r.field == "BirthDate") ?
DateTime.ParseExact(gridSettings.Where.rules.FirstOrDefault(r => r.field == "BirthDate").data,
"yyyy-MM-dd", null) : DateTime.MinValue;
}
customers = customerRepository.Search(filter,
gridSettings.SortColumn,
gridSettings.SortOrder,
gridSettings.PageSize,
gridSettings.PageIndex,
out totalRecords);
var jsonData = new
{
total = totalRecords / gridSettings.PageSize + 1,
page = gridSettings.PageIndex,
records = totalRecords,
rows = (
from c in customers
select new
{
id = c.CustomerID,
FirstName = c.FirstName,
LastName = c.LastName,
BirthDate = c.BirthDate.ToString("yyyy-MM-dd"),
CountryName = c.CountryName,
EmailAddress = c.EmailAddress,
Phone = c.Phone,
})
};
return Json(jsonData);
}
}
The MvcJqGrid search feature also allows the configuration of the seach:- SetSortName - Defines the default seach field for the grid.
- SetSortOrder - Defines the default sort order, using the SortOrder enumerator for the grid.
- SetDefaultSearchValue - Sets the default search value for a specific column.
