Styling a specific GridPanel in codebehind

[bbros]

Hello,
spotless theme is very nice but when a grid counts several records only few are shown, because the padding of .x-grid-cell-inner class.

In my project, grids are renderend fully in code behind, and just few of those needs a change of that class.
I really don't know how to handle this.

I created a custom css class which is avaliable in page.



.extreme-mini-grid {
padding: 2px 6px !important;
font-size: 12px !important;
}

I would like to override .x-grid-cell-inner's padding and .x-grid-item's font-size.

Setting in the .cs file the following line nothing changes:

grid.BodyCls = "extreme-mini-grid";

how can I do?

thank you!

[bbros]

I think I found a solution running outside the codebehind.

I create new css with this code inside

#mySpecificGridId .x-grid-cell-inner {
padding: 2px 6px;
}


then I added this line in cs.html file

@page "{handler?}"
@model BBros.ExtCookbook.Pages.IndexModel
@{
}
<link rel="stylesheet" href="~/resources/css/myNewCss.css" />
<ext-section target="Main">
</ext-section>

and set the grid id to mySpecificGridId

If you want you can close this thread marking as solved, anyway if there is a better way to achieve this goal, let me know!
Thanks!

[fabricio.murta]

Hello @bbros!

Well, your solution works, if it works for you!

The grid.BodyCls (https://docs.sencha.com/extjs/7.3.1/classic/Ext.grid.Panel.html#cfg-bodyCls) setting is there, it should work for what it's intended to (or further css tweaking should be necessary). But as per your description, perhaps you need to style the view instead. The grid cells are down in the grid's view rather than just the grid's body. So perhaps if you want with view CSS customizing, you'd get what you needed.

Hope this helps!