MultiRow - Custom Cells - C1 ASP.NET MVC

Custom Cells

This sample shows how you can customize the way to add rows or change the values in the cells of MultiRow control.

Features

Sample
Source
Documentation

Active

Product

Color

Discount

Amount2

Trends

Rank

Description

This sample shows how you can customize the way to add rows or change the values in the cells of 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 the displaying of "Rank" column.
In the ItemFormatter event handler, use the MultiRow's getBindingColumn function to get the binding column.

CustomCellsController.cs
CustomCells.cshtml

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 CustomCells() 
        { 
            return View(); 
        } 
  
        public ActionResult CustomCells_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) 
        { 
            return this.C1Json(CollectionViewHelper.Read(requestData, 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> 
} 
  
<c1-multi-row id="customCellMultiRow" is-read-only="true" class="multirow" item-formatter="rankFormatter"> 
    <c1-items-source read-action-url="@Url.Action("CustomCells_Bind")"></c1-items-source> 
    <c1-multi-row-cell-group> 
        <c1-multi-row-cell binding="ID" header="ID" width="100"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Active" header="Active"></c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group colspan="2"> 
        <c1-multi-row-cell binding="Country" header="Country" colspan="2"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Product" header="Product" width="100"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Color" header="Color" width="100"></c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group colspan="2"> 
        <c1-multi-row-cell binding="Amount" header="Amount" width="100"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Amount2" header="Amount2" width="100"></c1-multi-row-cell> 
        <c1-multi-row-cell binding="Discount" header="Discount" colspan="2"></c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group> 
        <c1-multi-row-cell binding="Trends" header="Trends" allow-sorting="false"> 
            <c1-flex-grid-cell-template> 
                <c1-flex-chart width="100px" height="40px" class="trends"
                               binding-x="Month" template-bindings="@(new {ItemsSource="Trends"})"> 
                    <c1-flex-chart-axis c1-property="AxisX" position="None"></c1-flex-chart-axis> 
                    <c1-flex-chart-axis c1-property="AxisY" position="None"></c1-flex-chart-axis> 
                    <c1-flex-chart-series binding="Data"></c1-flex-chart-series> 
                </c1-flex-chart> 
            </c1-flex-grid-cell-template> 
        </c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
    <c1-multi-row-cell-group> 
        <c1-multi-row-cell binding="Rank" header="Rank"></c1-multi-row-cell> 
    </c1-multi-row-cell-group> 
</c1-multi-row> 
  
@section Description{ 
<p>@Html.Raw(MultiRowRes.CustomCells_Text0)</p> 
  
<p>@Html.Raw(MultiRowRes.CustomCells_Text1)</p> 
  
<p>@Html.Raw(MultiRowRes.CustomCells_Text2)</p> 
  
} 