FlexGrid gives end users the flexibility to group and ungroup grid data as per the requirement. This is supported by Group Panel control, which provides drag and drop grouping UI to the grid. It enables you to drag desired columns from the FlexGrid into the panel for grouping.

You can easily move groups within the panel to change the grouping order of the grid data. Moreover, clicking a group marker in the panel enables sorting of the groups, based on the particular column entries.

Use MaxGroups property to set the maximum number of groups you want to allow in Group Panel. Set the Placeholder property to the string you want to display in the panel when it contains no groups. Set the HideGroupedColumns property to a boolean value, to specify whether you want to hide the grouped columns from the grid.

The following image shows how the FlexGrid appears on using Group Panel. The example uses Sale.cs model added in the Quick Start Section.

The following image shows how the FlexGrid appears on adding groups to the panel, at the top of the grid.

The following code examples demonstrate how to enable Group Panel in the FlexGrid:

In Code

GroupPanelController.cs

public ActionResult GroupPanel(FormCollection data)
 {
   return View(Sale.GetData(10));
 }

GroupPanel.cshtml

@using C1.Web.Mvc.Grid
@using MVCFlexGrid.Models
@model IEnumerable<Sale>

@(Html.C1().FlexGrid<Sale>()
    .Id("ovFlexGrid").ShowGroupPanel(s => s
        .MaxGroups(Convert.ToInt32(4))
        .Placeholder("Please add columns for grouping here")
        .HideGroupedColumns(Convert.ToBoolean(false)))
    .AutoGenerateColumns(false)
    .Bind(Model)
    .PageSize(10)
    .CssClass("grid")
    .IsReadOnly(true)
    .Columns(bl =>
    {
        bl.Add(cb => cb.Binding("ID"));
        bl.Add(cb => cb.Binding("Start"));
        bl.Add(cb => cb.Binding("End"));
        bl.Add(cb => cb.Binding("Country"));
        bl.Add(cb => cb.Binding("Product"));
        bl.Add(cb => cb.Binding("Color"));
        bl.Add(cb => cb.Binding("Active"));
    })
)