如何在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中设置自动生成的列的列宽。
相关·内容
在分析了我庞大的20MB的webpack包之后，我发现Kendo UI (v2016.3.1028)占用了大约10MB：
C:\Projects\webpack-angular-es6-master>webpack --json | webpack-bundle-size-analyzer
kendo: 9.92 MB (62.7%)
font-awesome: 1.27 MB (8.04%)
angular: 1.13 MB (7.15%)
angular-material: 1.08 MB (6.82%)
jquery: 251.51 KB (1.55%)
angular-ui-ro
浏览 2提问于2016-11-15得票数 1
在kendo grid - angular版 <kendo-grid-column [field]="col.field"
[width]="col.width"
[headerClass]="col.field === 'active' ? 'text-left' : ''"
[sortable]="(col.field === 'category' || col.field === 'delete'
浏览 23提问于2021-07-14得票数 1
我有一个项目，在那里我使用Angular Kendo UI网格，并希望能够将数据导出到excel文档。我看过ng-grid csv导出，但似乎需要使用put in a plugins选项，但是Angular Kendo UI Grid没有这个选项。有人能给我指个方向吗？
谢谢
浏览 4提问于2014-05-01得票数 1
我试图将excel导出功能添加到Kendo UI angular 2网格中，但在angular 2应用程序加载时出现错误：
Can't bind to 'toolbar' since it isn't a known property of 'kendo-grid'.
下面是我使用的代码片段：
<kendo-grid [data]="gridView" [height]="700" [pageSize]="pageSize"
[toolbar]=
浏览 1提问于2016-12-01得票数 8
是否可以将Angular grid Detail的Kendo UI展开/折叠按钮移动到网格的右侧？
看起来kendo-ui默认展开/折叠到kendo网格的最左边一列。我想看看能不能把它移到右边的按钮上。
浏览 1提问于2018-07-20得票数 1
我已经实现了一个使用的角2应用程序
在使用AoT +Rollup部署应用程序时，我被困住了：
错误：“GridModule”不是由GridModule导出的(由app\app.module.js导入)。
从汇总文档中尝试了，但我不知道如何配置namedExports
commonjs({
namedExports: {
'node_modules/@progress/kendo-angular-grid/dist/npm/js/main.js': [ 'GridModule' ]
}
});
使用上述配置并不能解决问题。
编辑:最后，我对网格的工
浏览 8提问于2016-11-04得票数 2
回答已采纳
我正在尝试一件简单的事情，比如在Angular中的kendo ui网格中显示日期列，使用以下代码：
<kendo-grid-column field="date" title="Date" type="date" format="{0:d}"></kendo-grid-column>
然而，结果是：
'2017-04-30T09:00:00‘
浏览 0提问于2017-11-06得票数 1
我正在尝试将Angular 2的kendo UI连接到我的应用程序上，但我遇到了一些问题。
这是我的system.config.js：
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/b
浏览 1提问于2017-03-10得票数 0
我在我的Angular应用程序中有一个用于Angular的Kendo Grid。我们已经启用了columnMenu功能，允许您在弹出窗口中隐藏/显示列： ? 我很惊讶地发现ColumnMenu文档中没有列出隐藏/显示列时触发的事件： https://www.telerik.com/kendo-angular-ui/components/grid/columns/menu/ 因此，我想知道是否有一种方法可以将处理程序与列的显示或隐藏联系起来，以响应单击列菜单上的" apply“按钮(或者仅仅是列菜单应用按钮本身的处理程序)。
浏览 10提问于2021-08-05得票数 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
在这个用于角度网格的Kendo UI中，我使用width: 100px定义了列。我现在需要的是用min-width而不是width来定义列。这个是可能的吗？
<kendo-grid
[kendoGridBinding]="data"
[resizable]="true"
[sortable]="true"
filterable="menu">
<kendo-grid-column
*ngFor="let col of columns&#
浏览 20提问于2021-05-14得票数 2
回答已采纳
1回答
角的Kendo UI有一个网格，可以定义如下：
<kendo-grid [data]="gridData" [height]="410">
<kendo-grid-column field="ProductID" title="ID" width="40">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title
浏览 0提问于2018-07-22得票数 1
回答已采纳
我对Kendo UI和Angular2非常陌生。我正在使用带有Angular2的Kendo ui。我在每个行都有一个带有复选框的网格模块。我想知道每行select时的rowid或任何字段的值。如何在typescript中做到这一点。下面的代码是app.component.ts
import { Component } from '@angular/core';
import { products } from './products';
@Component({
selector: 'my-app',
template: `
浏览 0提问于2017-05-09得票数 1
我有一个带有kendo UI库的angular 5应用程序。在这个应用程序中，我有一个Kendo UI Grid，其中包含一些行的详细信息。网格也是可排序的。当我单击列的名称对数据进行排序时，我想折叠展开的所有详细信息。
这是我的html代码：
<kendo-grid
#grid
[kendoGridBinding]="getDataService().listOfSolution"
[resizable]="false"
[pageSize]="10"
[pageable]="true"
[sortable]="t
浏览 3提问于2018-02-21得票数 2
回答已采纳
我们有一个新的应用程序，它是在现有的使用AngularJS的应用程序的基础上使用Angular创建的。在现有的应用中，我们使用的是Kendo UI，用户可以保存他们的网格设置。我在Kendo UI Angular Grid中找不到类似的功能。Kendo UI Angular Grid支持保存用户网格设置吗？
浏览 1提问于2017-09-22得票数 0
我有一个问题，在kendo Ui网格角度2集成组件上创建日期过滤器。问题是我想过滤两个特定日期之间的日期列，我是指一个日期范围。我搜索了Kendo和Stackoverflow的论坛，但我没有找到任何东西。那么，有没有人有过在Kendo ui grid angular 2组件中过滤两个日期之间的日期列的相同经验呢？如果你能在这个问题上做一个例子，我将非常感激。谢谢大家。
浏览 12提问于2017-06-30得票数 1
这是我第一次尝试使用Kendo控件，我的BA要求我在当前的项目中使用它(我一直在使用Angular-ui-grid)。我根本不能让Kendo网格显示测试数据，我也不知道我遗漏了什么。Chrome中的控制台显示"Kendo需要在Angular之前加载JQuery。然而，JQuery包被设置为首先加载。我甚至将jquery-1.8.2.js放在angular.js脚本标记之前，但它仍然显示相同的内容我在_Layout.cshtml页面中有以下脚本标记：
@Styles.Render("~/CSS/bootstrap")
@Styles.Render("~/Conte
浏览 0提问于2015-11-12得票数 0
我有一个剑道网格：
<kendo-grid
[data]="gridData"
[pageSize]="state.take"
[skip]="state.skip"
[sort]="state.sort"
[filter]="state.filter"
[sortable]="true"
[pageable]="true"
[filterable]="true"
[kendoGridSelectBy]="'guid'"
[se
浏览 3提问于2017-10-18得票数 0
回答已采纳
我试图让Kendo UI与我的Angular (4)项目集成在一起，但我遇到了对等依赖错误。我需要使用@progress/kendo-angular-grid和@progress/kendo-angular-charts，但这两种图表的最新版本都需要不同版本的@progress/kendo-drawing。@progress/kendo-angular-grid@0.26.0想要0.14.0的@progress/kendo-drawing，而@progress/kendo-angular-charts@0.22.0想要0.15.0的@progress/kendo-drawing。谁知道正确的版
浏览 1提问于2017-04-13得票数 0
我想在Angular4上使用Kendo-Grid，但我一直收到这个错误：
Uncaught Error: Template parse errors:
'Kunden-grid' is not a known element:
1. If 'Kunden-grid' is an Angular component, then verify that it is part of this module.
2. If 'Kunden-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHE
浏览 9提问于2017-06-14得票数 1
2回答
在Kendo UI Grid中，在分组分组列排序不起作用后，其余列排序工作正常。
谁能告诉我如何从客户端排序分组列。
谢谢你！！
浏览 0提问于2015-10-09得票数 1
1回答
在填充UI网格时，当数据具有更多字段时，UI网格列的定义将被覆盖。如何解决这个问题？在哪里以及如何解决这个问题，在控制器中，在WEB Api中？
为简单起见，示例中没有放入任何过滤：
<!-- View -->
<style>
.myGrid { height: 300px; width: 1000px; border: 1px solid black;}
</style>
<div id="grid1" ui-grid="grid1Options"
class="myGrid" ui-grid-r
浏览 0提问于2016-04-03得票数 0
1回答
我正在尝试编辑单元格内的kendo网格元素。 我有一个kendo网格，其中的列定义如下： <kendo-grid-column title="Beam ID" field="id" width="30px">
</kendo-grid-column>
<kendo-grid-column field="additional_info.name" title="Name">
</kendo-grid-column> 我按照这个链接的第一个示例实现了一个单元格内编辑表单
浏览 12提问于2018-12-27得票数 0
我将Kendo UI Grid与Angular 6结合使用，并从API获取数据，其中datetime以Epoch格式出现，如下所示：
x.items[0].EffectiveDate.$date = 1550719967
我正在使用html下面的kendo网格列和排序也应该工作。我已经通过了和，但没有解决这个问题。
如果有人面对这种情况，请帮我弄清楚。提前谢谢。
<kendo-grid-column field="EffectiveDate" title="Effective Date" filter="date" format="
浏览 1提问于2019-02-19得票数 0
我正在使用Kendo UI网格的角度与分页。当我单击一个新页面或箭头时，它调用pageChange事件，该事件更新状态的跳过并获取属性，并调用服务来获取新数据。但是，分页器按钮不更新，因此它总是选择第一个按钮，标签范围为1- 25的x项。
观点是
<kendo-grid [data]="results"
[pageable]="pageOptions" [pageSize]="state.take"
[sortable]="sortOptions" [sort]="sort"
浏览 2提问于2017-09-22得票数 1
回答已采纳
好的，让我先为那些不熟悉的人解释一下使用Telerik的Kendo UI的规则编号是在这个顺序Jquery.min.js>Angular.min.js>Kendo.all.min.js中引用以下内容
下面是我的web应用程序的伪代码
in my parent.html:
-reference for jquery
-reference for angular
-reference for kendo
-ui-view container
this is my ui-view(child.html)
-initialize kendo grid
发生的情况是，kendo窗口小部
浏览 2提问于2016-03-21得票数 1
当我试图水平滚动Kendo Angular2网格时，我在IE11中遇到了性能不足的问题。列数可能会不时更改。至少我每次都有30栏。或者冻结UI超过10秒，甚至崩溃。
我的网格版本是0.5.0。以下是我的网格设置：
<kendo-grid
[data]="view"
[scrollable]="'virtual'"
[height]="gridHeight"
[pageSize]="pageSize"
[rowHeight]="rowHeight"
浏览 2提问于2016-11-21得票数 0
回答已采纳
我希望如此。剑道格，组合框，树视图..。剑道全包了！
KendoUI Angular2我可以安装所有的组件吗？
npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n @angular/animations @progress/kendo-angular-grid @progress/kendo-angular-dropdowns @progress/kendo-angular-inputs @progress/kendo-angular-dateinputs @progress/kendo
浏览 0提问于2017-09-13得票数 0
回答已采纳
我正在尝试实现Telerik Kendo UI Grid。然而，在输入这个命令: npm view @progress/kendo-angular-grid versions时，我收到了错误信息，如附件截图所示。
浏览 13提问于2018-02-14得票数 0
我使用一个dropDownList来显示一些值，以便在网格上过滤结果。
我使用“更改”事件来查看网格何时必须更新。
$('#view-mode-selector').kendoDropDownList({
change: onMChange
});
在方法onMChange中，我试图用
kendo.ui.progress($("#grid), true);
在方法的最后，当一切都完成时，我有
kendo.ui.progress($("#grid), false);
但是数据加载，而我没有看到进度条。
如果删除最后一条语句(“false”)，我可以看到进度
浏览 1提问于2017-05-05得票数 0
3回答
我希望将红色应用于其completedIn hours列值大于24的行。我该怎么做呢。请帮帮忙，我刚接触angular。
<kendo-grid [kendoGridBinding]="gridData">
<kendo-grid-column field="RequestNumber" title="Request No."
width="110" >
</kendo-grid-column>
<kendo-grid-column field="Request
浏览 33提问于2019-02-06得票数 6
最近，我开始在我的应用程序中集成angular 2和kendo ui网格。除了日期格式之外，一切都很正常。下面是我的代码。
请帮帮我
<kendo-grid-column field="lastLoginTime" title="LastLoginTime" type="date" format={0:dd/MM/yyyy} width="40">
</kendo-grid-column>
<kendo-grid-column field="c
浏览 0提问于2017-04-20得票数 2
1回答
你好，我在kendo ui grid中显示数据有问题。当我在应用程序启动时直接加载模块时，它工作得很好，但是当我试图通过延迟加载加载它时，我得到了以下错误：
无法设置未定义的属性“堆栈”
如果我从html中删除了kendo网格，那么它会很好地加载页面的其余部分，但是对于网格，它总是会产生上述错误。
我想问题是因为吊带本身在装载时身份不明，但我不知道在哪里或如何修复它.另外，如果需要其他代码片段，我将在稍后发布它们。
包含网格的HTML：
<kendo-grid [data]="gridData"
[pageSize]="displaySize
浏览 0提问于2017-01-24得票数 1
回答已采纳
1回答
我对Kendo UI Grid有个问题。当我使网格可调整大小并设置每列的宽度时，调整其大小的游标就会错对。
有一个简单的例子：
或
$("#uxUsersToTransfer").kendoGrid({
height: 100,
resizable: true,
columns: [ ... ],
});
使用解决方案更新：
这是一个可能的解决方案：，您可以删除最后一列的宽度来使其工作！
浏览 4提问于2015-08-07得票数 1
我目前使用的是Angular 2中的Kendo UI Grid，并且我要求基于dataItem值对单元格应用背景色。我尝试使用Kendo Grid Column模板(参见下面的代码片段)，但它不会用该颜色填充整个单元格(参见附件中的屏幕截图)。任何帮助都将不胜感激。此外，这里还链接到柱塞示例- 。
<kendo-grid-column field="UnitPrice" title="Price" width="80">
<ng-template kendoGridCellTem
浏览 0提问于2017-08-08得票数 2
我有一个AngularJS KendoGrid，它有两个列:代码和名称。代码是一个数字，名称是代码的一个函数：getName(code)。我把函数放在一个模板中，但是我得到了function undefined。有什么想法吗？
HTML
<div kendo-grid="grid"
k-data-source="ds"
k-options="gridOptions"></div>
Javascript
var app = angular.module("app",
浏览 6提问于2015-01-30得票数 2
回答已采纳
当我试图在我的应用程序中加载LayoutModule时，我得到了以下错误：
(SystemJS)不能解析PanelBarComponent的所有参数：(对象对象、对象对象)。
这是我的systemjs.config.js：
(function (global) {
System.config({
baseURL: '.',
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where
浏览 3提问于2017-03-23得票数 1
回答已采纳
当我尝试在Angular 2中集成Kendo对话框时，我得到了这个错误。我成功地集成了Grid，Button，dropdowns。
在./~/@progress/kendo-angular-dialog/dist/es/dialog.component.js模块中找不到错误:错误:无法在'C:\Projects\AMDS\amd_ui\node_modules\@progress\kendo-angular-dialog\dist\es‘中解析'@telerik/kendo-theme-default/styles/packages/dialog’
请让我知道。
浏览 0提问于2016-12-02得票数 0
2回答
这个错误发生在我加载我的Kendo网格时。请帮帮我，我怎么才能修好它。
angular.js:13920 Error: Invalid template:'<tr data-uid="#=data.uid#" role='row'><td role='gridcell'>#= kendo.toString(new Date(start Date /time), 'd') #</td><td role='gridcell'><span ng-bind=
浏览 3提问于2016-11-22得票数 0
我们可以在剑道角-ui网格中分页和分组吗？想要了解这在使用angular2的剑道网格中是否可行吗？
我试图创建一个示例，在这个示例中，我可以将分组和分页结合在一起，但不知怎么分页不起作用。
<kendo-grid [groupable]="false" [data]="gridView" [group]="groups" [pageSize]="pageSize" [skip]="skip" [pageable]="true" (dataStateChange)="dataStateC
浏览 3提问于2017-06-05得票数 1
回答已采纳
使用Angular ui-grid最新版本(4.0.0)，有6列，它在笔记本电脑/台式机(大屏幕)上正确显示，但在小屏幕设备(手机)上显示非常差，数据被剪切(...)并且列显示在另一列的下方。有什么办法可以修复它吗？
浏览 2提问于2017-02-10得票数 0
我正在开发一个Kendo-angular2网格，并计划在其中包含自定义列。网格结构如下所示。但是对于一些专栏，我想要定制的样式。
<kendo-grid [kendoGridBinding]="gridData" [pageSize]="10" [pageable]="true" [sortable]="true" [groupable]="true" [height]="370">
<template ngFor [ngForOf]="columns"
浏览 3提问于2017-03-09得票数 2
回答已采纳
1回答
使用Telerik模块和网格模块中指定的汇总设置无法获得“orderBy”。其他模块，如GridModule、SharedModule、IntlService也正在解决。
以下是我命名的出口：
import rollup from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin
浏览 6提问于2016-12-05得票数 1
回答已采纳
我是第一次接触Angular Kendo UI，我正在使用上的Kendo UI网格系统。
我的网格数据具有如下名称、日期和链接的报告：
gridData: IReport[] = [
{
"date": "9/5/2018",
"reportName": "Report 1",
"reportLink": "http://google.com/",
"reportStatus": "Success"
},
浏览 10提问于2018-09-06得票数 0
回答已采纳
当我们尝试从Kendo UI grid for Angular导出网格数据时，其中一个网格列(Date列)没有格式化实际的日期值。这是我的代码。
<kendo-excelexport [data]="products" [group]="group" fileName="products.xlsx" [headerPaddingCellOptions]="headerPaddingCells" #excelexport>
<kendo-excelexport-column field="dateo
浏览 0提问于2017-11-14得票数 6
我正在开发使用KendoUI数据集的角2应用程序。出于某种原因，我只能看到网格，而不能看到数据。有人能告诉我我可能错过了什么吗。
UI如下所示
下面是我的源代码
risk-list.Component.ts
import { Component, OnInit } from '@angular/core';
import { Risk } from './risk';
import { RiskService } from './risk.service';
@Component({
moduleId: module.id,
浏览 1提问于2016-10-16得票数 0
回答已采纳
我正在尝试在集成Angular Kendo UI时正确触发ng-click事件。
在下面的中，单击按钮click me，将出现一个模式窗口，但是如果我将kendo-grid属性添加到index.html的第18行，则弹出窗口不起作用。例如更改：
<table>
至：
<table kendo-grid>
则模式弹出窗口不起作用。我怀疑当网格被渲染时，angular会丢失绑定。不确定如何修复它。有人能帮上忙吗？
浏览 0提问于2013-06-23得票数 0
回答已采纳
1回答
我在实现这个布局时遇到了问题： ? ? 我需要的是右边和左边的元素的宽度是自动的，并覆盖所有的空白空间的右边和左边的元素是在中心。 这是我能做的最接近的事情，但问题是中心的项目的宽度固定为12个单位的容器中的2个，左右两行分别固定为5个单位 <Grid container direction='row' alignItems='center' justify='center' style={{ width: '100%', textAlign:'center' }}>
<
浏览 12提问于2019-03-10得票数 0
回答已采纳
1回答
我有一个项目，使用角4 Kendo UI网格。
<kendo-grid-column
*ngIf="isVisible('fieldName')"
field="fieldName"
title="Some random field name">
</kendo-grid-column>
isVisible()方法根据传递给kendo-grid-column的属性检查该列是否可见。我希望获得我在field=fieldName"中动态指定的字段名，这样我就不必为每一列使用
浏览 1提问于2017-06-15得票数 0
1回答
In this plunk我有一个带有两列的角度网格的Kendo UI。第一列是模板，第二列是不带模板的字符串字段。 网格是可过滤的，但只有第二列显示了要输入过滤器的字段。第一列不是，因为它是一个模板，并且Kendo不知道要过滤什么。 该模板实际上是一个锚点，其格式为：<a (click)="...">{{dataItem.ContactName}}</a>我需要根据字段ContactName进行过滤。如何做到这一点呢？ @Component({
selector: 'my-app',
template: `
浏览 11提问于2019-03-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
