Setting style for datagrid caption

Hi,
I have a datagrid as shown below. I want to make the caption text to bold. How can i make the text to bold in cuba?

 <dataGrid id="EmployeeGrid" caption="Employee Details" width="100%" height="50%" dataContainer="EmployeeDc">
 </dataGrid>

Thanks,
Renuka

Hello,

a quick and dirty solution is to use the “CaptionAsHtml” option:

@Subscribe
public void onInit(InitEvent event) {
     EmployeeGrid.setCaption("<b>Employee Details</b>");
     EmployeeGrid.setCaptionAsHtml(true);
}

Greetings
Andreas

Hi @renuka.venugopal01

To solve your problem, you need to follow several steps:

  1. Create a theme extension (see Extending an Existing Theme - CUBA Platform. Developer’s Manual)
  2. Specify stylename attribute for DataGrid (i.e. data-grid-bold-caption)
  3. Add a selector for the DataGrid caption to the styles.scss file:
.v-caption-data-grid-bold-caption > .v-captiontext {
  font-weight: bold;
}

Regards,
Gleb

1 Like