[Data Grid] Using Auto Generate Columns and Nothing More?

Forge Component
Published on 3 Aug (2 days ago) by OutSystems R&D
38 votes
Published on 3 Aug (2 days ago) by OutSystems R&D


I have realized that when using an autogenerate Columns from JSON you cant use any other functionality as group header, or some button in any of the columns.

Since it is a javascript component would nice to have in the json certain fields to implement that.

There are any current way  which let us do some thing similar?

Hi Raphael,

Currently, it's not possible to do that. Nevertheless, I'm a little intrigued as to what you're trying to achieve. Can you please explain a little better, or provide an example?


Ricardo Alves

Hi Ricardo,

What I was trying to achieve is to make a grid with a dynamic number of columns, and for that I was using an advanced SQL query returning the data in JSON format. 

However I wanted to group some columns with a similar attribute in a group header format.

Once I was using AutoGenerateColumns for json, I could not use the functionalities of group the columns, since I hadn't columns in the service studio preview to group, this way I realized that if using the autogenerated columns I couldn't use any of the components indeed.

I already solved the problem in my own way, but would like to know if there were any way to make it just with the default functionalities.

Another functionality that I needed to use from this grid, but wasn't componentized, was Aggregates in the footer of the grid.


In the original JS they have an attribute in column class named Aggregate, that can be used as SUM (To give sum), AVG (To give avarage), and other options....  in the footer of each column in the grid

see here: https://www.grapecity.com/wijmo/api/enums/wijmo.aggregate.html

In order to use that I had to add an GroupRow() via JS, it could be easily componentized also, I used the advanced options of column to achive that, but if you put an extra param in web block named aggregate you could add this feature by default.

Using this code it will add an extra row in footer that will automaticaly be setted with the aggregate that you chose for that column:

      // add an extra 'grand aggregate' row below the data

    var gridAux = GridOS.GridObject[0].grid;

    var aggregateRow = new wijmo.grid.GroupRow();

    gridAux.columnFooters.rows.push(aggregateRow);     // append aggregate row to grid now and when the rows are loaded

    gridAux.bottomLeftCells.setCellData(0, 0, '\u03A3'); // Set the icon of the column with an E of SUM ;) bonus

However you can only have one aggregate for each column, and in my user case I had to have 2. Both SUM and AVG.

I could achieve it with some custom code:

SyntaxEditor Code Snippet

$(document).ready(function() {

gridAux = GridOS.GridObject[0].grid;

    // add an extra 'grand aggregate' row below the data
    //gridAux = GridOS.GridObject[0].grid;

    aggregateRowSum = new wijmo.grid.GroupRow();
    aggregateRowAvg = new wijmo.grid.GroupRow();

    aggregateRowSum.cssClass = 'wj-aggregate-row';
    aggregateRowAvg.cssClass = 'wj-aggregate-row';

    // append aggregate row to grid now and when the rows are loaded

    // update totals now and whenever the data changes




and in Page JS's, something like 

SyntaxEditor Code Snippet

    var gridAux;

    var aggregateRowSum;
    var aggregateRowAvg ;

    function updateAggregateRow() {

        if (aggregateRowSum && aggregateRowAvg) {
            for (var i = 0; i < gridAux.columns.length; i++) {
                var col = gridAux.columns[i];

                    if (col.binding ) {

                        var value = wijmo.getAggregate(1, gridAux.collectionView.items, col.binding)
                        // 1 is the code for Sum in aggregate function
                        // https://www.grapecity.com/wijmo/api/enums/wijmo.aggregate.html
                        gridAux.bottomLeftCells.setCellData(0, 0, '\u03A3');
                        gridAux.columnFooters.setCellData(aggregateRowSum.index, col.index, value, false);

                    if (col.binding) {
                        var value2 = wijmo.getAggregate(3, gridAux.collectionView.items, col.binding)
                        // 3 is the code for Avg in aggregate function
                        // https://www.grapecity.com/wijmo/api/enums/wijmo.aggregate.html
                        gridAux.bottomLeftCells.setCellData(1, 0, 'AVG');
                        gridAux.columnFooters.setCellData(aggregateRowAvg.index, col.index, value2, false);

If the component'd team see this post, think about it.

It would improve the value of the component... a lot imo.