154
Views
7
Comments
Solved
[OutSystems Data Grid] How to add column header in an auto generated grid.?
outsystems-data-grid
Reactive icon
Forge asset by OutSystems
Application Type
Reactive
Service Studio Version
11.54.2 (Build 62176)

Hello,

I am using Outsystems data grid, where I am using a structure with more that 50 attributes to bind data with grid. 

In attributes which has properties like Name, Description, Label. I want to set the Name property of the attribute because data grid puts Name property as the column header in an auto generated data grid. 

Auto generated grids takes attribute name as column header, and I cant add spaces in the name tag of attribute.

The grid column header looks like this, without spaces. I don't want to use Outsystems data grid Text columns block, as we have too many attribute defined in the structure, so adding columns for every attribute is not gone help me. Please let me know if there is any other way to add columns header, for the auto generated data grid.

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Keshav Raghav  

To achieve that you should add a formatItem handler to your grid, using the initialize event from the Grid block. 

As a practical example, here's a scenario where I'm setting the header according to the binding, which is what I would advice:


Cheers,
GM

UserImage.jpg
Keshav Raghav

Can we use loop instead of switch case here.? As we have too many columns in our grid, adding switch case will increase no of lines in javascript code. 

2022-11-12 11-28-30
Gonçalo Martins
Staff

This was an example showcasing the functionality. You should implement it according to your use cases and needs.

2023-05-23 04-55-55
Wasimkhan Syed Abuthahir

Hi,

Can you check "WhyColumn" page in Datagrid sample app.

https://wasim.outsystemscloud.com/OutSystemsDataGridSample/WhyColumns

You can rename the column.


Regards,

Wasimkhan S

UserImage.jpg
Keshav Raghav

I think it uses TextColumn block from data grid. I cannot use this block to customize columns, as if we go with this approach, we will end up using too many TextColumn blocks. 

2023-05-23 04-55-55
Wasimkhan Syed Abuthahir

Yes. I think this the way to change the column.

Regards,
Wasimkhan S

2025-11-25 13-20-12
Tamirys Silva Barina

Well, I don't think there's any other way to change the headers apart from changing them manually in the properties or autogenerating them after creating a customised structure with the Headers as you need.

 @Keshav Raghav 


2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Keshav Raghav  

To achieve that you should add a formatItem handler to your grid, using the initialize event from the Grid block. 

As a practical example, here's a scenario where I'm setting the header according to the binding, which is what I would advice:


Cheers,
GM

UserImage.jpg
Keshav Raghav

Can we use loop instead of switch case here.? As we have too many columns in our grid, adding switch case will increase no of lines in javascript code. 

2022-11-12 11-28-30
Gonçalo Martins
Staff

This was an example showcasing the functionality. You should implement it according to your use cases and needs.

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