Styling the MVC Grid

Environment

Product	ThemeBuilder
Product Version	All versions of ThemeBuilder
3rd-party framework	Telerik UI for ASP.NET MVC
Components	Grid Layout

Description

I am using Telerik UI for MVC and trying to style a Grid layout with ThemeBuilder. The generated styles do not apply correctly. What causes the issue, and how to resolve it?

Solution

Telerik UI for ASP.NET MVC supports and renders various Grid layout modes. Currently, ThemeBuilder supports only a Grid layout created with the scrollable mode. Non-scrollable grids are unsupported, and ThemeBuilder-generated styles may apply incorrectly.

The following example represents a Telerik UI for ASP.NET MVC Grid layout rendered without the Scrollable mode.

@(Html.Kendo().Grid<MyViewModel>()
    .Name("grid")
)

To successfully apply the ThemeBuilder styles, add the Scrollable mode:

@(Html.Kendo().Grid<MyViewModel>()
    .Name("grid")
    .Scrollable() // Enables the Scrollable mode.
)