kendo-ui - Kendo Grid MVC 无法将列缩小到超出某个限制

Question

当用户试图调整列的大小时(在本例中为 UnitSellPrice)以使其更小......它们会反弹到某个最小宽度，它不会让它们缩小更多...... .似乎在165px左右。据我所知，这不是我要配置的东西……事实上，要指定最小宽度，您需要 write custom code ，我没有这样做。

这是最窄的图片，可以通过调整列大小甚至指定列 .width(100) 来制作列。因此，如果他们想缩小列宽以仅显示“Unit Credit”，他们就做不到。

用户之所以想要这个，是因为他们有时想隐藏部分列标题，然后截取屏幕片段并发送给他们的客户。

Kendo 中是否有一些基本级别的代码来限制我可以覆盖的列的最小宽度？

@(Html.Kendo().Grid<MyViewModel>
    ()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(l => l.UnitSellPrice).Hidden().Sortable(false);  
    })    
    // Add "Create" command        
    .AutoBind(false)
    .Editable(editing => editing.Mode(GridEditMode.InCell))
    .Sortable()
    .Pageable()
    .Filterable()
    .Groupable()
    .ColumnMenu()
    .Reorderable(reorder => reorder.Columns(true))
    .Resizable(resize => resize.Columns(true))
)

Answer 1

这是您提到的示例。 minColumnWidth = 0;允许您按您想要的方式减少列。

$(function(){

        $("#grid").kendoGrid({
           dataSource: {
               data: [{foo: "item", bar: "number", baz: "one"}]
           },
           resizable: true
        });

        var minTableWidth;
        var minColumnWidth = 0;
        var th;
        var idx;
        var grid;

        $("#grid").data("kendoGrid").resizable.bind("start", function(e) {
           th = $(e.currentTarget).data("th");
           idx = th.index();
           grid = th.closest(".k-grid").data("kendoGrid");
        });

        $("#grid").data("kendoGrid").resizable.bind("resize", function(e) {
           if (th.width() >= minColumnWidth) {
              minTableWidth = grid.tbody.closest("table").width();
           }

           if (th.width() < minColumnWidth) {
              // the next line is ONLY needed if Grid scrolling is enabled
              grid.thead.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idx).width(minColumnWidth);

              grid.tbody.closest("table").width(minTableWidth).children("colgroup").find("col").eq(idx).width(minColumnWidth);
           }
        });

    });