The grid is a UI component which displays the data, so its most important function should be to draw the data accurately and effectively. SMART datagrid enables the style properties set in GridStyles object be applied in the renderering point of the cells. Including the background and text colors, GridStyles have enough properties to show the data sensibly.
There are many ways to apply GridStyles in the grid cell, and in this example, we will learn the most basic way to set the styles by each Column.
The styles set in the column will become the default styles of the data cells contained in the column. When it is created, each column creates and maintains one GridStyles object internally, and enables to approach it through styles property. Usually, the default styles will be preset when the column is created.
var columns = [{
"fieldName": "product_id",
"styles": {
"background": "#3000ff00"
},
...
},
..., {
"fieldName": "unit_price",
"width": "100",
"styles": {
"color": "#880000",
"prefix": "$",
"textAlignment": "far"
}
}];
grid.setColumns(columns);
In the code above, it specifies background and color properties, and also the text location through textAlignment. In addition, prefix is the property which specifies the string to be displayed in front of the actual value.
Besides the color properties, GridStyles have the property which can specify the display format of the numeric or date type values. Please refer to GridStyles and background topics about the properties of GridStyles.
var columns = [{
"styles": {
"background": "#555",
"color": "#fff",
"numberFormat": "#,##0.00",
"textAlignment": "far"
},
...
},
...,{
"styles": {
"datetimeFormat": "yyyy-MM-dd",
"textAlignment": "center"
}
}];
In the code above, it uses numberFormat and datetimeFormat properties. It enables to specify the display format of numeric and date type field values separately.
Besides presetting the style values in the column, you can also directly change the style properties if needed.
btnFontLarger_click: function (ev) {
var column = grdMain.focusedIndex().column;
var size = column.styles().fontSize();
column.styles().setFontSize(Math.min(20, size + 1));
},
btnFontSmaller_click: function (ev) {
var column = grdMain.focusedIndex().column;
var size = column.styles().fontSize();
column.styles().setFontSize(Math.max(5, size - 1));
}