如何在 ASP.NET Core Telerik 网格中设置行高?

问题描述 投票:0回答:1

我的网格包含具有多行字符串的单元格,或者当字符串太长时,它会拉伸整个行高度。

@(
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
    )
)

我希望 Telerik 网格中的行始终保持一致的高度,无论它们包含的内容如何。如果内容超出行高,我希望隐藏溢出的部分。

c# css asp.net-core telerik telerik-grid
1个回答
0
投票

如果内容无法容纳,表格单元格和行总是垂直展开,这是标准浏览器行为,不能被 CSS 样式覆盖。 ,您可以将单元格内容包装在具有预定义高度和

<div>
样式
source
overflow:hidden

© www.soinside.com 2019 - 2024. All rights reserved.