如何使Kendo网格列自动宽度

2024-05-23 00:10| 来源: 网络整理| 查看: 265

我使用了jQuery插件数据表，如果我们不指定Grid的列宽，它将自动调整列宽以获取标题或数据内容的长度。

现在我想要在Kendo Grid中使用相同的功能，但是，除了固定Grid包装器样式并为所有列设置col宽度css之外，我找不到它，这使小长度的字段也占用了很大空间。

所以我的问题是如何使Kendo Grid列(通常我有很多字段，并且它是可滚动的)自动设置宽度或设置为不同的长度(并且我不希望手动设置每个列的宽度)。

谢谢

在定义列时，您必须设置宽度，如果不指定宽度，则它将采用内容的自动宽度。看看这个DOC http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.width

12345columns: [ { field:"name", width:"200px" }, { field:"tel", width:"10%" }, // this will set width in % , good for responsive site { field:"age" } // this will auto set the width of the content ],

如果您需要更多方法来处理剑道宽度，请查看http://docs.telerik.com/kendo-ui/getting-started/web/grid/walkthrough#column-widths

将scrollable设置为false应该可以解决问题：

1234567$('#grid').kendoGrid({ dataSource: { data: data }, scrollable: false, resizable: true });

相关讨论因为如果您放置" scrollable：false"，则如果您的总列宽大于屏幕宽度，则在调整大小时出现的水平滚动将不会出现，并且子级将被迫适应父级。因此，" scrollable：false"修改了剑道网格的构建方式。如果不放，则父宽度由子宽度计算。

我也用dataBound解决这个问题：

我的关于kendo自动适合数据绑定列的问题

123456789101112 dataBound: function(){ var grid = $("#grid").data("kendoGrid"); for (var i = 0; i < grid.columns.length; i++) { grid.autoFitColumn(i); } }, dataSource: $scope.data,

你可以在jQuery中做到这一点：

123456789$('#grid').kendoGrid({ dataSource: { data: data },dataBound: function(){ var grid = $("#grid").data("kendoGrid"); for (var i = 0; i < grid.columns.length; i++) { grid.autoFitColumn(i); } },

相关讨论感谢您的建议，但是自2015年第一季度起可以使用。 @federico嵌入一行配置？没有js功能？怎么样？不幸的是，没有一个简单的方法，您需要从每列的X表中获取最大长度(如select max(len(col1))作为len1)，然后以某种方式使用Pixels预先设置每个像素的宽度，我仍然在工作等式，但是是的，即使在2014年或更早的旧版本中也可以使用。

【本文地址】

公司简介

联系我们