[Data Grid Reactive] How to add class to column  on initialize
Forge component by Bruno Martinho
Application Type
Reactive

Hi

  when I use datagrid reactive, I want to add class to column on initialize ,but I don't konw how to do it.

   For example ,  I want to set the css style of column data (except header)  when the screen is initialized.

      'Background-Color: yellow' .

    Can you help me ?


Hello @He Caixia, 

Thanks for bringing this subject to the discussion.

At the moment, this functionality is not available. This topic is already being discussed with the team in order to check if it should be a future method of the DataGrid API.

-------------------------------------------------------

Right now, I would suggest the following workaround:

1) Create a new action in the Client Actions folder. Inside, you might want to add the following JavaScript:

> GridAPI.GridManager.GetGridById('Your Grid Id').getColumn('Binding of the column').provider.cssClass = "bgColor";

e.g.  Binding of the column -> "Sample_Product.Description";

      

2) Now all you need to do is to create a new cssClass with that name "bgColor". Check the example:


.bgColor.wj-cell.wj-state-multi-selected.wj-alt,

.bgColor.wj-cell.wj-state-multi-selected,

.bgColor.wj-cell.wj-state-selected.wj-alt,

.bgColor.wj-cell.wj-state-selected,

.bgColor.wj-cell{

  background-color: red;

}


PS: You can also add a cssClass to specific rows. Check the documentation here - API.Style.AddClass


Hope this answer is useful.

Best regards,

Tiago Pereira

Your answer solved my problem.

Thanks very much.

Hi,

You can overwrite the default CSS classes that you need by your application theme. For example, if you use this:

You'll get this:

Kind regards, David.

Hello @He Caixia, 

Thanks for bringing this subject to the discussion.

At the moment, this functionality is not available. This topic is already being discussed with the team in order to check if it should be a future method of the DataGrid API.

-------------------------------------------------------

Right now, I would suggest the following workaround:

1) Create a new action in the Client Actions folder. Inside, you might want to add the following JavaScript:

> GridAPI.GridManager.GetGridById('Your Grid Id').getColumn('Binding of the column').provider.cssClass = "bgColor";

e.g.  Binding of the column -> "Sample_Product.Description";

      

2) Now all you need to do is to create a new cssClass with that name "bgColor". Check the example:


.bgColor.wj-cell.wj-state-multi-selected.wj-alt,

.bgColor.wj-cell.wj-state-multi-selected,

.bgColor.wj-cell.wj-state-selected.wj-alt,

.bgColor.wj-cell.wj-state-selected,

.bgColor.wj-cell{

  background-color: red;

}


PS: You can also add a cssClass to specific rows. Check the documentation here - API.Style.AddClass


Hope this answer is useful.

Best regards,

Tiago Pereira

Your answer solved my problem.

Thanks very much.

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