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

当用户试图调整列的大小时(在本例中为 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))
)

最佳答案

这是您提到的示例。 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);
           }
        });

    });

https://stackoverflow.com/questions/57154851/

相关文章:

javascript - 使用 axios 向服务器发出请求会卡住 React Native 应用程

java - CrudRepository delete 是否也删除了 Blob 字段的底层大对象

ruby-on-rails - ActiveStorage 如何在上传到 S3 之前转换图像?

reactjs - 使用重新选择选择器时无法提供/测试传奇

javascript - 防止在 body 上滚动(Matter.js)

php - 是否可以从另一个包覆盖 laravel 包 View

swift - 如何使用 AVAudioEngine 在同一时间更改音调和速率

c# - Process.Start 无法正确运行批处理文件

angular - ionic 4 : Ion-checkbox checked not updat

spring-boot - 日志记录执行器健康调用,即使在排除时也是如此