399
Views
3
Comments
Solved
[OutSystems Data Grid] Add CSS class to a DataGrid
outsystems-data-grid
Reactive icon
Forge asset by OutSystems
Application Type
Reactive
Service Studio Version
11.54.17 (Build 62610)

Hi,

Is there any way to apply a CSS class to a DataGrid? I haven't found an ExtendedClass property for the component or the columns.

In particular I need to:

- apply a CSS class to all the text in the DataGrid (I tought to apply the class to a container and put the Grid in it, but it will be better if it can be done directly on the Grid)
- apply another CSS class only to a specific column (i know there is ConditionalFormat, but I don't have conditions on which to apply the class)


Thank you.

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Raffaele,

One approach to implementing your use case is as follows: 

1) To apply a CSS style to all the text in the DataGrid (excluding col header text):

CSS:

.wj-cells .wj-cell {
  color: red;
}

2)  To apply a CSS class to a specific column:

  • Define a custom style class.
  • Use JavaScript in the Grid OnInitialize event handler flow - to apply the custom style class to a specific column by index.
//CSS Class:
.wj-col-bgcolor {
  background: yellow !important;
}


//JS
var gridProvider = GridAPI.GridManager.GetGridById($parameters.GridWidgetId)._provider;
gridProvider._cols[0].cssClass = "wj-col-bgcolor";


Alternative approach: https://www.outsystems.com/forums/discussion/70022/how-to-add-class-to-column-on-initialize/#Post282548

I hope this helps you!


Kind regards,

Benjith Sam

2025-07-09 07-52-36
Raffaele Battipaglia

Thank you for the fast response, it works.

2021-03-18 21-03-15
Benjith Sam
 
MVP

You're welcome, Raffaele. I'm glad it helped you :)


Kind regards,

Benjith Sam

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