HIRANKUMAR
Top achievements
Rank 1
Rank 1
HIRANKUMAR
asked on 12 May 2021, 10:02 AM
Hello,
I am using three kendo grids in separate tabs. Paging is using in all three kendo grids. When the page loads, paging is working as expected
However, on tab change mode of paging changed. But if we are going to resize the page, paging will appear. Please see the attached screen shots.
Recently upgraded from Angular 8 to 11. We got this issue after the upgrade.
Angular version: 11.2.3
Kendo UI Grid :
"@progress/kendo-angular-grid": "5.0.2",
<nav ngbNav #nav="ngbNav" type="pills" (navChange)="toggleTabs($event)" class="users_role_managers">
<ng-container ngbNavItem="tab-1">
<a ngbNavLink>{{'lblManageUsers' | labelTranslate}}</a>
<ng-template ngbNavContent>
<div class="container-fluid product_grid_kendo m-0 mt-4 user_grid_kendo">
<kendo-grid #kendoGrid1 class="" [data]="manageUsersGridData" [resizable]="true" [scrollable]="'scrollable'"
[sortable]="true" [filterable]="true" [pageable]="true" [pageSize]="manageUsersGridstate.take"
[skip]="manageUsersGridstate.skip" [sort]="manageUsersGridstate.sort"
[filter]="manageUsersGridstate.filter" (dataStateChange)="manageUsersGridDataStateChange($event)">
<kendo-grid-column field="displayName" title="{{'lblDisplayName' | labelTranslate}}" width="150">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
[showOperators]="false">
</kendo-grid-string-filter-cell>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div class="pointer mainbg-text-primary" (click)="performCrudOperationOnUser('EDIT', dataItem)">
<a>{{ dataItem.displayName}}</a>
</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="email" title="{{'lblEmail' | labelTranslate}}" width="150">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
[showOperators]="false">
</kendo-grid-string-filter-cell>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="userRoles" title="{{'lblRoles' | labelTranslate}}" width="250">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
[showOperators]="false">
</kendo-grid-string-filter-cell>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="modifiedBy" title="{{'lblLastUpdatedBy' | labelTranslate}}" width="200">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
[showOperators]="false">
</kendo-grid-string-filter-cell>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="modifiedOn" title="{{'lblLastUpdatedDate' | labelTranslate}}" width="160">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-date-filter-cell [column]="column" [filter]="filter" operator="eq"
[showOperators]="false">
</kendo-grid-date-filter-cell>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
{{ dataItem.modifiedOnString }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="Edit" title="Edit" width="70" [filterable]="false" [sortable]="false">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div class="text-center">
<span class="editicn-trim" (click)="performCrudOperationOnUser('EDIT',dataItem)">
<span class="edit_icon pointer ml-15" aria-hidden="true"></span>
</span>
</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="Delete" title="Delete" width="70" [filterable]="false" [sortable]="false">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div class="text-center">
<span class="delete_icon pointer" aria-hidden="true"
(click)="performCrudOperationOnUser('DELETE',dataItem)"></span>
</div>
</ng-template>
</kendo-grid-column>
</kendo-grid>
</div>
</ng-template>
</ng-container>
<ng-container ngbNavItem="tab-2">
<a ngbNavLink>{{'lblManageRoles' | labelTranslate}}</a>
<ng-template ngbNavContent>
<div class="container-fluid product_grid_kendo product_grid_kendomng m-0 mt-4 user_grid_kendo">
<kendo-grid #kendoGrid class="" [data]="manageRolesGridData" [resizable]="true" [scrollable]="'scrollable'"
[sortable]="true" [filterable]="true" [pageable]="true" [pageSize]="manageRolesGridstate.take"
[skip]="manageRolesGridstate.skip" [sort]="manageRolesGridstate.sort"
[filter]="manageRolesGridstate.filter" (dataStateChange)="dataStateChange($event)">
<kendo-grid-column field="roleName" title="{{'lblRoleName' | labelTranslate}}" width="">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
[showOperators]="false">
</kendo-grid-string-filter-cell>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="modifiedBy" title="{{'lblLastUpdatedBy' | labelTranslate}}" width="300">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
[showOperators]="false">
</kendo-grid-string-filter-cell>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="modifiedOn" title="{{'lblLastUpdatedDate' | labelTranslate}}" width="180">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-date-filter-cell [column]="column" [filter]="filter" operator="eq"
[showOperators]="false">
</kendo-grid-date-filter-cell>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
{{ dataItem.modifiedOnString }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="Edit" title="Edit" width="80" [filterable]="false" [sortable]="false">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div class="text-center">
<span class="editicn-trim" (click)="performCrudOperationonRole('EDIT',dataItem)">
<span class="edit_icon pointer ml-15" aria-hidden="true"></span>
</span>
</div>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="Delete" title="Delete" width="80" [filterable]="false" [sortable]="false">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div class="text-center">
<span class="delete_icon pointer" aria-hidden="true"
(click)="performCrudOperationonRole('DELETE',dataItem)"></span>
</div>
</ng-template>
</kendo-grid-column>
</kendo-grid>
</div>
</ng-template>
</ng-container>
<ng-container ngbNavItem="tab-3" *ngIf="this.kpmgFunctionId===1000 && IsSuperAdmin">
<a ngbNavLink>{{'lblManageAdministrators' | labelTranslate}}</a>
<ng-template ngbNavContent>
<div class="container-fluid product_grid_kendo m-0 mt-4 user_grid_kendo">
<kendo-grid #kendoGrid class="" [data]="manageSystemUsersGridData" [resizable]="true"
[scrollable]="'scrollable'" [sortable]="true" [filterable]="true" [pageable]="true"
[pageSize]="manageSystemUsersGridstate.take" [skip]="manageSystemUsersGridstate.skip"
[sort]="manageSystemUsersGridstate.sort" [filter]="manageSystemUsersGridstate.filter"
(dataStateChange)="manageSystemUsersGridDataStateChange($event)">
<kendo-grid-column field="displayName" title="{{'lblDisplayName' | labelTranslate}}" width="150">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
[showOperators]="false">
</kendo-grid-string-filter-cell>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<!-- <div class="pointer mainbg-text-primary"> -->
{{ dataItem.displayName}}
<!-- </div> -->
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="email" title="{{'lblEmail' | labelTranslate}}" width="150">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
[showOperators]="false">
</kendo-grid-string-filter-cell>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="modifiedBy" title="{{'lblLastUpdatedBy' | labelTranslate}}" width="200">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains"
[showOperators]="false">
</kendo-grid-string-filter-cell>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="modifiedOn" title="{{'lblLastUpdatedDate' | labelTranslate}}" width="160">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-date-filter-cell [column]="column" [filter]="filter" operator="eq"
[showOperators]="false">
</kendo-grid-date-filter-cell>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
{{ dataItem.modifiedOnString }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="Delete" title="Delete" width="70" [filterable]="false" [sortable]="false">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div class="text-center">
<span class="delete_icon pointer" aria-hidden="true"
(click)="performCrudOperationOnSystenUser('DELETE',dataItem)"></span>
</div>
</ng-template>
</kendo-grid-column>
</kendo-grid>
</div>
</ng-template>
</ng-container>
</nav>
Any help is really appreciated.
Thanks
Hirankumar