How to set height of row in ASP.NET Core Telerik grid?

Question

I have grid that contains cell with multiple line string or when the string is too long it stretches whole row height.

@(
Html.Kendo().Grid<GuideViewModel>()
    .Name("gridGuides")
    .ToolBar(t => t.Search()) // Enable the Search panel
        .ToolBar(e =>
     {
         e.Custom().Text("Vytvořit nové").IconClass("k-i-plus").HtmlAttributes(new { id = "guideCreateButton", @class = "k-button k-button-md k-rounded-md k-button-solid-primary" });
     })
    .Search(s =>
    {
        s.Field(c => c.Name);
        s.Field(c => c.Cause);
        s.Field(c => c.Solution);
        s.Field(c => c.Comment);
    })
    .Columns(columns =>
    {
        columns.Command(command =>
        {
            command.Custom("Details").Click("detailsClickGuides").Text("Detaily").HtmlAttributes(new { @class = "k-button k-button-md k-rounded-md k-button-solid-primary hide-text-button" }).IconClass("k-icon k-i-info-circle");
            command.Custom("Edit").Click("editClickGuides").Text("Editovat").HtmlAttributes(new { @class = "k-button k-button-md k-rounded-md k-button-solid hide-text-button" }).IconClass("k-icon k-i-pencil");
            command.Custom("Delete").Click("deleteClickGuides").Text("Smazat").HtmlAttributes(new { @class = "k-button k-button-md k-rounded-md k-button-solid hide-text-button" }).IconClass("k-icon k-i-trash");
        }).Title("Actions").Width(180);
        columns.Bound(model => model.Name).Width(180)@*.ClientTemplate("#=template(data)#")*@;
        columns.Bound(model => model.Cause).Width(180).Encoded(false);
        columns.Bound(model => model.Solution).Width(180).Encoded(false);
        columns.Bound(model => model.Comment).Width(180);
        columns.Bound(model => model.IsActive).Width(180);
    })
    .Sortable()
    .Scrollable(s => s.Height("auto"))
    .HtmlAttributes(new { style = "min-height: 200px;" })
    .Filterable(ftb => ftb.Extra(false).Operators(op => op.ForString(str => str.Clear().Contains("Contains"))))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Filter(filter => filter.Add(a => a.IsActive).IsEqualTo(true))
        .Read(read => read.Action("GuidesRead", "Guides", new { companyId = optionalIDCompany, branchId = optionalIDBranch })) // Replace with your actual action and controller names for fetching data
    )
)

I would like the rows in the Telerik Grid to always maintain a consistent height, regardless of the content they contain. In cases where the content exceeds the row height, I want the overflowing part to be hidden.

Do you try this ? like: <style> div.k-grid tbody tr{ height: 40px; } </style> — Qing Guo
– Qing Guo, Commented Aug 28, 2023 at 3:09
Yes, I tried that and it sets height correctly. But if content is larger it stretches. — Zokinko
– Zokinko, Commented Aug 28, 2023 at 9:15

Andi · Accepted Answer · 2023-08-25 16:36:03Z

0

Table cells and rows always expand vertically if their contents cannot fit and this is a standard browser behavior, which cannot be overridden by CSS styles.. ,you can wrap the cell content in <div>s with a predefined height and overflow:hidden style source

answered Aug 25, 2023 at 16:36

Andi

514 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to set height of row in ASP.NET Core Telerik grid?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related