Data Grid - Header and Footer Row Controls

This example uses the following new commands for Data Grid 2.0. The new Data Grid gives the developer the ability to add headers as well as footers within the grid. Importantly, all rows in the grid can display wrapped text which provides more flexibility with text data.

var myDataGrid = new dax_dataGrid(selection, location, headerRows, lockedLeftColumns, useControlColumn);

This command is called during the onAfterInit() function to create the grid. The headerRows parameter specifies how many header rows will be displayed. This example displays two header rows.

myDataGrid.setFooterRows(number of footer rows);

This command sets the number of footer rows to be displayed. This example has 1 footer row.

myDataGrid.setHeaderHeight(row number, height in units);

This command sets the height for the header rows. Please note that header row number starts at 0. In addition it allows wrapped text data to be displayed within the header. A height of 3 was used for this example to accommodate three lines of text data.

NOTE: In order to wrap the text, a css call is needed. The file demotoolbar.css provides this call.

myDataGrid.setFooterHeight(row number, height in units);

This command sets the height for the footer rows. Please note that footer row number starts at 0. In addition, it allows wrapped text data to be displayed within the footer.

var realRowNumber = myDataGrid.getFooterRowNumber(footerRowNumber);

This command gets the footer row number. For instance, to get the first footer row reference, pass 0 for the footerRowNumber parameter. The function will return the row number in relation to the whole grid. Thus, the result can be used in the following command below.

myDataGrid.setCellValue (row, col, content);

After setting the row heights, the rows can be now be filled with content or data. In this example, multi-line text data is entered into the header rows. In addition, when referencing columns please note that they use the same principle as rows, the column references also start at 0 and not 1.

The event onBeforeDataDisplay also used to allow custom values to be placed into the footer area of each column.

  myDataGrid.onBeforeDataDisplay = function() {
    var custValue = this.getCustomValuesFrom4D();
    var len = custValue.length;
    for (var i=0;i>len;i++) {
      this.setCellValue (realRowNumber, i+1, 'Total of<br>' + custValue[i].value);
    }
  };