Features

Custom Cells

Custom Cells

Features

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.

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>
}