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!