Customize headers, footer, and data rows of a grid
Customize headers, footer, and data rows of a grid
Technologies > Software Engineering Techniques > Software Engineer Views > Report with Personalized Header, Footer and Data
To customize the header of a grid, override
buildPreHeaderRows
, appending a new row to the
parentElement
object :
grid.buildPreHeaderRows = function(parentElement) {
var headerRow = document.createElement('tr');
... customize row element
parentElement.appendChild(headerRow);
To modify data rows, override
afterCreateDataRows
and iterate over the data row elements.
grid.afterCreateDataRows = function(parentElement, columns) {
var dataRows = Ext.query('tr.dataRow', grid.tableBodyElement);
for (var i=0, row; row = dataRows[i]; i++) {
...
To modify single data cells, override
afterCreateCellContent
:
grid.afterCreateCellContent = function(row, column, cellElement) {
var value = row[column.id];
if (column.id == 'rm.area' && value != '' && value < 100) {
...
cellElement.style.color = 'Blue';
To build a custom footer row to precede the possible 'more records' message footer row, override
buildPreFooterRows
:
grid.buildPreFooterRows = function(parentElement) {
var rowElement = document.createElement('tr');
... customize row element
parentElement.appendChild(rowElement);
JavaScript API Reference/Ab.grid.ReportGrid object
JavaScript API Reference/Ab.grid.ReportGrid object