Custom Column Headers w/ Custom Function

Apliqo UX
1

Hi all, looking for some help in getting started using custom functions in Apliqo. I’m trying to create a simple example of modifying the column headers (see below). Thank you in advance for any advice!

We have the Adv Option below to help trigger the function:

"table": {
    "columnHeaderUpdate": "columnHeaderUpdate_2"
  }

We will define this function in “custom-functions-service.js” which follows an existing example but simplifies it to statically set the column headers:

columnHeaderUpdate_2(grid) {
        let hotTable = grid.hotRegisterer.getInstance(grid.key + '-tableInstance');
        CustomFunctions.self.$timeout(() => {
            grid.myColHeaders = ['A','B'];
        }, 1000).then(() => {
            hotTable.updateSettings({ colHeaders: grid.modColHeaders });
        })
    }

The view is a simple two-dimensional table:

image
image862×474 48.9 KB

In this example I would expect the two column headers to be replaced with “A” and “B” after invoking the HOT “updateSettings”. I don’t see any related error messages in the console but the column headers don’t change. Not sure if I’m missing anything obvious here… Thanks again!

2

A few things have changed over the last years in regards to column headers. The old logic of updating the colHeaders will no longer work. We are using nestedHeaders now. Logic similar to the following should now work.

    customColumnHeaderUpdate(grid) {
        grid.modColHeaders = [];
        grid.modColHeaders[0] = [];
        let col = 0;
        grid.mergedHeaders[0].forEach((item, index) => {
            grid.modColHeaders[0][col] = ""
            col = index + grid.numberRowFields;
            if (index < grid.numberRowFields) {
                grid.modColHeaders[0][index] = grid.getRowHeader(grid.tables[0].headers[0].rows[index].dimension);
            }
            if (grid.displayAttributeColumn) {  // for grid widget.
                grid.modColHeaders[0][index] = (item.element.attributes[grid.displayAttributeColumn]) ? item.element.attributes[grid.displayAttributeColumn] : item.name
            }
            else if ((item.element == undefined) || (item.subViewColumn == undefined)) {
                grid.modColHeaders[0][index] = item.name;
            } else {
                grid.modColHeaders[0][index] = (item.element.attributes[item.subViewColumn.Attribute]) ? item.element.attributes[item.subViewColumn.Attribute] : item.name;
            }
            grid.modColHeaders[0][index] += ' ' + col;
        });
        grid.customColHeaders = grid.modColHeaders;
    }

The best thing to do is set grid.customColHeaders and this will be automatically picked up.

The alternative would be to call hotTable.updateSettings on nestedHeaders (rather than colHeaders) based on a modified clone of the grid.hotNestedHeaders object. If doing this though you would need to include a delay of greater than 1 second.

1 Like