jqGrid Strongly Typed Helper - Caption layer, dynamic scrolling and grouping

Recently, I have released an updated version of my Lib.Web.Mvc project, which brings few new functionalities to jqGrid strongly typed helper. Let me give you a short description of those, starting with support for caption layer:

If you want to enable the caption layer, all you have to do is set JqGridOptions.Caption property to not empty string (you can also use proper JqGridHelper constructor parameter):

@{
  var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<jqGrid.Models.ProductFormattedViewModel>("products",
    caption: "Products",
    ...
  );
}

There two more options for controlling caption layer:

• HiddenEnabled - This property defines whether the show/hide grid button is enabled.
• Hidden - This property defines whether the grid is initially hidden (no data is loaded, only caption layer is shown). This setting takes effect only if the Caption property is not empty string and HiddenEnabled is set to true.

Another new functionality supported by the helper is dynamic scrolling. This is supported through JqGridOptions.DynamicScrollingMode property, which can take one of the following values:

• JqGridDynamicScrollingModes.Disabled - Dynamic scrolling is disabled (this is default value).
• JqGridDynamicScrollingModes.HoldAllRows - Dynamic scrolling is enabled, the grid will hold all items requested.
• JqGridDynamicScrollingModes.HoldVisibleRows - Dynamic scrolling is enabled, the grid will hold only visible rows.

When you set this property to value different than Disabled jqGrid will remove the pager and load data as needed while scrolling. There is a way to optimize this experience by allowing jqGrid to request more than one page of data at once. To achieve this first you must enable npage parameter through ParametersNames property:

@{
  var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<jqGrid.Models.ProductFormattedViewModel>("products",
    dynamicScrollingMode: Lib.Web.Mvc.JQuery.JqGrid.JqGridDynamicScrollingModes.HoldAllRows,
    ...
    parametersNames: new Lib.Web.Mvc.JQuery.JqGrid.JqGridParametersNames() { PagesCount = "npage" },
    ...
  );
}

Now, we just need to modify controller action to support this parameter:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Products(JqGridRequest request, CustomSearchViewModel viewModel)
{
  string filterExpression = String.Empty;
  if (request.Searching)
  {
    //Generate filter expression
    ...
  }

  int totalRecordsCount = _productsRepository.GetCount(filterExpression);

  JqGridResponse response = new JqGridResponse()
  {
    TotalPagesCount = (int)Math.Ceiling((float)totalRecordsCount / (float)request.RecordsCount),
    PageIndex = request.PageIndex,
    TotalRecordsCount = totalRecordsCount
  };
  response.Records.AddRange(from product in _productsRepository.FindRange(filterExpression, String.Format("{0} {1}", sortingName, request.SortingOrder), request.PageIndex * request.RecordsCount, (request.PagesCount.HasValue ? request.PagesCount.Value : 1) * request.RecordsCount)
                            select new JqGridRecord<ProductFormattedViewModel>(Convert.ToString(product.Id), new ProductFormattedViewModel(product)));

  return new JqGridJsonResult() { Data= response };
}

The user can scroll through the rows and jqGrid will dynamically load all necessary data:

The last new functionality is grouping. To enable it, you need to set JqGridOptions.GroupingEnabled to true and assign JqGridGroupingView to JqGridOptions.GroupingView option (at this moment jqGrid supports only one grouping level, but the API is ready to support more):

@{
  var grid = new Lib.Web.Mvc.JQuery.JqGrid.JqGridHelper<jqGrid.Models.ProductFormattedViewModel>("products",
    groupingEnabled: true,
    groupingView: new Lib.Web.Mvc.JQuery.JqGrid.JqGridGroupingView 
    {
      Fields = new string[] { "Category" },
      ColumnShow = new bool[] { false },
      Summary = new bool[] { true },
      DataSorted = true
    },
    ...
  );
}

Setting DataSorted to true will cause jqGrid to add grouping column name (name not index) to sorting names (jqGrid requires data sorted by grouping column). There is also new DataAnnotation (JqGridColumnSummary)available which provides control ower group summary for the column.

The sample project can be downloaded here, for those of you who whish to work directly with JavaScript the jqGrid in ASP.NET MVC 3 and Razor samples are available here.