Custom Cells

FlexGrid provides a powerful infrastructure for binding cells to data and formatting the cells using CSS.

But in some cases that may not be enough. In those situations, use the formatItem event to customize the style or content present in each cell.

The grid below uses formatItem to calculate and format cells that show difference between values in the current and previous items.

// 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");
    })
)