Kendo Grid MVC 不能将列缩小到超出某个限制

Posted 2023-05-07

【中文标题】Kendo Grid MVC 不能将列缩小到超出某个限制

【英文标题】：Kendo Grid MVC can't shrink column beyond some limit

【发布时间】：2019-11-30 22:49:08

【问题描述】：

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

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

用户想要这个的原因是，他们有时想隐藏部分列标题，然后截屏并发送给他们的客户。

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

【问题讨论】：

你的意思是像docs.telerik.com/aspnet-mvc/api//Kendo.Mvc.UI.Fluent/… （或docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/… 用于剑道UI）？

您可以使用列菜单让用户选择活动的可见列demos.telerik.com/aspnet-mvc/grid/column-menu

@FrozenButcher，我知道该功能，但我不是要隐藏列，而是允许用户调整它们的大小，.Resizable(resize => resize.Columns(true)) 使他们能够使用，但似乎有一些硬停止他们可以使列有多窄。他们不能将其缩小到零宽度......在这种情况下，甚至小于 200 像素。在我更新的问题中查看图片。这是一个狭窄的，因为人们也可以出于某种原因调整它的大小

@CarstenFranke 不确定您的意思。我确实通过他们的流利的构建器.Resizable(resize => resize.Columns(true)) 将网格设置为可调整大小。但是当调整列的大小时，一旦你达到一些未指定的宽度，它就会阻止你......你不能将它缩小到零或 10 像素......在这种情况下甚至没有 200 像素......它有一些硬编码的最小值宽度似乎。请参阅更新问题中的图片。

我一定是复制了错误的链接。在docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/…上搜索MinResizableWidth

【参考方案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);
           
        );

    );