Features

Grouping

Grouping

Features

Settings

Description

This sample shows grouping support in the MultiRow. Most of the work is done by the CollectionView class used as a data source for the grid. You can config 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 MultiRowExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;

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();
        }

        public ActionResult Grouping_Bind([C1JsonRequest] CollectionViewRequest<Orders.Order> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, Orders.GetOrders()));
        }
    }
}
@model IEnumerable<Orders.Order>
@{
    var cities = Orders.GetCities().ToValues();
    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()" />

<c1-multi-row id="@settings.ControlId" class="multirow" is-read-only="true" group-by="Customer.State" show-groups="true">
    <c1-items-source read-action-url="@Url.Action("Grouping_Bind")" disable-server-read="true"></c1-items-source>
    <c1-multi-row-cell-group header="Order" colspan="2">
        <c1-multi-row-cell binding="Id" header="ID" class="id" colspan="2" />
        <c1-multi-row-cell binding="Amount" header="Amount" format="c" class="amount" colspan="2" />
        <c1-multi-row-cell binding="Date" header="Ordered" />
        <c1-multi-row-cell binding="ShippedDate" header="Shipped" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Customer" colspan="3">
        <c1-multi-row-cell binding="Customer.Name" name="CustomerName" header="Customer" />
        <c1-multi-row-cell binding="Customer.Email" name="CustomerEmail" header="Customer Email" class="email" colspan="2" />
        <c1-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="Address" colspan="2" />
        <c1-multi-row-cell binding="Customer.Phone" name="CustomerPhone" header="Customer Phone" />
        <c1-multi-row-cell binding="Customer.City" name="CustomerCity" header="City" show-drop-down="true">
            <c1-data-map display-member-path="Value" selected-value-path="Value">
                <c1-items-source source-collection="cities" />
            </c1-data-map>
        </c1-multi-row-cell>
        <c1-multi-row-cell binding="Customer.State" name="CustomerState" header="State" />
        <c1-multi-row-cell binding="Customer.Zip" name="CustomerZip" header="Zip" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Shipper">
        <c1-multi-row-cell binding="Shipper.Name" name="ShipperName" header="Shipper" width="*" />
        <c1-multi-row-cell binding="Shipper.Email" name="ShipperEmail" header="Shipper Email" class="email" />
        <c1-multi-row-cell binding="Shipper.Express" name="ShipperExpress" header="Express" />
    </c1-multi-row-cell-group>
</c1-multi-row>

@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 grouping support in the <b>MultiRow</b>. Most of the work is done by the CollectionView class used as a data source for the grid.
        You can config 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>
}