kendo-grid 相关问题

Kendo Grid是一个Kendo小部件，可显示表格数据并提供与数据交互的丰富支持，包括分页，排序，分组和选择。 Grid是一个功能强大的widget，有许多配置选项。它可以使用Kendo DataSource组件绑定到本地JSON数据或远程数据。

KendoUI Angular 17 - NG0300：多个组件将节点与标记名按钮匹配

我有不同的组件，我在命令列中使用带有删除按钮的 KendoUI Angular Grid：我有不同的组件，我在命令列中使用带有删除按钮的 KendoUI Angular Grid： <kendo-grid-command-column [width]="40"> <ng-template kendoGridCellTemplate let-dataItem> <button class="outgoing-delete-button" id="gridDeleteButton" kendoButton themeColor="primary" fillMode="clear" kendoGridRemoveCommand onClick="event.stopPropagation()" > <i class="fa fa-trash" aria-hidden="true"></i>  </button> </ng-template> </kendo-grid-command-column> 我使用 npm-check-updates 来更新 @progress 组件，这是我的 package.json: "dependencies": { "@angular/animations": "~17.3.7", "@angular/common": "~17.3.7", "@angular/compiler": "~17.3.7", "@angular/core": "~17.3.7", "@angular/forms": "~17.3.7", "@angular/localize": "~17.3.7", "@angular/platform-browser": "~17.3.7", "@angular/platform-browser-dynamic": "~17.3.7", "@angular/platform-server": "~17.3.7", "@angular/router": "~17.3.7", "@fortawesome/angular-fontawesome": "^0.14.1", "@fortawesome/fontawesome-common-types": "^6.5.2", "@fortawesome/fontawesome-svg-core": "^6.5.2", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", "@progress/kendo-angular-buttons": "^15.5.0", "@progress/kendo-angular-common": "^15.5.0", "@progress/kendo-angular-dateinputs": "^15.5.0", "@progress/kendo-angular-dialog": "^15.5.0", "@progress/kendo-angular-dropdowns": "^15.5.0", "@progress/kendo-angular-excel-export": "^15.5.0", "@progress/kendo-angular-grid": "^15.5.0", "@progress/kendo-angular-icons": "^15.5.0", "@progress/kendo-angular-indicators": "^15.5.0", "@progress/kendo-angular-inputs": "^15.5.0", "@progress/kendo-angular-intl": "^15.5.0", "@progress/kendo-angular-l10n": "^15.5.0", "@progress/kendo-angular-label": "^15.5.0", "@progress/kendo-angular-layout": "^15.5.0", "@progress/kendo-angular-listview": "^15.5.0", "@progress/kendo-angular-menu": "^15.5.0", "@progress/kendo-angular-navigation": "^15.5.0", "@progress/kendo-angular-notification": "^15.5.0", "@progress/kendo-angular-pdf-export": "^15.5.0", "@progress/kendo-angular-popup": "^15.5.0", "@progress/kendo-angular-progressbar": "^15.5.0", "@progress/kendo-angular-ripple": "^15.5.0", "@progress/kendo-angular-tooltip": "^15.5.0", "@progress/kendo-angular-treeview": "^15.5.0", "@progress/kendo-data-query": "^1.7.0", "@progress/kendo-drawing": "^1.20.1", "@progress/kendo-licensing": "^1.3.5", "@progress/kendo-svg-icons": "^2.3.0", "@progress/kendo-theme-default": "^7.2.1", "@types/lodash": "^4.17.1", "angular-oauth2-oidc": "^17.0.2", "bootstrap": "^5.3.3", "cldr-core": "^45.0.0", "cldr-dates-full": "^45.0.0", "cldr-numbers-full": "^45.0.0", "jquery": "^3.7.1", "kendo-ui-license": "^1.0.1", "locale-codes": "^1.3.1", "npm-check-updates": "^16.14.20", "oidc-client": "^1.11.5", "popper.js": "^1.16.0", "run-script-os": "^1.1.6", "rxjs": "~7.8.1", "zone.js": "~0.14.5" }, "devDependencies": { "@angular-devkit/build-angular": "~17.3.6", "@angular-eslint/builder": "17.3.0", "@angular-eslint/eslint-plugin": "17.3.0", "@angular-eslint/eslint-plugin-template": "17.3.0", "@angular-eslint/schematics": "17.3.0", "@angular-eslint/template-parser": "17.3.0", "@angular/cli": "~17.3.6", "@angular/compiler-cli": "~17.3.7", "@types/jasmine": "~5.1.4", "@types/jasminewd2": "~2.0.13", "@types/jquery": "^3.5.29", "@types/node": "^20.12.8", "@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/parser": "^7.8.0", "eslint": "^9.2.0", "jasmine-core": "~5.1.2", "karma": "~6.4.3", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.1", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "^2.1.0", "ngx-translate-testing": "^7.0.0", "tslib": "^2.6.2", "typescript": "^5.4.5" } 自从我将应用程序升级到 Angular 版本“17.3.7”并将 @progress 组件升级到版本“15.5.0”后，我收到此错误。我正在努力解决这个问题，请帮忙。 Error: NG0300: Multiple components match node with tagname button: ButtonComponent and RemoveCommandDirective. Find more at https://angular.io/errors/NG0300 at throwMultipleComponentError (core.mjs:9916:11) at findDirectiveDefMatches (core.mjs:11970:29) at resolveDirectives (core.mjs:11770:29) at elementStartFirstCreatePass (core.mjs:22977:5) at Module.ɵɵelementStart (core.mjs:23013:9) at Component_ng_template_32_Template (component.html:189:9) at executeTemplate (core.mjs:11268:9) at renderView (core.mjs:12470:13) at createAndRenderEmbeddedLView (core.mjs:12540:9) at TemplateRef.createEmbeddedViewImpl (core.mjs:13393:31) 我通过删除触发网格的内置事件删除的命令指令kendoGridRemoveCommand来修复错误，并将其替换为带有单击事件的简单按钮。 <kendo-grid-command-column [width]="40"> <ng-template kendoGridCellTemplate let-dataItem> <button id="gridDeleteButton" kendoButton themeColor="primary" fillMode="clear" [disabled]="appUser.hasStatRole" (click)="onDelete($event, dataItem.requestId)" > <i class="fa fa-trash" aria-hidden="true"></i>  </button> </ng-template> </kendo-grid-command-column>

