Kendo Grid是一个Kendo小部件,可显示表格数据并提供与数据交互的丰富支持,包括分页,排序,分组和选择。 Grid是一个功能强大的widget,有许多配置选项。它可以使用Kendo DataSource组件绑定到本地JSON数据或远程数据。
如何在 ASP.NET MVC 中的剑道聊天中将渲染消息附件中的文本渲染为 html?
我在 ASP.NET MVC 中使用 kendo.ui.Chat API,我想将 renderMessage 方法中的文本功能呈现为 HTML,但现在尚未呈现。 输入: 聊天.renderMessage( ...
已经存在如何获得自定义错误处理的问题以及答案,但所有这些答案都使用网格的“外部”引用/选择器来使其工作,例如: 函数 onError(e) { ...
如何在筛选行中显示剑道`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 演示 如果上面的代码对您没有帮助,那么您可以使用普通复选框来实现过滤功能。
Telerik Kendo UI 网格在保留(和恢复)其状态后丢失自定义命令事件处理程序
我已经隔离了这个问题,请在此处查看并尝试完整的源代码。 重现步骤: 按 Ctrl+Enter 运行代码片段 单击“Say Hello”自定义命令按钮,然后检查该事件是否 处理程序运行
我有一个要求,我必须在剑道网格的可过滤单元格中显示两个下拉列表。这两个下拉列表将过滤剑道网格中的两个不同列。 有人以为我...
我需要仅在剑道网格中禁用一列的大小调整。 我已经看到了 columnresize 事件,但我不明白如何在下面的网格示例中使用它。 我注意到有一个 si...
使用 asp.net MVC 包装器在 Kendo UI 网格中格式化日期时间
我想构建一个格式为日期 dd//MM/yyyy 的 Kendo UI 网格。但是,我发现的所有与此相关的问题都通过代码 Format("{0:d}"); 解决了。所以,我尝试过像下面的代码:
我在我的剑道网格上注意到这一点已经有一段时间了。我在 SO 或 Telerik 支持论坛上找不到任何关于它的信息,所以我想我只想看看是否有其他人有这个...
Angular 10 Kendo Grid 导致“没有‘new’就无法调用类构造函数 vA”错误
我正在尝试在 Angular 应用程序中实现 Kendo Grid,但在启用 Kendo Grid 组件时遇到以下错误: vendor.4add67dadae0cd9152b9.js:16 错误错误:Unc...
kendo grid setOptions - 如何处理网格模式的重大更改?
我有一个 ASP.NET MVC Kendo Grid,可以保存列顺序和可见性,类似于此示例 网格选项持久保存到数据库中。现有选项引用特定列...
Kendo Grid:使用 rowReorderable 时自定义拖动提示
使用 rowReorderable 时是否可以自定义剑道网格上的行拖动提示?
Kendo MVC 网格命令按钮未保存在 setOptions 中
我有一个使用命令按钮的 Kendo MVC 网格。这些按钮使用 .Visible 函数调用返回 true/false 的 JS 函数来确定其是否可见。 我也在使用 getOptions/
我想要 Kendo Grid 中的客户端网格分页。在网格中,第一页中仅显示前 50 或 100 条数据。当客户点击下一页时,将显示其他 50 或 100 条数据。我不想...
我创建了一个带有分页功能的简单 Kendo UI 网格。现在我想用一些新数据刷新我的网格。我使用 setDatasource 将新数据附加到网格,然后刷新以刷新网格...
我有一个剑道用户界面网格。假设指向网格的JS变量称为grid。如何以编程方式转到第 3 页?谢谢。
我创建了一个启用多选的剑道网格: 我创建了一个启用多选的剑道网格: <kendo-grid [reorderable]="false" class="border" [kendoGridBinding]="data" [selectable]="{ enabled: true, checkboxOnly: false, mode: 'multiple' }" scrollable="none" > <kendo-grid-checkbox-column [showSelectAll]="true" [width]="40" [columnMenu]="false" headerClass="col-header" ></kendo-grid-checkbox-column> <kendo-grid-column title="Person Name" headerClass="font-weight-bold col-header" > <ng-template kendoGridCellTemplate let-dataItem> {{ dataItem.lastName }}, {{ dataItem.firstName }} </ng-template> </kendo-grid-column> 我在 showSelectAll 上使用 kendo-grid-checkbox-column,以便通过标题中的复选框选择所有网格行。我在文档中的 Kendo for Angular 演示中看到了这项工作。 对我来说,当未选择任何内容时,单击标题复选框不会执行任何操作: 当我手动选择一行时,单击显示“-”符号的标题复选框将取消选择选定的行: 当我手动选择所有行时(按住 Shift 键单击它们可以),单击带有复选标记的标题复选框也不起作用: 所以它不适用于选择全部或取消选择全部,但适用于取消选择某些。 有什么想法我做错了什么以及我应该尝试如何让它发挥作用吗? 谢谢! 根据提供的信息,真的很难判断可能导致问题的原因 - 我刚刚使用最新官方版本的 Kendo 包和提供的标记创建了一个 StackBlitz 演示,并且它似乎按预期工作: https://stackblitz.com/edit/angular-gmiahh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts 您可以将其与实际实施进行比较并应用必要的调整。 编辑:如果网格恰好与 Angular Material CDK Overlay 一起使用,您还可以查看这篇文章: https://www.telerik.com/kendo-angular-ui/components/knowledge-base/selectall-ngmaterialcdk/ 在对我们自己的问题进行故障排除后(与所描述的问题类似),我发现我们的问题是由变更检测策略引起的。 最初,我们将其设置为: changeDetection: ChangeDetectionStrategy.OnPush 然后我们将其删除,并且它没有对网格造成任何问题。 添加更多功能后,全选停止工作。 重新添加更改检测后,它再次开始工作。 不知道为什么或什么影响它停止工作。
Telerik Blazor GridCommandButton 不起作用
我一直在与 Blazor 和 Telerik 合作,我似乎有网格显示数据,CSS 看起来不错,但主要使用来自 Telerik 示例的代码,我对它的工作量感到惊讶......
如何在剑道网格的总属性中分配行数?我使用json来填充数据: if ($结果 = mysqli_query($con,$sql)) { while($obj = mysqli_fetch_object($result)) { $arr...
在 ASP.NET 中的 Kendo UI Grid 中实现基本分页时出错
我是非常新的 Kendo UI Grid,所以如果这是一个愚蠢的问题,请原谅我。我正在尝试在 asp.net 中实现具有分页功能的基本 Kendo UI 网格。但我在 kendo.web.min.js 中遇到错误。
我有 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 此处查看工作演示。