Search code examples
angulartelerikkendo-grid

Addition of Custom button in Kendo Grid using Kendotoolbar and kendo toolbar button


I'm setting up a page with kendo grid, which contains kendotoolbar and kendo toolbar button, all I need to generate custom buttons which helps to generate excel report, mailing, etc. The problem is kendo grid and kendo toolbars are working separately , but not together in below code(only kendo grid is visible). Used ng add @progress/kendo-angular-toolbar for the addition of the 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>

Solution

  • The Above Code is working , after i added the command of the installation of toolbar ng add @progress/kendo-angular-toolbar; Please Refer the link: enter link description here for more info. Thanks