Features

Styling Records, Groups, and Cells

Styling Records, Groups, and Cells

This sample shows how you can use built-in class names in CSS rules to customize the appearance of the record and group delimiters.

Features

Description

In most of the applications, you would want to show where each record and group starts or ends.
The MultiRow control enables this by adding CSS class names to cell elements in the first and last row/column of each group.
The class names are wj-record-start, wj-record-end, wj-group-start, and wj-group-end.

This example shows how you can use these class names in CSS rules to customize the appearance of the record and group delimiters.
It also shows how you can use the standard CssClass property to customize the appearance of specific cells within groups.

using System.Web.Mvc;
using System.Collections.Generic;
using MultiRowExplorer.Models;

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        public ActionResult Styling()
        {
            return View(Orders.GetOrders());
        }
    }
}
@model IEnumerable<Orders.Order>

@section Styles{
    <link rel="stylesheet" href="~/Content/css/CustomMultiRow.css" />
}

@(Html.C1().MultiRow<Orders.Order>()
    .Id("stylingMultiRow")
    .Bind(bl => bl.Bind(Model).DisableServerRead(true))
    .CssClass("multirow multirow-css")
    .LayoutDefinition(LayoutDefinitionsBuilders.ThreeLines)
)

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

}

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

<p>@Html.Raw(Resources.MultiRowExplorer.Styling_Text2)</p>

}