Column Styling

FlexGrid columns have a few properties that affect styling:

cssClass: Specifies a class name to be added to cells in the column. The class name can be used in CSS rules to modify the style of cells in the column.
align: Specifies the horizontal alignment of text in the cells. This property is set to null by default, which causes the grid to select the alignment based on the column's dataType (numbers are right-aligned, Boolean values are centered, and other types are left-aligned). If you want to override the default alignment, set this property to 'left' 'right', or 'center'.
wordWrap: Specifies whether text in the cells should be allowed to wrap within the cell. Note that the grid will not adjust the row heights to fit the cell content unless you call the autoSizeRows method.

The cssClass is the most powerful and flexible of the three properties, but align and wordWrap are simple and convenient. Also, align and wordWrap apply to all cells, including headers, while cssClass applies only to the scrollable cells.

The grid below shows the effect of these properties.

Formatting cells

The cssClass property is useful for formatting entire columns. If you have to format specific cells, perhaps based on their content or some other criteria, use the formatItem event instead.

The grid below uses formatItem to add class names to numeric cells so that their style depends on their values.

// This file locates: "Scripts/Lesson/C1FlexGrid/ColumnsStyling.js".
c1.documentReady(function () {
    var cv = c1.getService("collectionView");
    for (var i = 0; i < cv.items.length; i++) {
        cv.items[i].Comment = i % 5 == 0 ? 'This item has a long comment so it will wrap in the cell.' : '';
    }

    // column properties
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.initialize({
        autoGenerateColumns: false,
        columns: [
            { binding: 'Id', header: 'ID', align: 'center', width: 50 },
            { binding: 'Country', header: 'Country', cssClass: 'cell-country' },
            { binding: 'Product', header: 'Product', cssClass: 'cell-product' },
            { binding: 'Comment', header: 'Comment', wordWrap: true, width: 200 },
            { binding: 'Sales', header: 'Sales', format: 'c0', align: 'center' },
            { binding: 'Expenses', header: 'Expenses', format: 'c0', align: 'center' },
        ],
    });

    // call autosizerows to show word-wrapping
    theGrid.autoSizeRows();

    // formatItem event
    var theGridFormatItem = wijmo.Control.getControl('#theGridFormatItem');
    theGridFormatItem.initialize({
        autoGenerateColumns: false,
        columns: [
            { binding: 'Country', header: 'Country' },
            { binding: 'Product', header: 'Product' },
            { binding: 'Sales', header: 'Sales', format: 'c0' },
            { binding: 'Expenses', header: 'Expenses', format: 'c0' },
        ],
        formatItem: function (s, e) {
            if (e.panel == s.cells) {
                var value = e.panel.getCellData(e.row, e.col);
                wijmo.toggleClass(e.cell, 'high-value', wijmo.isNumber(value) && value > 60000);
                wijmo.toggleClass(e.cell, 'low-value', wijmo.isNumber(value) && value < 20000);
            }
        }
    });
});

// This file locates: "Content/css/Lesson/C1FlexGrid/ColumnsStyling.css".
.wj-flexgrid {
  max-height: 250px;
}
.cell-country {
  font-weight: bold
}
.cell-country:not(.wj-state-selected):not(.wj-state-multi-selected) {
  background-color: #bbff00 !important;
}
.cell-product {
  font-weight: bold;
}
.cell-product:not(.wj-state-selected):not(.wj-state-multi-selected) {
  background-color: #ffbb00 !important;
}
.high-value {
  font-weight: bold;
  color: green;
}
.low-value {
  font-style: italic;
  color: red;
}

using System.Web.Mvc;

namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: ColumnsStyling
        public ActionResult ColumnsStyling()
        {
            return View(Models.FlexGridData.GetSales(200));
        }
    }
}

@model IEnumerable<FlexGridData.Sale>

<h1>
    @Html.Raw(Resources.C1FlexGrid.ColumnsStyling_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsStyling_Text1)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexGrid.ColumnsStyling_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.ColumnsStyling_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.ColumnsStyling_Text4)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsStyling_Text5)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsStyling_Text6) 
</p>
@Html.C1().CollectionViewService().Id("collectionView").Bind(Model)
@(Html.C1().FlexGrid().Id("theGrid")
    .ItemsSourceId("collectionView")
    .ShowAlternatingRows(false)
)

<h3>
    @Html.Raw(Resources.C1FlexGrid.ColumnsStyling_Title1)
</h3>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsStyling_Text7)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsStyling_Text8) 
</p>
@(Html.C1().FlexGrid().Id("theGridFormatItem")
    .ItemsSourceId("collectionView")
    .ShowAlternatingRows(false)
)