[Solved] UI for Asp.Net Core Responsive form not setting correct CSS classes

[Thomas]

I am using Telerik.UI.for.AspNet.Core (2026.1.212) in a C# net9 application. I am running into issues attempting to create a responsive Form layout for my Form component in the UI for ASP.NET Core library.

My form is being built like:

Html.Kendo().Form<MyFormModel>()
    .Name("MyFormName")
    .FormData(Model.Model)
    .HtmlAttributes(new {@method = "POST" })
    .Layout("grid")        
    .Grid(g => 
        g.Cols(c =>
        {
            c.Add().MaxWidth(1680).Value(6);
            c.Add().MinWidth(1681).Value(12);
        }               
        )
    )
    .Validatable(v =>
    {
        v.ValidateOnBlur(true);
        v.ValidationSummary(true);
        v.ErrorTemplate("<span style='color:red;'>Fill in #=data.field#</span>");
    })
    .Items(i => 
    { 
        //=======================================//= REQUEST INFORMATION                 = //=======================================
        i.AddGroup().Label("Request Information").ColSpan(6).Layout("grid")
        .Grid(g =>        
            g.Cols(c =>
            {
                c.Add().MaxWidth(500).Value(1);
                c.Add().MinWidth(501).Value(12);

            })
        )
        .Items(gi =>
        {
            //Group Items
        });


        //=======================================//= Request/Date Information            =//=======================================
        i.AddGroup()
        .ColSpan(6)
        .Label("Request and Date Information")
        .Layout("grid")
        .Grid(g =>
        {
            g.Cols(c =>
            {
                c.Add().MaxWidth(500).Value(1);
                c.Add().MinWidth(501).Value(2);
            });
        })
        .Items(gi =>
        {
            //Group Items       
        });
})
)                        
        

The image attached shows that the responsive column rules are being converted into css classes like "k-gap-x-[object Object]" instead of "k-grid-cols-12" or "k-grid-cols-6". This behavior happens on the main form and each group within the form. I've also attempted to try setting a column gutter but that also does not convert to a css class properly. I have referenced the documentation and demo page https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/layout/form/responsive and https://demos.telerik.com/aspnet-core/form/responsive-form but the behavior on the demo side does not seem to align with the behavior in my application.

Any insight or thoughts are appreciated!

[Eyup]

Hello Thomas,

 

Thank you for reaching out.

This issue arises because the Form component's grid configuration does not support responsive column rules using objects or breakpoint-based logic (such as MaxWidth and MinWidth). Instead, it expects static integer values for columns and gutter. When objects are passed, the builder cannot serialize them into valid CSS classes, resulting in outputs like k-gap-x-[object Object].

Supported Grid Configuration

• The Cols() and Gutter() methods only accept direct integer values (e.g., .Cols(6).Gutter(16)):
  https://demos.telerik.com/aspnet-mvc/form/layout 
  
• Responsive layouts are handled by adjusting the item or group width with the ColSpan() method, not by setting breakpoints in the grid configuration.

• The official demos use static column counts and col spans. There is no built-in support for dynamic column counts based on screen size in the Form's API.
• The demos you referenced use code like:

  .Grid(g => g.Cols(2).Gutter(16))
  

  and manage responsiveness by setting ColSpan() on items/groups.

Workarounds for Responsive Layouts

• ColSpan: Use ColSpan() to control how many columns an item/group spans. This helps with layout on different screen sizes.
• Custom CSS: For more advanced responsiveness, supplement with your own CSS media queries to adjust layout as needed.
• InputHtmlAttributes: You can apply custom CSS classes to individual items using InputHtmlAttributes() for fine-tuned styling.

Example:

Html.Kendo().Form<MyFormModel>()
    .Name("MyFormName")
    .Layout("grid")
    .Grid(g => g.Cols(6).Gutter(16))
    .Items(i => {
        i.AddGroup().Label("Request Information").ColSpan(3).Items(gi => {
            // Group Items
        });
        i.AddGroup().Label("Request and Date Information").ColSpan(3).Items(gi => {
            // Group Items
        });
    })

I hope this helps. Please keep me updated on the result.

 

Regards,
Eyup
Progress Telerik