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 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
    {
        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(FormCollection collection)
        {
            _rowHeaderOptions.LoadPostData(collection);
            var model = Orders.GetOrders();
            ViewBag.RowHeaderOptions = _rowHeaderOptions;
            return View(model);
        }
    }
}
@model IEnumerable<Orders.Order>
@{
    ControlOptions optionsModel = ViewBag.RowHeaderOptions;
    ViewBag.DemoSettings = true;
}

@(Html.C1().MultiRow<Orders.Order>()
    .Id("ovMultiRow")
    .Bind(bl => bl.Bind(Model).DisableServerRead(true))
    .CssClass("multirow")
    .LayoutDefinition(ld =>
    {
        ld.Add().Header("Customer").IsRowHeader(Convert.ToBoolean(optionsModel.Options["Row Header"].CurrentValue)).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").DataMapEditor(DataMapEditor.DropDownList)
                        .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                    .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"));
        });
        ld.Add().Header("Order").Colspan(3).Cells(cells =>
        {
            cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id").Rowspan(2))
                .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount").Width("150").Rowspan(2))
                .Add(cell => cell.Binding("Date").Header("Ordered").Width("150"))
                .Add(cell => cell.Binding("ShippedDate").Header("Shipped").Width("150"));
        });
        ld.Add().Header("Shipper").Colspan(3).Cells(cells =>
        {
            cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Width("200"))
                .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").Width("300").CssClass("email"))
                .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
        });
    })
)
@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
    
}

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

@section Description{
    <p>
        @Html.Raw(Resources.MultiRowExplorer.RowHeader_Description_Text0)
    </p>
}