Question

我在角度2应用程序中有一个kendo网格组件，它动态地加载网格中的数据。在网格中我有一个kendogridbinding，其中pageSize设置为10.所以假设如果我有100个项目它显示1- 10的100，我正在寻找100可点击，所以当我将鼠标悬停在100以上时，手符号出现，点击它会显示所有100项。

grid.comp.html

<kendo-grid #grid [kendoGridBinding]="gridData" [pageSize]="10" [pageable]="true" style="cursor:pointer">
            <kendo-grid-column *ngFor="let column of columns" [field]="getColumnField(column)" [title]="getColumnTitle(column)" [width]="getColumnWidth(column)">
                <template kendoGridHeaderTemplate let-column="column">
                    <span style=color:red; [title]="column.title" (click)="onTemplateSpanClick($event)">{{column.title}} </span>
                </template>
                <template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                    <span *ngIf="column!== 'Status'" [title]="column.title">         
                         <span [title]="column.title">
                   {{dataItem[column]}}
                   <!-- <span [innerHTML]="dataItem[column]"></span>  -->
                   </span>
                    </span>
                </template>
            </kendo-grid-column>
        </kendo-grid>

![image of pagesize, 5 should be clickable ] 1

Answer 1

您可以使用PagerTemplate并提供所需内容（以及自定义元素的相应事件处理程序和CSS），例如：

<ng-template 
        kendoPagerTemplate 
        let-totalPages="totalPages" 
        let-currentPage="currentPage"
        let-skip="skip"
        let-total="total">
         <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
         <kendo-pager-numeric-buttons [buttonCount]="10"></kendo-pager-numeric-buttons>
         <kendo-pager-next-buttons></kendo-pager-next-buttons>
         <span>{{ skip + 1 }} - {{ skip + pageSize }} of <span class="custom" (click)="showAll()">{{ total }} items</span></span>
      </ng-template>

EXAMPLE

kendo网格中的PageSize - 使其可单击以显示显示的项目数

1 个答案: