首页 > 解决方案 > 使用 Kendotoolbar 和 kendo 工具栏按钮在 Kendo Grid 中添加自定义按钮

问题描述

我正在设置一个带有剑道网格的页面,其中包含剑道工具栏和剑道工具栏按钮,我需要生成自定义按钮来帮助生成 excel 报告、邮件等。问题是剑道网格和剑道工具栏是分开工作的,但是不在下面的代码中(只有剑道网格可见)。使用 ng add @progress/kendo-angular-toolbar 添加工具栏

grid.component.html

<kendo-grid [data]="records"
            [pageSize]="state.take"
            [skip]="state.skip"
            [sort]="state.sort"
            [sortable]="true"
            [pageable]="true"         
            [scrollable]="'scrollable'"
            [groupable]="false"
            [group]="state.group"
            [filterable]="true"
            [filter]="state.filter"
            (dataStateChange)="dataStateChange($event)"
            [selectable]="true"
            (selectionChange)="gridUserSelectionChange(gridUser, $event)"
            (dblclick)='onDblClick()'
            [height]="500"
            (edit)="editHandler($event)"
            (remove)="removeHandler($event)">
            <kendo-grid-command-column title="command" width="200">
                <ng-template kendoGridCellTemplate>
                    <button mat-button kendoGridEditCommand><mat-icon >edit</mat-icon></button>
                    <button mat-button kendoGridRemoveCommand><mat-icon >delete</mat-icon></button>
                </ng-template>
            </kendo-grid-command-column>
            <kendo-grid-column 
            *ngFor="let column of columns"
            field={{column}} title="{{column}}" ></kendo-grid-column> 
           
 <kendo-toolbar>
                <kendo-toolbar-button [text]="'Edit'"
                [showText]="'both'"
                [icon]="'edit'"
                [showIcon]="'both'"
                [primary]="true"
                [look]="look"
                [disabled]="false"
                [tabIndex]="tabIndex"
                ></kendo-toolbar-button>                
            </kendo-toolbar>                    
</kendo-grid>

标签: angulartelerikkendo-grid

解决方案


上面的代码正在工作,在我添加了安装工具栏的命令之后 ng add @progress/kendo-angular-toolbar; 请参考链接:在此处输入链接描述以获取更多信息。谢谢


推荐阅读