One issue I had to compare myself with more than once is the amount of information I can see in a DataGrid element of HCL Domino Leap: comparing with Notes Client views, in Domino Leap the space and the amount of information is really smaller.

A good solution can be to reduce the size of the font used and this can be done via CSS.

The fastest method is to add this CSS in the application:

.MuiDataGrid-cell
{
font-size: 90% !important;
}

In this way, however, I use the standard class of Domino Leap. MuiDataGrid-cell and therefore all the DataGrids in the application are modified: it can be an acceptable solution but in some cases I want to modify only one or two DataGrid, not all.

I then have to manage a specific class to change only the data grids to which I associate it: however, in the DataGrid element of Leap it is not possible to assign a CSS class from the properties of the user interface (who knows why…).

So the first step is to go to the events of the DataGrid and to the entry OnShow add this:

apItem.addClasses("grigliapiccola")

With this snippet we associate via Javascript the element (item) DataGrid to an additional CSS class that is called “grigliapiccola”.

Now I can edit the additional CSS of the application by adding:

.lfMn .grigliapiccola .MuiDataGrid-cell
{
font-size: 90% !important;
}

and the game is done.

In this example I only changed the size of the font to 90% of the default but of course I can play with the style to make the changes I need.