当用户试图调整列的大小时(在本例中为 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 之前转换图像?
javascript - 防止在 body 上滚动(Matter.js)
php - 是否可以从另一个包覆盖 laravel 包 View
swift - 如何使用 AVAudioEngine 在同一时间更改音调和速率
c# - Process.Start 无法正确运行批处理文件