// This file locates: "Scripts/Lesson/C1FlexGrid/CustomCells.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // insert extra column header row
    var ch = theGrid.columnHeaders,
          hr =new wijmo.grid.Row();
    ch.rows.insert(0, hr);
 
    // fill out headings in extra header row
    for (var i = 0; i < theGrid.columns.length; i++) {
        var hdr = ch.getCellData(1, i);
        if (hdr =='Diff') hdr = ch.getCellData(1, i - 1)
        ch.setCellData(0, i, hdr);
    }
 
    // allow merging across and down extra header row
    theGrid.allowMerging ='ColumnHeaders';
    hr.allowMerging =true;
    theGrid.columns[0].allowMerging =true;
    theGrid.columns[1].allowMerging =true;
 
    // custom rendering for headers and "Diff" columns
    theGrid.formatItem.addHandler(function (s, e) {
 
        // center-align column headers
        if (e.panel == s.columnHeaders) {
            e.cell.innerHTML ='<div class="v-center">' +
        e.cell.innerHTML +'</div>';
        }
 
        // custom rendering for "Diff" columns
        if (e.panel == s.cells) {
            var col = s.columns[e.col];
            if (e.row > 0 && (col.binding =='SalesDiff' || col.binding =='ExpensesDiff')) {
                var vnow = s.getCellData(e.row, e.col - 1),
                    vprev = s.getCellData(e.row - 1, e.col - 1),
                    diff = (vnow / vprev) - 1;
 
                // format the cell
                var html ='<div class="diff-{cls}">' +
                '<span style="font-size:75%">{val}</span> ' +
                '<span style="font-size:120%" class="wj-glyph-{glyph}"></span>';
                html = html.replace('{val}', wijmo.Globalize.format(diff, col.format));
                if (diff < 0.01) {
                    html = html.replace('{cls}','down').replace('{glyph}','down');
                }else if (diff > 0.01) {
                    html = html.replace('{cls}','up').replace('{glyph}','up');
                }else {
                    html = html.replace('{cls}','none').replace('{glyph}','circle');
                }
                e.cell.innerHTML = html;
            }
        }
    });
});

// This file locates: "Content/css/Lesson/C1FlexGrid/CustomCells.css".
.wj-cell .v-center {
  position: relative;
  top: 50%;
    transform: translateY(-50%);
  white-space: pre-wrap;
}
.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .diff-none {
  color: #d8b400;
}
.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .diff-up {
  color: #4c8f00;
}
.wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) .diff-down {
  color: #9f0000;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: CustomCells
        public ActionResult CustomCells()
        {
            return View(Models.FlexGridData.GetSales(Models.FlexGridData.Countries6, 200));
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.CustomCells_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.CustomCells_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CustomCells_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CustomCells_Text3)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(250)
    .IsReadOnly(true).AllowSorting(false)
    .AllowResizing(C1.Web.Mvc.Grid.AllowResizing.None)
    .AllowDragging(C1.Web.Mvc.Grid.AllowDragging.None)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.RowRange)
    .ShowAlternatingRows(false)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs =>
    {
        cs.Add().Binding("Id").Header("ID").Width("50");
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Sales").Header("Sales").Width("80").Format("n0");
        cs.Add().Binding("SalesDiff").Header("Diff").DataType(C1.Web.Mvc.Grid.DataType.Number).Width("80").Format("p0");
        cs.Add().Binding("Expenses").Header("Expenses").Width("80").Format("n0");
        cs.Add().Binding("ExpensesDiff").Header("Diff").DataType(C1.Web.Mvc.Grid.DataType.Number).Width("80").Format("p0");
    })
)