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.

Country

Sales

Diff

Expenses

Diff

81,733

38,401

Germany

20,603

-75%

27,944

-27%

44,218

115%

48,877

75%

Japan

29,191

-34%

23,366

-52%

Italy

46,951

61%

49,108

110%

Greece

86,237

84%

49,767

31,459

-64%

40,845

-18%

Germany

99,190

215%

1,631

-96%

52,628

-47%

46,701

2,763%

Japan

54,682

4,055

-91%

Italy

45,333

-17%

14,859

266%

Greece

64,270

42%

38,148

157%

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