angular kendo-ui kendo-grid

回答 1 投票 0

在 Kendo Angular Grid 中对列菜单进行排序

我可以使用 Jquery 对 Kendo Grid 中的列菜单进行排序，如下所示 $("#grid").kendoGrid({ 列： [ { 字段：“姓名” }, { 字段：“年龄”...</desc> <question vote="0"> <p>我可以使用 Jquery 对 Kendo Grid 中的列菜单进行排序，如下所示</p> <pre><code> <script> $("#grid").kendoGrid({ columns: [ { field: "name" }, { field: "age" }, { field: "city" } ], **columnMenu: { columns: { sort: 'asc' } },** sortable: true, dataSource: [ { name: "Jane Doe", age: 30, city: "London" }, { name: "John Doe", age: 33, city: "Madrid" } ] }); </script> </code></pre> <p>但我不知道我们如何在 Kendo Angular 网格中做同样的事情？任何人都可以帮助以角度实现这一点吗？</p> </question> <answer tick="false" vote="0"> <p>我能够解决这个问题。以下是解决方案：</p> <p>模板代码</p> <pre><code><ng-template kendoGridColumnMenuTemplate let-service="service"> <kendo-grid-columnmenu-sort [service]="service"></kendo-grid-columnmenu-sort> <kendo-grid-columnmenu-filter [service]="service"></kendo-grid-columnmenu-filter> <div class="dropdown"> <div class="dropbtn">Columns</div> <div class="dropdown-content"> <div style="height: 200px; overflow-y: auto"> <div *ngFor="let col of columns; let i = index"> <div class="k-column-list-item"> <input type="checkbox" kendoCheckBox [(ngModel)]="col.hidden" (click)="columnClicked(i)">{{ col.title }} </div> </div> </div> <div style="padding: 6px"> <button style="margin: 2px" kendoButton type="button" (click)="resetCheckboxes()"> <span>Reset</span> </button> <button style="margin: 2px" kendoButton type="button" (click)="applyColumnChooser()"> <span>Apply</span> </button> </div> </div> </div> </ng-template> </code></pre> <p>代码：</p> <pre><code>sortColumnChooser() { this.columns = this.defaultGridSettings.columns.slice().sort((a, b) => a.title.localeCompare(b.title)) .map(column => ({ field: column.field, hidden: !column.hidden, title: column.title })); this.originalCheckboxes = this.columns.map(col => col.hidden); }columnClicked(columnIndex: number) { var field = this.columns[columnIndex].field; if (!this.columnFields.find(item => item.field === field)) { this.columnFields.push({ field: field }); } } applyColumnChooser() { this.columnFields.forEach(column => { let gridColumn = this.gridSettings.columns.findIndex((col) => col.field === column.field); if (gridColumn !== -1) { this.gridSettings.columns[gridColumn].hidden = !this.gridSettings.columns[gridColumn].hidden; } }); this.originalCheckboxes = []; this.sortColumnChooser(); this.extended = true; if(this.columnFields.length !== 0){ this.refresh(); } this.columnFields = []; } resetCheckboxes(): void { this.columns.forEach((col, index) => { col.hidden = this.originalCheckboxes[index]; }); this.columnFields = [];} </code></pre> <p>我在<strong>ngOnInit</strong><strong>中调用了方法</strong>sortColumnChooser()</p> </answer> </body></html>

angular kendo-ui kendo-grid

回答 0 投票 0

如何区分 Kendo UI（服务器）和 Kendo UI（客户端）？

我正在使用ASP.Net Core 6。我被迫使用Kendo UI来构建表格（Grid）。 Kendo UI 有 2 种“风格”：我所说的“服务器”： @(Html.Kendo().Grid().Name...

kendo-ui telerik kendo-grid kendo-asp.net-mvc

回答 1 投票 0

将 Kendo Grid 列显示为日期时间，但在过滤时忽略时间

我有一个 Kendo 网格和一列“销售时间”，显示为 MM/dd/yyyy HH:mm a (1/3/2015 2:34 PM)。现在我希望能够仅按日期进行过滤，忽略时间。但默认情况下，过滤器看起来...

javascript datetime kendo-ui kendo-grid

回答 3 投票 0

在响应列模板中显示外键字段

我有一个剑道网格，其字段如下： columns.Bound(p => p.FlightID).Visible(false); columns.Bound(p => p.FlightDate).Format("{0:d}").Media("(最小宽度：450px)"); 科鲁...