Features

Group Panel

Group Panel

The GroupPanel feature allows you to add a drag-drop grouping UI to any MultiRow control.

Features

Overview
Collapsible Column Headers
Styling Records, Groups, and Cells
Grouping
Group Headers
Row Header
Filtering
Row and Column Freezing
Paging
Group Panel
Remote Data Binding
Custom Cells
Custom Editors
Custom Column Headers
Editing
Batch Editing
Sorting
Virtual Scrolling
Disable Server Reading
Data Map
Excel Export
PDF Export
Unobtrusive Validation
Drag columns here to create Groups
Ordered
Shipped
City
State
Zip
Express
0
Mark Smith
Flash Delivery
$3,027.00
6967 Johnson St.
263-5229

Settings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
using MultiRowExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using MultiRowExplorer.Localization;
  
namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        private readonly ControlOptions groupPanelOptions = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Max Groups", new OptionItem {Values = new List<string> {"3", "4", "5", "6"}, CurrentValue = "3"}},
                {"Placeholder", new OptionItem {Values = new List<string> { MultiRowRes.GroupPanel_Text1, MultiRowRes.GroupPanel_Text2}, CurrentValue = MultiRowRes.GroupPanel_Text1}}
            }
        };
  
        public ActionResult GroupPanel(IFormCollection data)
        {
            groupPanelOptions.LoadPostData(data);
            ViewBag.DemoOptions = groupPanelOptions;
            return View();
        }
  
        public ActionResult GroupPanel_Bind([C1JsonRequest] CollectionViewRequest<Orders.Order> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, Orders.GetOrders()));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@using C1.Web.Mvc.Grid
@model IEnumerable<Orders.Order>
@{
    var cities = Orders.GetCities().ToValues();
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;
    ViewBag.DemoDescription = false;
}
  
<c1-multi-row id="groupPanelMultiRow" class="multirow" is-read-only="true" allow-dragging="@AllowDragging.Columns">
    <c1-items-source read-action-url="@Url.Action("GroupPanel_Bind")"></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" datamap-editor="@C1.Web.Mvc.Grid.DataMapEditor.DropDownList">
            <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-flex-grid-group-panel max-groups="@(Convert.ToInt32(optionsModel.Options["Max Groups"].CurrentValue))"
                              placeholder="@(optionsModel.Options["Placeholder"].CurrentValue)">
    </c1-flex-grid-group-panel>
</c1-multi-row>
  
@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
}
  
@section Summary{
    @Html.Raw(MultiRowRes.GroupPanel_Text0)
}