MultiRow - Grouping - C1 ASP.NET MVC

Grouping

This sample shows how to use grouping support in the MultiRow control.

Features

Sample
Source
Documentation

Settings

Description

This sample shows how to use grouping support in the MultiRow control. Most of the work is done by the CollectionView class, which is used as a data source for the grid. You can configure group description by GroupBy method in view. To add grouping by Javascript, add one or more GroupDescription objects to the CollectionView.GroupDescriptions property. And ensure that the MultiRow's ShowGroups property is set to true.

You can customize the text that is displayed in group header rows using the MultiRow's GroupHeaderFormat property. By default, this displays the name of the group, for example, State, followed by the current group and the number of items in the group.

using C1.Web.Mvc.Fluent;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc.MultiRow;
using C1.Web.Mvc.MultiRow.Fluent;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace MultiRowExplorer.Models
{
    public class LayoutDefinitionsBuilders
    {
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> OneLine
        {
            get
            {
                return ld =>
                {
                    ld.Add().Colspan(15).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id"))
                            .Add(cell => cell.Binding("Date").Header("Ordered"))
                            .Add(cell => cell.Binding("ShippedDate").Header("Shipped"))
                            .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount"))
                            .Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer"))
                            .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address"))
                            .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City")
                                .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                            .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"))
                            .Add(cell => cell.Binding("Customer.Zip").Name("CustomerZip").Header("Zip"))
                            .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").CssClass("email"))
                            .Add(cell => cell.Binding("Customer.Phone").Name("Customerphone").Header("Customer Phone"))
                            .Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper"))
                            .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").CssClass("email"))
                            .Add(cell => cell.Binding("Shipper.Phone").Name("ShipperPhone").Header("Shipper Phone"))
                            .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
                    });
                };
            }
        }
 
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> TwoLines
        {
            get
            {
                return ld =>
                {
                    ld.Add().Header("Order").Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id").Width("150"))
                            .Add(cell => cell.Binding("Date").Header("Ordered").Width("150"))
                            .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount"))
                            .Add(cell => cell.Binding("ShippedDate").Header("Shipped"));
                    });
                    ld.Add().Header("Customer").Colspan(3).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer").Width("200"))
                            .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").Colspan(2).CssClass("email"))
                            .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address"))
                            .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City").ShowDropDown(true)
                                .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                            .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"));
                    });
                    ld.Add().Header("Shipper").Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Colspan(2))
                            .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").Width("200").CssClass("email"))
                            .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
                    });
                };
            }
        }
 
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> ThreeLines
        {
            get
            {
                return ld =>
                {
                    ld.Add().Header("Order").Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Id").Header("ID").Colspan(2).CssClass("id"))
                            .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").Colspan(2).CssClass("amount"))
                            .Add(cell => cell.Binding("Date").Header("Ordered"))
                            .Add(cell => cell.Binding("ShippedDate").Header("Shipped"));
                    });
                    ld.Add().Header("Customer").Colspan(3).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer"))
                            .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").Colspan(2).CssClass("email"))
                            .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address").Colspan(2))
                            .Add(cell => cell.Binding("Customer.Phone").Name("CustomerPhone").Header("Phone"))
                            .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City")
                                .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                            .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"))
                            .Add(cell => cell.Binding("Customer.Zip").Name("CustomerZip").Header("Zip"));
                    });
                    ld.Add().Header("Shipper").Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Width("*"))
                            .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").CssClass("email"))
                            .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
                    });
                };
            }
        }
 
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> Sales
        {
            get
            {
                return ld =>
                {
                    ld.Add().Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("ID").Header("ID"));
                        cells.Add(cell => cell.Binding("Active").Header("Active"));
                    });
                    ld.Add().Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Start").Header("Start"));
                        cells.Add(cell => cell.Binding("End").Header("End"));
                    });
                    ld.Add().Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Country").Header("Country").Colspan(2));
                        cells.Add(cell => cell.Binding("Product").Header("Product"));
                        cells.Add(cell => cell.Binding("Color").Header("Color"));
                    });
                    ld.Add().Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Amount").Header("Amount"));
                        cells.Add(cell => cell.Binding("Amount2").Header("Amount2"));
                        cells.Add(cell => cell.Binding("Discount").Header("Discount").Colspan(2));
                    });
                };
            }
        }
    }
}

