Una situazione con cui mi sono dovuto confrontare più di una volta è la quantità di informazioni che posso visualizzare in un elemento DataGrid di HCL Domino Leap: abituato a lavorare con le viste di Notes in Leap lo spazio e la quantità di informazioni è decisamente minore.
Una buona soluzione può essere ridurre la grandezza del font utilizzato e questo può essere fatto via CSS.

Il metodo più veloce è aggiungere questo CSS nell’applicazione:

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

In questo modo però utilizzo la classe standarda di Domino Leap .MuiDataGrid-cell e quindi tutte le DataGrid nell’applicazione vengono modificate: può essere una soluzione accettabile ma in alcuni casi voglio modificare solo una o due DataGrid, non tutte.

Devo allora gestire una classe apposita per modificare solo le data grid a cui la associo: però nell’elemento DataGrid di Leap non è possibile assegnare una classe CSS dalle proprietà dell’interfaccia utente( chissà perchè)

Quindi il primo passo è andare negli eventi della DataGrid ed alla voce OnShow aggiungere questo:

apItem.addClasses("grigliapiccola")

con questa istruzione all’elemento (item) DataGrid viene associata via codice Javascript una classe CSS aggiuntiva che si chiama “grigliapiccola”.

Ora posso modificare il CSS aggiuntivo dell’applicazione aggiungendo:

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

ed il gioco è fatto.

In questo esempio ho modificato solo la grandezza del carattere portandola al 90% del default ma ovviamente posso giocare con lo stile per apportare le modifiche che mi servono.