Features

Styling Records, Groups, and Cells

Styling Records, Groups, and Cells

This example 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 Microsoft.AspNetCore.Mvc;
using MultiRowExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        public ActionResult Styling()
        {
            return View();
        }

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

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

<c1-multi-row id="stylingMultiRow" class="multirow multirow-css">
    <c1-items-source read-action-url="@Url.Action("Styling_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 Summary{
    <p>
        This example shows how you can use built-in class names in CSS rules to customize the appearance of the record and group delimiters.
    </p>
}

@section Description{
    <p>
        In most of the applications, you would want to show where each record and group starts or ends.
        The <b>MultiRow</b> 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.
    </p><p>
        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 <b>CssClass</b> property to customize the appearance of specific cells within groups.
    </p>
}