如何在angular的Kendo UI Grid中设置自动生成的列的列宽
在Angular的Kendo UI Grid中设置自动生成的列的列宽可以通过以下步骤实现：
- 首先，确保你已经在Angular项目中正确引入了Kendo UI Grid组件，并且已经在模块中导入了相应的依赖。
- 在你的组件中，定义一个变量来存储自动生成的列的列宽配置。例如：
public columnWidth = 100; // 列宽为100像素- 在Kendo UI Grid的HTML模板中，使用
[columnWidth]属性绑定这个变量到自动生成的列。例如：
<kendo-grid [data]="gridData">
<kendo-grid-column field="name" title="Name" [width]="columnWidth"></kendo-grid-column>
<kendo-grid-column field="age" title="Age" [width]="columnWidth"></kendo-grid-column>
<!-- 其他自动生成的列 -->
</kendo-grid>在这个例子中，[width]属性绑定了columnWidth变量，将自动生成的列的列宽设置为100像素。
- 如果你希望每个自动生成的列都有不同的列宽，你可以在数据源中为每个列定义一个列宽属性。例如：
public gridData = [
{ name: "John", age: 30, width: 100 },
{ name: "Jane", age: 25, width: 150 },
// 其他数据
];然后在HTML模板中使用[width]属性绑定这个列宽属性。例如：
<kendo-grid [data]="gridData">
<kendo-grid-column field="name" title="Name" [width]="dataItem.width"></kendo-grid-column>
<kendo-grid-column field="age" title="Age" [width]="dataItem.width"></kendo-grid-column>
<!-- 其他自动生成的列 -->
</kendo-grid>这样，每个自动生成的列都会根据数据源中定义的列宽属性来设置列宽。
总结起来，通过在组件中定义列宽变量，并将其绑定到自动生成的列的[width]属性，或者在数据源中为每个列定义列宽属性并绑定到[width]属性，你可以在Angular的Kendo UI Grid中设置自动生成的列的列宽。
相关·内容
无法为angular自动生成的Kendo UI网格设置宽度。我想设置与设置字段名称、标题和数据类型相同的宽度。我尝试向我的ColumnSetting数组添加一个属性宽度，然后在生成列时尝试只添加一个固定宽度设置，如下面的代码所示，但不起作用 预期的结果是列宽由ColumnSetting数组中提
浏览 42提问于2019-01-28得票数 0
我正在研究Kendo Grid的角度版本，如何确保Kendo Grid的列宽是自动设置的，这意味着每一列都根据需要采用其全宽。我不担心记录列，但我想确保标题列显示完整的文本，而不用担心div的宽度在，并且我可以做父div overflow-x。因为我是动态使用列的</
浏览 2提问于2018-12-07得票数 0
1回答
我对angular等非常陌生。这对一些人来说可能非常容易，但我遇到了麻烦。
我有一个剑道网格的几个列，并希望有一个列，这将有一个可点击的链接(例如。我的问题是，对于1.创建可点击的链接2.将用户路由到一个新页面以及该页面上处理(例如：用户)
浏览 11提问于2019-07-23得票数 0
我使用autoFitColumns方法，如下所述： https://www.telerik.com/kendo-angular-ui/components/grid/columns/resizing/#toc-auto-fitting-the-content 但在某些情况下，该方法会使列的大小过小(例如，当网格中只有1-2列时)或过大(当列包含长文本且不需
浏览 45提问于2020-01-20得票数 1
我使用了jQuery插件数据表，如果我们不指定网格的列宽，它将自动调整列的宽度来获取标题或数据内容长度。现在我想在Kendo网格中使用相同的功能，但是，除了固定网格包装样式并为所有列设置列宽度css之外，我找不到它，这使得小长度字段也占用了很大的空间。所以我的问题是如何让Kendo Grid列(通常我有很多字段，而且它是可滚动<
浏览 1提问于2014-09-02得票数 12
我使用angualr2 kengo ui网格组件来显示表数据。我们希望根据每列的最长单元格值来设置列宽。是否有任何配置属性可以将其设置为我们的或任何其他解决方案？
感谢您的支持
浏览 13提问于2017-02-13得票数 0
我试图用自动生成的列显示一个kendo-grid，并启用复选框选择模式。下面创建一个具有自动生成列的kendo-grid，并运行良好，</kendo-
浏览 10提问于2017-10-17得票数 0
回答已采纳
1回答
如何在JavaScript通知中显示所有Kendo网格列宽？alert(JSON.stringify(grid.column));
但我需要的只是列的宽度。
浏览 6提问于2015-09-11得票数 1
我想知道如何在Angular 4和更高版本中生成动态列，Kendo Grid使用类似pivot样式的typescript。我已经尝试使用Telerik / Progress网站上提供的Kendo Auto-Generated专栏示例。
需要透视样式的Kendo网格
浏览 2提问于2019-11-09得票数 0
2回答
我有这样的代码： dataSource: { }, width: "20", }});
现在，我如何过滤现场买家，但使用自动完成，并显示所有买家在dataSource中？
浏览 0提问于2013-06-06得票数 1
回答已采纳
1回答
我正在尝试让剑道网格列非常细，基本上就像一条线。将width属性减少到10px或10以下似乎没有任何效果。这就是我要做的： dataSource: myData,
columns: [{
浏览 2提问于2015-10-16得票数 0
我在我的Angular应用程序中有一个用于Angular的Kendo Grid。我们已经启用了columnMenu功能，允许您在弹出窗口中隐藏/显示列： ? 我很惊讶地发现ColumnMenu文档中没有列出隐藏/显示列时触发的事件： https://www.telerik.com/kendo-angular-ui</e
浏览 10提问于2021-08-05得票数 0
我遇到了一个问题，在ui网格中过滤会导致列宽被重置。我已经将网格状态保存到本地存储，并且该问题仅在第一次加载时发生，然后才会手动调整任何列的大小。在手动调整列的大小后，筛选不再导致重新设置列宽。这里的Plinker：'use strict';
angular.module('grid-d
浏览 7提问于2015-11-18得票数 0
我在Kendo Grid中动态创建列(不知道列数和列名)。我无法将列宽的大小设置为宠物文本。有人知道怎么做吗？$(".Grid").kendoGrid({ data: $scope.data,
pageSize: 5
浏览 5提问于2015-02-14得票数 0
我正在尝试一件简单的事情，比如在Angular中的kendo ui网格中显示日期列，使用以下代码：
<kendo-grid-column field="date" title="Date" type="date" format="{0:d}"></kendo-grid-col
浏览 0提问于2017-11-06得票数 1
我有一个Kendo网格如下所示： .Name("Manage-Expense-Type-grid")").Width(230); })我希望根据其所在视图的状态来生成列<
浏览 3提问于2015-11-17得票数 0
回答已采纳
是否可以将Angular grid Detail的Kendo UI展开/折叠按钮移动到网格的右侧？
看起来kendo-ui默认展开/折叠到kendo网格的最左边一列。我想看看能不能把它移到右边的按钮上。
浏览 1提问于2018-07-20得票数 1
如果我在剑道网格中只有一条记录，那么时间水平滚动条就不工作了。.k-grid-content {
overflow-x: scroll !
浏览 33提问于2018-08-01得票数 0
我已经在kendo ui网格中动态添加了列。对于第一列，我将width指定为35，对于其他列，我将width指定为100。现在发生的情况是，有一些列包含大量数据，但由于我指定的列宽(100)，数据将显示在新行中。我试着去掉我设置为100的</e
浏览 4提问于2013-06-05得票数 3
基于，我开始使用webpack的QS，并得到了显示良好的按钮。然后我开始学习教程。所有的网格示例都显示为没有网格的文本。这些例子似乎在systemJS的plunker中起作用。这是不是意味着@progress/kendo-angular-grid将不能与webpack一起工作？一切都是从vanilla SystemJS开始的，我最终得到了同样的结果。似乎plunk
浏览 2提问于2016-10-02得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
