Question

我试图让我的初始列宽正确用于我的Kendo Grid。这让我发疯了！

我的网格如下......

<table class="MyTableClass">
    <thead>
        <tr>
            <th>
                @(Html.Kendo().Grid(Model.MyModel).Name("myGrid").HtmlAttributes(new { @class = "shadow", style = "height:40%;width:100%" })
                    .Extra(false)
                    .Operators(...)
                    .Resizable(resize => resize.Columns(true))
                    .Sortable().Scrollable().Pageable().Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
                    .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(25))
                    .Columns(columns =>
                        columns.Bound(p => p.Property1).Title("MyProperty1").ClientTemplate("...");
                        columns.Bound(p => p.Property2).Title("MyProperty2").ClientTemplate("...").Width(100);
                        columns.Bound(p => p.Property3).Title("MyProperty3").ClientTemplate("...");
                        columns.Bound(p => p.Property4).Title("MyProperty4").ClientTemplate("...").Width(100);

...

正如你所看到的那样，除了两个列之外我都设置了宽度，我想要占用宽度的其余部分。这很好用，除非宽度很小，没有显式宽度设置的两列基本上是零宽度，因此似乎缺失。

我试图在列上设置最小宽度（不要显示宽度），如果小于100，则将宽度设置为100。

我已经尝试了我能想到的一切，并且在文档加载时调用了以下内容......

function setColumnMinimumWidths() {
    $("#myGrid colgroup col").each(function () {
        if ($(this).width() < 100) {
            $(this).css("width", "100px");
        }
    })
}

这样做就可以了，但是在调整窗口大小后，所有其他列现在均匀调整大小（忽略显式宽度）。

那里有任何想法的剑道或JavaScript专家吗？

Answer 1

如果您的网格中有一些具有固定网格但有些不具有固定网格的列，则具有width属性的列将提供宽度，其余列将使其余部分平均分配。

您可以做的最简单的事情是在css中设置网格的最小宽度：

#grid{
    min-width: 400px;
}

选中此示例：http://dojo.telerik.com/OHOku

Kendo Grid初始列大小

1 个答案: