Features

Row Header

Row Header

The IsRowHeader property of the cell groups allows you to create groups to be displayed as row header cells.

Features

Settings

Description

The layout is divided into three groups: customer, order, and shipper. Customer is a row header group. Setting the IsRowHeader property to true automatically sets the cell's IsReadOnly property to true (headers cannot be edited), adds a 'wj-header' style to the cell's CssClass property (so the cells are styled as headers), and sets the cell's CellTemplate property to its Header value (so the cell shows the header as an unbound string). You may choose to set the cell's Binding property instead of Header if you want to show bound values in the row header cells.

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using MultiRowExplorer.Models;
using Microsoft.AspNetCore.Http;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        private readonly ControlOptions _rowHeaderOptions = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Row Header",new OptionItem{Values = new List<string> {"True", "False"}, CurrentValue = "True"}}
            }
        };

        // GET: GroupHeaders
        public ActionResult RowHeader(IFormCollection collection)
        {
            _rowHeaderOptions.LoadPostData(collection);
            ViewBag.RowHeaderOptions = _rowHeaderOptions;
            return View();
        }

        public ActionResult RowHeader_Read([C1JsonRequest] CollectionViewRequest<Orders.Order> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, Orders.GetOrders()));
        }
    }
}
@model IEnumerable<Orders.Order>
@{
    var cities = Orders.GetCities().ToValues();
    ControlOptions optionsModel = ViewBag.RowHeaderOptions;
    ViewBag.DemoSettings = true;
}

<c1-multi-row id="ovMultiRow" class="multirow">
    <c1-items-source read-action-url="@Url.Action("RowHeader_Read")"></c1-items-source>
    <c1-multi-row-cell-group header="Customer" colspan="3" is-row-header="@Convert.ToBoolean(optionsModel.Options["Row Header"].CurrentValue)">
        <c1-multi-row-cell binding="Customer.Name" name="CustomerName" header="Customer" width="200" />
        <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" />
        <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-group>
    <c1-multi-row-cell-group header="Order" colspan="3">
        <c1-multi-row-cell binding="Id" header="ID" class="id" rowspan="2"/>
        <c1-multi-row-cell binding="Date" header="Ordered" width="150" rowspan="2"/>
        <c1-multi-row-cell binding="Amount" header="Amount" format="c" class="amount"  width="150"/>
        <c1-multi-row-cell binding="ShippedDate" header="Shipped"  width="150"/>
    </c1-multi-row-cell-group>

    <c1-multi-row-cell-group header="Shipper" colspan="3">
        <c1-multi-row-cell binding="Shipper.Name" name="ShipperName" header="Shipper" width="200" />
        <c1-multi-row-cell binding="Shipper.Email" name="ShipperEmail" header="Shipper Email" class="email" width="300" />
        <c1-multi-row-cell binding="Shipper.Express" name="ShipperExpress" header="Express" />
    </c1-multi-row-cell-group>
</c1-multi-row>


@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
}

@section Summary{
    <p>@Html.Raw(MultiRowRes.RowHeader_Summary_Text0)</p>
}

@section Description{
    <p>@Html.Raw(MultiRowRes.RowHeader_Description_Text0)</p>


}