调整 kendo 网格列的大小以适应过滤器

Question

我有一个 kendo 网格，上面有过滤器运算符。问题是过滤器延伸到网格之外并产生一个视图，使它们看起来在列结束的地方被切断。这是一张图片：

代码：

<div id="gridDiv">
@(Html.Kendo().Grid<Website.Models.VisitModel.VisitGridModel>()
        .Name("grid")
        .ToolBar(toolbar =>
        {
            toolbar.Custom().Text("Create").Action("AddPatient", "Patient").HtmlAttributes(new { @class = "k-primary k-button" });
        })
        .Columns(column =>
        {
            column.Bound(c => c.DateS);
            column.Bound(c => c.PreScreening);
            column.Bound(c => c.Screening);
            column.Bound(c => c.ReadyMadeReaders);
            column.Bound(c => c.EyeExam);
            column.Bound(c => c.Glasses);
            column.Bound(c => c.Contacts);
            column.Bound(c => c.RetinalGrading);

        })
        .Events(e =>
        {

        })
        .Sortable()
        .Scrollable()
        .Selectable()
        .Resizable(resize => resize.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .NoRecords("No data")
        //.ClientDetailTemplateId("template")
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Filterable(f => f.Operators(o => o.ForString(fs => fs.Clear().Contains("Contains").StartsWith("Start With").EndsWith("End with").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to"))))
        .Pageable(page => page
        .Refresh(true)
        .ButtonCount(5)
        .PageSizes(new string[] { "5", "10", "20", "100", "All" })
        )
        .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Sort(s =>
        {
            s.Add(a => a.ID).Ascending();
        })
        .Model(model =>
        {
            model.Id(i => i.ID);
        })
        .Read("ReadAllVisits", "EyeTestReport")
        .Events(events => events.Error("Shared.onGridDataSourceError").RequestEnd("Shared.onGridRequestEnd"))
        )
)

如何让列的大小合适？

Answer 1

 column.Bound(c => c.DateS).Width(150);
 column.Bound(c => c.PreScreening).Width(150);
 column.Bound(c => c.Screening).Width(150);

尝试向列边界添加宽度，看看能否解决您的问题...

Answer 2

我发现您只需在页面自己的样式文件或样式标签中覆盖 kendo 的样式。像这样：

.k-grid-header .k-header:first-child {
border-left-width: 0;
width: 50% !important; 
}

屏幕：

调整 kendo 网格列的大小以适应过滤器

Resizing of kendo grid columns to fit filters

kendo-ui

kendo-grid

kendo-asp.net-mvc