Angular的Kendo UI是Angular 4+的商业UI工具包
如何在筛选行中显示剑道`kendoGridSelectAllCheckbox`？
下面的代码添加了标题行中的全选复选框并按预期工作： 下面的代码添加选择标题行中的所有复选框并按预期工作： <kendo-grid-checkbox-column [showSelectAll]="true"> <ng-template kendoGridHeaderTemplate> <input class="chk-status" kendoGridSelectAllCheckbox /> </ng-template> <ng-template kendoGridCellTemplate let-idx="rowIndex"> <input class="chk-status" [kendoGridSelectionCheckbox]="idx" /> </ng-template> </kendo-grid-checkbox-column> </kendo-grid-checkbox-column> 我尝试更改上面的代码以在可过滤行中添加全选复选框，但它似乎不起作用： <kendo-grid-checkbox-column [showSelectAll]="true"> <ng-template kendoGridHeaderTemplate> <span>Ready to sent</span> </ng-template> <ng-template kendoGridFilterCellTemplate> <input class="chk-status" kendoGridSelectAllCheckbox /> </ng-template> <ng-template kendoGridCellTemplate let-idx="rowIndex"> <input class="chk-status" [kendoGridSelectionCheckbox]="idx" /> </ng-template> </kendo-grid-checkbox-column> </kendo-grid-checkbox-column> 问题是 kendoGridSelectAllCheckbox 对 kendoGridHeaderTemplate 有内部依赖性，因此您看不到任何渲染的输出。 我已经在下面的回答中解释了这一点： KendoUI 网格内的角度内容投影 问题的解决方案是使用 CSS 将 checkbox 直接放置在标签下方，这样就会给人一种它出现在过滤器单元格上的错觉。 .filter-all-checkbox th[rowspan="1"][colspan="1"], .filter-all-checkbox th[rowspan="1"][colspan="1"] .k-cell-inner, .filter-all-checkbox th[rowspan="1"][colspan="1"] .k-link{ overflow: visible !important; } .filter-all-checkbox .checkbox-container { position: relative; overflow: visible; } .filter-all-checkbox .checkbox-custom { position: absolute; top:45px; left: 1px; } HTML： <kendo-grid-checkbox-column> <ng-template kendoGridHeaderTemplate> <div class="checkbox-container"> <span>Ready to sent</span> <input class="checkbox-custom" type="checkbox" kendoCheckBox id="selectAllCheckboxId" kendoGridSelectAllCheckbox [state]="selectAllState" (selectAllChange)="onSelectAllChange($event)" /> </div> </ng-template> <ng-template kendoGridFilterCellTemplate> </ng-template> </kendo-grid-checkbox-column> Stackblitz 演示 如果上面的代码对您没有帮助，那么您可以使用普通复选框来实现过滤功能。
在 Angular Nx 应用程序中导入 Kendo UI SCSS 文件模块/组件
我正在使用 Nx 框架开发 Angular 应用程序，并集成了 Kendo UI 组件。为了优化和模块化样式，我导入特定于每个组件的 SCSS 文件...
在这个 StackBliz 中，我有一个 Kendo for Angular 下拉列表。当您打开下拉菜单时，弹出窗口会显示七个项目。我只想展示三个项目。所以我将popupSettings中的高度设置为30，但是...
如何将标签的“for”属性设置为用 <ng-content> 投影的剑道文本框？
我想创建一个组件信息标签，在标签旁边添加一个图标。 作为一个非常简单的草图，它应该看起来像这样 （标签）（一） （输入字段） 这就是我的组件的样子 我想创建一个组件 info-label，在标签旁边添加一个图标。 作为一个非常简单的草图，它应该看起来像这样 (label) (i) (input field) 这就是我的组件的样子 <div class="label-container"> <kendo-label class="k-form" [text]="text"></kendo-label> <kendo-icon *ngIf="info" name="info" themeColor="info" [title]="info"></kendo-icon> </div> <ng-content></ng-content> 我尝试了几种方法来正确设置 for 属性，以便单击标签即可选择输入。但我无法让他们工作。 这就是我使用该组件的方式。我的组件有一个我在模板中使用的 @Input() for: string|undefined;（没有成功） <info-label text="ID" info="Identifier bla bla" for="foo"> <kendo-textbox id="foo"></kendo-textbox> </info-label> 无论如何都无法让它发挥作用。 当我使用 vanilla 输入并使用 [for] 时，它工作得很好。像这样 组件 <div class="label-container"> <kendo-label class="k-form" [text]="text" [for]="for" /> <kendo-icon *ngIf="info" name="info" themeColor="info" [title]="info"></kendo-icon> </div> <ng-content></ng-content> 用法 <info-label text="ID" info="Identifier bla bla" for="bar"> <input type="text" id="bar"> </info-label> 不幸的是，似乎没有办法用单个标签和输入来做到这一点。处理此问题的一种方法是将代码包装在 <ng-container> 标签中，并将 ngIf 移动到该容器中。 这是标签和文本框的示例： <ng-container *ngIf="someBoolean"> <kendo-label [for]="someInput" text="Some Input:"></kendo-label> <kendo-textbox #someInput [(ngModel)]="SomeValue" ></kendo-textbox> </ng-container> <ng-container *ngIf="!someBoolean"> <kendo-label [for]="someInput" text="Some Input:"></kendo-label> <kendo-textbox #someInput [(ngModel)]="SomeOtherValue" ></kendo-textbox> </ng-container>
我有 3 列，因此有 3 个单元格，其中有一个按钮。 单击按钮我想打开/关闭详细模板 左侧没有 + 图标 HTML： 我有 3 列，因此有 3 个单元格，其中有一个按钮。 单击按钮我想打开/关闭详细模板 左侧没有 + 图标 HTML： <kendo-grid-column field="info" title="info"> <ng-template kendoGridCellTemplate let-dataItem> <button mat-button (click)="clickInfoCell()"> </button> </ng-template> </kendo-grid-column> <ng-template kendoGridDetailTemplate let-dataItem let-rowIndex="rowIndex"> // DETAIL TEMPLATE BODY </ng-template> TS： public onCellClick(event: CellClickEvent){ this.myEvent= event; } //toggleTemplate public clickInfoCell(){ //Close previous template //Open detail template } 谢谢 实际上有一个内置机制，具有用于此目的的专用指令。 模板： <kendo-grid [kendoGridBinding]="gridView" [kendoGridExpandDetailsBy]="expandDetailsBy" [(expandedDetailKeys)]="expandedDetailKeys" ></kendo-grid> 成分： public expandedDetailKeys: any[] = [1]; public expandDetailsBy = (dataItem: any): any => { return dataItem.ProductID; }; 您可以在此处阅读有关机制的信息。 您可以在 StackBlitz 此处查看工作演示。
如何以编程方式更改 Angular Kendo UI 网格页面索引？
这个问题是 8 年前提出的，但是 Kendo UI 网格已经发展并且现在支持 Angular。原始问题的答案不适用于 Kendo Grid Angular。 我有剑道网格...
kendo 导出 pdf 不支持生成的 PDF 文档中的非美国货币符号
我在我的应用程序中使用带有角度的kendo-ui，需要使用基于客户端的货币符号在PDF中显示创建的订单详细信息，但是 我在我的应用程序中使用带有角度的kendo-ui，需要在带有基于客户端的货币符号的PDF中显示创建的订单详细信息，但是 <kendo-pdf-export #PDF [margin]="'3cm'"> <div class="main-container"> <div class="summary-heading"> <h2>{{'orderSummary' | translate}}</h2> </div> .... ....... </div> </kendo-pdf-export> 只支持美元符号（$），inidan货币符号显示为“,,”，这是错误的，如何在PDF中添加印度货币。 请帮忙， https://angular-uezijy.stackblitz.io 这里有一个 stackblitz 链接，反映了同样的问题。 在项目的主 css/scss 文件中导入 DejaVu Sans 字体系列 @font-face { font-family: "DejaVuSans"; src:url("https://kendo.cdn.telerik.com/2018.2.620/styles/fonts/DejaVu/DejaVuSans.ttf") format("truetype"); } .k-grid {font-family: "DejaVu Sans", "Arial", sans-serif;} 能够在PDF中显示INR符号（也支持最广泛使用的所有货币） 更新后的链接 https://angular-uezijy.stackblitz.io 对于代码级别也很有帮助。 我按照这篇文章https://docs.telerik.com/kendo-ui/api/javascript/pdf/methods/definefont来处理 KendoUI Scheduler 导出到 PDF 情况下的问题，其中特殊字符未正确打印在 PDF 文件中
我正在使用 Kendo for Angular 14，但在修改下拉列表的背景颜色时遇到问题。 据我所知，当打开下拉列表对象时，会出现一个新的 DOW 对象
如何在 Kendo Angular Upload 组件中重置上传的文件列表
我有一个剑道上传组件，可以只上传一个文件。上传文件后，我需要清除列表或上传的文件。 初始状态 选择文件后 文件上传后 我...
我正在使用 Angular UI 网格，面临这个问题， 当垂直滚动最后滚动到底部时，如果尝试将水平滚动移动到右上角，则垂直滚动会向上移动 请参考这个
我在使用 Kendo Ui Angular 的 kendo-upload 时遇到一个问题。 [saveUrl] 和 [removeUrl] 应在 kendo-upload 中给出。但我将项目分为服务部分和组件部分。我想写...
Kendo tabstrip 包装了一个具有 ID 属性的 < li > 标签。在官方剑道网站中，ID 是一个唯一的字符串 - 'k-tabstrip-tab-' 后跟一个随机字母数字字符串。例如。 'k-
PrimeNG 与 KendoUI for Angular - 技术方面 [已关闭]
在回顾决定选择一个 UI 库而不是另一个 UI 库的主要技术点时，在本例中是 PrimeNG 和 KendoUI for Angular，你们中的任何人是否有机会客观地分析
新的 Angular v17 项目 - PrimeNG 与 KendoUI
我需要您的帮助来为我的 Angular v17 项目选择最佳的 UI 库。 我来自一个使用 AngularJs 和 AngularJs-Bootstrap 组件的旧项目。 我看到了
我有一个 Kendo UI 网格，当我将项目导出到 excel 时，我需要做一些列换行（newsDescription 列）。（在某些列中，我有大量数据，并且在导出的 excel 中用该数据扩展...
Kendo UI for Angular 在不使用 SVG 图标时显示警告
我将 Angular 的 Kendo UI 升级到最新版本，并且在控制台中收到多个警告，如下所示： Kendo UI for Angular：图标类型设置为“svg”，但仅限字体图标 ...
Angular Function Guard 内部的 Kendo 对话框
我正在尝试（没有成功）在 Angular 16 CanActivate 功能防护中实现确认消息。此确认尝试使用 Kendo 对话服务来创建对话框。
Kendo Angular UI - 有什么方法可以保持tilelayout的状态并最初加载它？
我正在尝试实现一个仪表板，用户可以在其中添加/删除和重新排序小部件。 加载持久状态应该不是问题，因为我可以创建如下内容： 我正在尝试实现一个仪表板，用户可以在其中添加/删除和重新排序小部件。 加载持久状态应该不是问题，因为我可以创建这样的东西： <kendo-tilelayout-item *ngFor="let widget of widgets" [title]="widget.title" [col]="widget.col" [order]="widget.order">...</kendo-tilelayout-item> 但是我怎样才能将tilelayout的状态保存到我的模型中呢？ 我尝试了重新排序事件，但我没有任何信息来识别我的小部件模型。 public onReorder(e: TileLayoutReorderEvent): void { // Find the model to persist changes } 我就是这样做的。在 <kendo-tilelayout-item [attr.data-setting]="dataItem.id" 在我的组件中，我保留一个名为“设置”的对象，就像典型的 JS 字典一样使用： settings: any = {}; 当我从 API 调用中获取数据时，我将每个结果作为 ID 属性放回到对象中： // loop results when loading... this.settings[dataItem.id] = dataItem; 然后我就可以处理重新订购事件了： onReorder(e: TileLayoutReorderEvent) { const data: ItemUpdate[] = []; e.items.forEach((item) => { const r = item.elem as ElementRef; const key = r.nativeElement.getAttribute('data-setting'); data.push({ id: this.settings[key].id, col: item.col, row: item.row, colSpan: item.colSpan, rowSpan: item.rowSpan, order: item.order, }); }); // sort the data // call the API to update }
如何在 Angular 中更改 kendo-grid-group-panel 文本“将列标题拖放到此处以按该列分组”
我正在研究角度 Kendo 网格分组功能，我想更改 kendo-grid-group-panel 文本“将列标题拖放到此处以按该列分组”。如何更改该文字？
使用 kendoDataBinding 时访问 Kendo Grid 中 Angular 的过滤记录计数
我在组件中定义了一个剑道网格，如下所示： 显示（总记录数）的（过滤记录数） 我在组件中定义了一个剑道网格，如下所示： <p> Showing (filtered record count) of (total record count) </p> <kendo-grid [kendoGridBinding]="data" [pageSize]="20" [paeable]="pagerSettings" filterable="menu"> </kendo-grid> （寻呼机设置在类似于此的数组中定义页面大小：[5,10,25,100]） 如图所示，我需要显示（并更新）过滤后的记录计数。剑道<pager-info>不符合客户的要求，因为显示器在桌子外面。 使用 [kendoGridBinding] 显示本地数据时，如何访问过滤记录数和总记录数？ 使用时如何访问过滤记录数和总记录数 [kendoGridBinding] 像这样显示本地数据？ 总计数 - 是 data 的长度。您可以在构造函数中初始化它。 过滤计数 - 是 filterBy 返回的数组长度 我在这里创建了一个工作示例https://codesandbox.io/s/blissful-morse-s24jk9?file=/src/app/app.component.ts:477-489