[OutSystems Data Grid] How to group grid headers using JavaScript

Back to Forums

Doyoung Choi

Solved

Question

DataGrid

Forge

I want to group grid headers using JavaScript as shown in the image below.

I used GetViewLayout and SetViewLayout to view and apply the existing grouping JSON, but the grouping does not work the same. (e.g. "groupColumns":[{"header":"Id"},{"header":"Price"},{"header":"Test","isCollapsed":false,"collapseTo":"","align":"center","children":[[{"header":"Name"},{"header":"Stock"}]]}]) .

It seems that SetViewLayout can only change the order of existing headers. It does not allow deletion.

Is it not possible to do grouping using SetViewLayout? Or is there another way to group headers through JavaScript?

I would appreciate it if you could tell me a good way.

13 Oct 2025

Mihai Melencu

Champion

Solution

Hi @Doyoung Choi ,

SetViewLayout only applies layout to existing columns, I think, and it can’t add new column groups. Use the JS below to group specific columns instead:

var g = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider;
g.showColumnGroups = true;
var cStock= g.getColumn('Your_Binding');
var cName = g.getColumn('Your_Binding ');
var groups = [];
for (var i = 0; i < g.columns.length; i++) {
var c = g.columns[i];
if (c === cStock) {
groups.push({
header: 'Test',
align: 'center',
isCollapsed: false,
collapseTo: '',
columns: [cStock, cName].filter(Boolean)
});
if (cName && g.columns[i + 1] === cName) i++;
continue;
}
if (c === cName) continue;
groups.push({ header: null, columns: [c] });
}
g.columnGroups = groups;

_________

Make sure to replace the bindings with your actual bindings.

13 Oct 2025

2 replies

Last reply 14 Oct 2025

Show thread

Hide thread

Jamal Mohammed

Great ! this should work for sure

13 Oct 2025

Doyoung Choi

@Mihai Melencu,
Oh, thank you very much. I’ll try it this way.

14 Oct 2025

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines