Currently I need to make my datagrid table all transparent, but I find out it kinda hard to custom, anyone know somehow to make all the table background transparent> Include Header and the Hambuger column 1 2 3 4 5.....
And I also want to hiden the scrollbar but I dont know how to.....
Hello @Le Duc Huy
To do that you can do something like adding the following overrides to your theme:
.wj-control:not(.ctx-menu):not(.wj-columnfiltereditor):not(.column-picker) { background: transparent; } .wj-cell.wj-header { background: transparent; } .wj-flexgrid .wj-rowheaders .wj-header.wj-state-multi-selected { background: transparent; } .wj-cell { background: transparent; } .wj-flexgrid .wj-colheaders .wj-header.wj-state-multi-selected { background: transparent;} .wj-cells .wj-cell[aria-selected='true']:not(.wj-state-multi-selected) { background: transparent; } .wj-cell.wj-state-invalid.wj-header.wj-alt:not(.wj-state-multi-selected), .wj-cell.wj-state-invalid.wj-header.wj-header-alt:not(.wj-state-multi-selected), .wj-cell.wj-alt { background: transparent;} .wj-bottomleft .wj-cell.wj-header, .wj-colfooters .wj-cell.wj-header { background: transparent; } .wj-cells .wj-cell.wj-state-multi-selected { background: transparent;}
For the specific scenario of the scroll, add also a custom class:
.wj-custom-background { overflow-y: hidden !important;}
and on the initialize event of the Grid add that class to the HTML element with wj-part="root":
wj-part="root":
Hope it helps!
Cheers,GM
Oh, this is exactly what I want, you really save my day!Erm... but could I ask u one more? Currenttly this is my table
I did transparent it on purpose to make a light/dark theme easier+ Can U make the pagination also transparent?+ On the dark theme I also need to change the font color to white so I can see it, and also the border of all cell to white tooCan u save me one last time, my hero?
Hi @Le Duc Huy
For all these customizations in terms of CSS, you can use the Chrome Dev Tools to inspect the elements like this:
For your scenario for instance you can do something like (and adapt to your style)
.datagrid-pagination-selected-page { background: transparent; border: none; color: red; } .datagrid-pagination-button { background: transparent; border: none; color: red; }