MultiRow - Custom Cells - C1 ASP.NET MVC

Custom Cells

This sample demonstrates how to use custom cells feature of the MultiRow control.

Features

Sample
Source
Documentation

Description

This sample demonstrates how to use custom cells feature of the MultiRow control.

The sample uses the TemplateId property to specify the id of the template for the "Trends" column.

The sample also uses the ItemFormatter property to customize displaying "Rank" column. In the ItemFormatter event handler, use the getBindingColumn function of MultiRow to get the binding column.

CustomCellsController.cs
CustomCells.cshtml

using System.Web.Mvc;
using MultiRowExplorer.Models;
 
namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        public ActionResult CustomCells()
        {
            return View(Sale.GetData(500));
        }
    }
}

@model IEnumerable<Sale>
 
@section Scripts{
    <script type="text/javascript">
        function rankFormatter(panel, r, c, cell) {
            // gets the binding column
            var bcol = panel.grid.getBindingColumn(panel, r, c);
            if (bcol.binding === "Rank") {
                cell.style.textAlign = "";
                if (panel.cellType === wijmo.grid.CellType.Cell) {
                    cell.innerHTML = buildRank(panel.getCellData(r, c));
                }
            }
        }
 
        function buildRank(rank) {
            var markup = "", j, starType;
            for (j = 0; j < 5; j++) {
                starType = j < rank ? "star star-highlighted" : "star star-dimmed";
                markup += "<span class='" + starType + "'>\u2605</span>";
            }
            return markup;
        }
    </script>
}
 
@section Styles{
    <style>
        .star-highlighted {
            color: orange;
        }
 
        .star-dimmed {
            color: lightgray;
        }
 
        .trends {
            padding: 0px;
            vertical-align: middle;
            margin-top: 2px;
        }
    </style>
}
 
<script id="templateTrends" type="text/template">
    @(Html.C1().FlexChart()
        .Width(100).Height(40).CssClass("trends")
        .TemplateBind("ItemsSource", "Trends")
        .BindingX("Month")
        .Series(s => s.Add().Binding("Data"))
        .AxisX(C1.Web.Mvc.Chart.Position.None)
        .AxisY(C1.Web.Mvc.Chart.Position.None)
        .ToTemplate()
    )
</script>
 
@(Html.C1().MultiRow<Sale>()
    .Id("customCellMultiRow")
    .IsReadOnly(true)
    .Bind(Model)
    .CssClass("multirow")
    .LayoutDefinition(ld =>
    {
        ld.Add().Cells(cells =>
        {
            cells.Add(cell => cell.Binding("ID").Header("ID").Width("100"));
            cells.Add(cell => cell.Binding("Active").Header("Active"));
        });
        ld.Add().Colspan(2).Cells(cells =>
        {
            cells.Add(cell => cell.Binding("Country").Header("Country").Colspan(2));
            cells.Add(cell => cell.Binding("Product").Header("Product").Width("100"));
            cells.Add(cell => cell.Binding("Color").Header("Color").Width("100"));
        });
        ld.Add().Colspan(2).Cells(cells =>
        {
            cells.Add(cell => cell.Binding("Amount").Header("Amount").Width("100"));
            cells.Add(cell => cell.Binding("Amount2").Header("Amount2").Width("100"));
            cells.Add(cell => cell.Binding("Discount").Header("Discount").Colspan(2));
        });
        ld.Add().Header("Rank").Cells(cells =>
        {
            cells.Add(cell => cell.Binding("Trends").Header("Trends").AllowSorting(false).CellTemplate(t => t.TemplateId("templateTrends")));
        });
        ld.Add().Cells(cells =>
        {
            cells.Add(cell => cell.Binding("Rank").Header("Rank"));
        });
    })
    .ItemFormatter("rankFormatter")
)
 
@section Description{
    <p>
        This sample demonstrates how to use custom cells feature of the <b>MultiRow</b> control.
    </p>
    <p>
        The sample uses the <b>TemplateId</b> property to specify the id of the template for the "Trends" column.
    </p>
    <p>
        The sample also uses the <b>ItemFormatter</b> property to customize displaying "Rank" column.
        In the ItemFormatter event handler, use the <b>getBindingColumn</b> function of MultiRow to get the binding column.
    </p>
}