When using a different theme, the Grid Size property has no impact?

[Rob]

In my _Host.cshtml:

<link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-material/all.css?@telerikUiForBlazorVersion" rel="stylesheet" />

In my page code:

    <TelerikGrid TItem="@BookingModel"
                 @ref="@BookingGridRef"
                 Height="225px"
                 Resizable="false"
                 FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu"
                 SelectionMode="GridSelectionMode.Single"
                 SelectedItems="@SelectedBookings"
                 OnRowClick="@OnBookingRowClick"
                 OnRowDoubleClick="@OnBookingRowDoubleClick"
                 OnRead="@OnBookingGridRead"
                 Sortable="true"
                 Reorderable="true"
                 Pageable="true"
                 @bind-Page="@CurrentBookingGridPage"
                 EnableLoaderContainer="false"
                 Size="@ThemeConstants.Grid.Size.Small"
                 PageSize="25">

Setting the Size has no impact on the UI (Small, or Medium, or Large) renders the same.

In addition, setting RowHeight to a value has no impact on the UI:

<TelerikGrid TItem="@BookingModel"
             @ref="@BookingGridRef"
             Height="225px"
             Resizable="false"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu"
             SelectionMode="GridSelectionMode.Single"
             SelectedItems="@SelectedBookings"
             OnRowClick="@OnBookingRowClick"
             OnRowDoubleClick="@OnBookingRowDoubleClick"
             OnRead="@OnBookingGridRead"
             Sortable="true"
             Reorderable="true"
             Pageable="true"
             @bind-Page="@CurrentBookingGridPage"
             EnableLoaderContainer="false"
             RowHeight="(decimal)12.5"
             PageSize="25">

It doesn't seem to matter what Theme I use in the _Host.cshtml file, RowHeight and Size are completely ignored?

Ultimately what I would like is to augment and Telerik theme with just a few changes, but I can't see any way to achieve this without going down the entire custom theme route, which I really don't have time for.

Rob.

[Dimo]

Hi Rob,

The Grid Sizing demo works as expected with the Material theme. You can switch the theme from the chooser above the Grid on the right side. Compare the styles in the DOM inspector with the ones in your app. Perhaps you have some custom styles that override the theme.

On the other hand, a RowHeight value of 12.5 is too small to work unless you make other CSS changes like reducing the cell paddings and font size.

Regards,
Dimo
Progress Telerik

[Rob]

Hi Dimo,

I can achieve (sorta) my results with custom Style/CSS code in sites.css:

.custom-compact-row-grid .k-grid-header .k-table-th,
.custom-compact-row-grid .k-grid-content .k-table-td {
    padding: 2px;
}

and reference class for grid:

<div >
    <TelerikGrid TItem="@BookingModel"
                 @ref="@BookingGridRef"
                 Height="calc(20vh + 2rem)"
                 Class="custom-compact-row-grid"

However, if the grid has GridCommandButton the size of the button will override (as it should) so the "Size" property doesn't automatically adjust the size of the buttons so the row height remains unchanged.

What I was hoping I could do is simply adjust the theme's grid padding by using:

.k-grid-header .k-table-th,
.k-grid-content .k-table-td {
    padding: 2px;
}

which would then apply across my entire web app.  However, this doesn't work (hence my path on looking into ThemeBuilder per my other post).

As a result, I have to setup a class for the CommandButton used in the Grids.

However, a more pressing issue is that I can NOT set a minHeight or maxHeight for the Telerik Grid.  If I try to set minHeight and maxHeight in a css class the grid will always use maxHeight. 

Alternatively, I can setup a Div to manage the space where the grid resides, but that isn't what my users want as it really just scrolls the area within the Div even if the Div sizes correctly. 

<div style="max-height: 375px; min-height: 225px; overflow: auto;">

However, what seems to work better (as in applies to the grid content area is using calc and vh:

<div >
    <TelerikGrid TItem="@BookingModel"
                 @ref="@BookingGridRef"
                 Height="calc(20vh + 2rem)"
                 Class="custom-compact-row-grid"

This is still not "perfect" as it doesn't limit how much the grid content can shrink.  If you have any alternatives that can set a minHeight for grid content, please let me know.

 

[Dimo]

Hi Rob,

Size parameter values are not inherited by child components, although it can make sense. To apply CSS customizations to all components in the app, you have two options:

• Use CSS code that doesn't rely on custom CSS classes. Increase the specificity enough, so that your CSS rules override ours in the theme.
• Override the CSS variables in the theme, which are related to spacing. Here is an extreme example, which illustrates the idea: https://blazorrepl.telerik.com/mpPEGyki22myW4SK16

>> If I try to set minHeight and maxHeight in a css class the grid will always use maxHeight. 

If the Grid has no fixed Height, it will shrink and expand according to the number of its data rows. In your case, I assume it "always" uses the max-height, because otherwise it will be taller. Here is a KB article that shows how to make the Grid fill a specific container or the whole viewport.