using MultiRowExplorer.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        //
        // GET: /Grouping/
 
        public ActionResult Grouping()
        {
            ViewBag.DemoSettingsModel = new ClientSettingsModel
            {
                Settings = new Dictionary<string, object[]>
                {
                    {"GroupBy", new object[]{"Customer State", "Customer City", "Customer State and Customer City", "Ordered Date", "Shipped Date", "Amount","None"}},
                    { "ShowGroups", new object[] {true, false } }
                }
            };
 
            return View(Orders.GetOrders());
        }
    }
}

@model IEnumerable<Orders.Order>
@{
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;
    ViewBag.DemoSettings = true;
}
 
@section Scripts{
    <script>
        function collapseAllGroups() {
            var mr = wijmo.Control.getControl("#@settings.ControlId");
            mr.collapseGroupsToLevel(0);
        }
        function expandAllGroups() {
            var mr = wijmo.Control.getControl("#@settings.ControlId");
            mr.collapseGroupsToLevel(10);
        }
    </script>
}
 
<input type="button" value="Collapse All" class="btn" onclick="collapseAllGroups()" />
<input type="button" value="Expand All" class="btn" onclick="expandAllGroups()" />
 
@(Html.C1().MultiRow<Orders.Order>()
    .Id(settings.ControlId)
    .CssClass("multirow")
    .IsReadOnly(true)
    .Bind(Model)
    .GroupBy("Customer.State")
    .ShowGroups(true)
    .LayoutDefinition(LayoutDefinitionsBuilders.ThreeLines)
)
 
@section Settings{
    <script>
        function customChangeGroupBy(grid, name) {
            var groupDescriptions = grid.collectionView.groupDescriptions;
            grid.beginUpdate();
            groupDescriptions.clear();
 
            if (name.indexOf("Customer State") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Customer.State"));
            }
 
            if (name.indexOf("Customer City") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Customer.City"));
            }
 
            if (name.indexOf("Ordered Date") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Date", formatDateValue));
            }
 
            if (name.indexOf("Shipped Date") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("ShippedDate", formatDateValue));
            }
 
            if (name.indexOf("Amount") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Amount", function (item, prop) {
                    var value = item[prop];
                    if (value <= 1000) {
                        return "0 to 1000";
                    }
 
                    if (value > 1000 && value <= 2000) {
                        return "1000 to 2000";
                    }
 
                    if (value > 2000 && value <= 3000) {
                        return "2000 to 3000";
                    }
 
                    if (value > 3000 && value <= 4000) {
                        return "3000 to 4000";
                    }
 
                    if (value > 4000 && value <= 5000) {
                        return "4000 to 5000";
                    }
 
                    return "More than 5000";
                }));
            }
 
            grid.endUpdate();
        }
 
        function formatDateValue(item, prop) {
            var value = item[prop];
            if (!value) {
                return "";
            } else {
                return value.getFullYear() + "/" + (value.getMonth() + 1);
            }
        }
    </script>
}
 
@section Description{
    <p>
        This sample shows how to use grouping support in the <b>MultiRow</b> control. Most of the work is done by the CollectionView class, which is used as a data source for the grid.
        You can configure group description by <b>GroupBy</b> method in view.
        To add grouping by Javascript, add one or more <b>GroupDescription</b> objects to the <b>CollectionView.GroupDescriptions</b> property.
        And ensure that the MultiRow's <b>ShowGroups</b> property is set to true.
    </p><p>
        You can customize the text that is displayed in group header rows using the MultiRow's <b>GroupHeaderFormat</b> property.
        By default, this displays the name of the group, for example, State, followed by the current group and the number of items in the group.
    </p>
}