Row Styling
By default, the grid adds a 'wj-alt' class to every other row, and the 'wijmo.css' file uses this class to style alternating rows. You can disable this using some custom CSS, but it is often easier just to set the grid's showAlternatingRows property to false if you don't want alternating row styles applied at all.
FlexGrid re-generates rows whenever the data source refreshes, which happens when the data is sorted, filtered, grouped, or edited. Because of this, you should not expect row properties to retain their values in most cases.
If you do want to apply custom styles to rows, you should do this when handling the loadedRows event, which fires whenever the grid re-generates the rows.
The row properties that affect styling are:
- cssClass: Specifies a class name to be added to cells in this row. The class name can be used in CSS rules to modify the style of cells in this row.
- height: Specifies height of the row in pixels.
The grid below shows the effect of the grid's showAlternatingRows and the row's cssClass properties.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | // This file locates: "Scripts/Lesson/C1FlexGrid/RowsStyling.js". c1.documentReady(function () { var theGrid = wijmo.Control.getControl( '#theGrid' ); applyRowsStyle(); theGrid.loadedRows.addHandler(function (s, e) { applyRowsStyle(); }); function applyRowsStyle() { // apply cssClass to rows after loading them for (var i = 0; i < theGrid.rows.length; i++) { var row = theGrid.rows[i]; var item = row.dataItem; if (item.Sales > 60000) { row.cssClass = 'high-value' ; } else if (item.Sales < 10000) { row.cssClass = 'low-value' ; } } } // toggle showAlternatingRows document.getElementById( 'showAlternatingRows' ).addEventListener( 'click' , function (e) { theGrid.showAlternatingRows = e.target. checked ; }) }); |
1 2 3 4 5 6 7 8 9 10 11 12 | // This file locates: "Content/css/Lesson/C1FlexGrid/RowsStyling.css". .wj-flexgrid { max-height: 250px; } .wj-cell.high-value { font-weight: bold; color: green; } .wj-cell.low-value { font-style: italic; color: red; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexGridController : Controller { // GET: RowsStyling public ActionResult RowsStyling() { return View(Models.FlexGridData.GetSales(200)); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | @model IEnumerable< FlexGridData.Sale > < h1 > @Html .Raw(Resources.C1FlexGrid.RowsStyling_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexGrid.RowsStyling_Text1) </ p > < p > @Html .Raw(Resources.C1FlexGrid.RowsStyling_Text2) </ p > < p > @Html .Raw(Resources.C1FlexGrid.RowsStyling_Text3) </ p > < p > @Html .Raw(Resources.C1FlexGrid.RowsStyling_Text4) </ p > < ul > < li > @Html .Raw(Resources.C1FlexGrid.RowsStyling_Text5) </ li > < li > @Html .Raw(Resources.C1FlexGrid.RowsStyling_Text6) </ li > </ ul > < p > @Html .Raw(Resources.C1FlexGrid.RowsStyling_Text7) </ p > < label > @Html .Raw(Resources.C1FlexGrid.RowsStyling_Text8) < input id = "showAlternatingRows" type = "checkbox" checked = "true" > </ label > @ (Html.C1().FlexGrid().Id( "theGrid" ).Bind(Model) .AutoGenerateColumns( false ) .Columns(cs=> { cs.Add().Binding( "Id" ).Header( "ID" ).Width( "50" ); cs.Add().Binding( "Country" ).Header( "Country" ); cs.Add().Binding( "Product" ).Header( "Product" ); cs.Add().Binding( "Sales" ).Header( "Sales" ).Format( "c0" ); cs.Add().Binding( "Expenses" ).Header( "Expenses" ).Format( "c0" ); }) ) |