网格作为显示数据的UI组件，最重要的功能是正确有效绘制数据。 SMART datagrid格使设置在GridStyles对象中的样式属性，适用于构成网格的单元格被渲染的时点。 包含背景颜色和字体颜色，GridStyles具有可以明确表现数据的足够属性。
在网格单元格中适用GridStyles的方法有很多种，而本次例题中，我们将会了解分别为各个列设置样式的最基本的方法。
设置在列中的样式，将会成为包含在列中的数据单元格的默认样式。 当创建各个列时，它将会在内部创建和维持一个GridStyles对象，并使用styles属性而进行访问。 通常，默认样式将会被提前设置在创建列的时点。
var columns = [{
"fieldName": "product_id",
"styles": {
"background": "#3000ff00"
},
...
},
..., {
"fieldName": "unit_price",
"width": "100",
"styles": {
"color": "#880000",
"prefix": "$",
"textAlignment": "far"
}
}];
grid.setColumns(columns);
在上述代码中，已指定background和color颜色属性，并使用textAlignment而指定文本位置。 另外，prefix是指定将要显示在实际值前面的字符串的属性。
除了颜色属性，GridStyles具有可以指定数字型或日期型值的显示格式的属性。 有关GridStyles的属性，请参考GridStyles主题和background等属性的主题。
var columns = [{
"styles": {
"background": "#555",
"color": "#fff",
"numberFormat": "#,##0.00",
"textAlignment": "far"
},
...
},
...,{
"styles": {
"datetimeFormat": "yyyy-MM-dd",
"textAlignment": "center"
}
}];
在上述代码中，正在使用numberFormat和datetimeFormat属性。 我们可以使之分别指定数字型和日期型字段值的格式。
除了在列中提前设置样式值以外，还可以在所需时点，直接变更样式属性。
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));
}