Hello -
We have a requirement to use kendo grid and its working perfectly. We have a filter button separated to outside of kendo grid and we fire an event to filter the results. I know that grid with filter and paging on inside kendo-grid working fine, but our requirement is to separate the filter out side of grid for better customization and better look.
When we filter to get all the claims with 500 records, we have the paging, when we are in 45th page to see 451 to 460 records, if you change the filter drop down to get current year claims with total of 100 records, it doesn't display since the grid is still on 45th page (Current claims only have 100 records and only 10 pages are there, so grid says no records). How to reset the pager on the filter button click (Its a separate button outside of grid).?
Grid code : -
<kendo-grid #gridClaims [kendoGridBinding]="claims"
[pageSize]="10"
[pageable]="{
previousNext: true,
class:'d-flex d-row justify-content-center'
}"
[sortable]="{allowUnsort: disable, mode: 'single'}"
[sort]="sort"
[selectable]="true"
(selectionChange)="onRowSelect($event)"
(sortChange)="sortChange($event)">
<kendo-grid-column field="dateofService" title="Date Of Service" width="120" format="{0:MM/dd/yyyy}">
<ng-template kendoGridHeaderTemplate>Date Of Service <span ng-reflect-ng-class="[object Object]" id="defaultSortSpan" class="k-icon k-i-sort-desc-sm" hidden="true"></span> </ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<a (click)="getClaimDetails(dataItem.internalClaimNumber)" href="javascript:void(0)"> {{dataItem.dateofService | date: 'MM/dd/yyyy'}}</a>
</ng-template>
</kendo-grid-column>
<ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
<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>
<kendo-pager-info></kendo-pager-info>
</ng-template>
</kendo-grid>
Filter button code -
<button id="filterClaimsBtn" class="btn btn-primary btn-md pl-5 pr-5" type="submit" (click)="filterClaims(claimType,memberId,claimDateRange)">Filter claims list</button>
How can I reset the grid page to first in my filterClaims method (typescript)?
Thank you.
1 Answer, 1 is accepted
When the Grid data is both paged and filtered, you will need to update the Grid "skip" too depending on the desired behavior - the built in behavior after filtering is to reset the skip to 0 so that the first page of the processed data is displayed:
https://stackblitz.com/edit/angular-g1w3g5?file=app/app.component.ts
For example when the data is filtered from the outside, you can manually set state.skip to 0 when replacing the data collection the Grid is bound to with the filtered data, e.g.:
https://stackblitz.com/edit/angular-g1w3g5-64hcdp?file=app/app.component.ts
Further details about the Grid paging functionality are available in the following section of our documentation:
https://www.telerik.com/kendo-angular-ui/components/grid/paging/
It is also worth mentioning that when multiple Grid data operations-related functionalities (like paging, sorting, filtering and grouping) are enabled, the most convenient way to handle all in a single place is handling the dataStateChange event and processing the Grid data in accordance with the incoming state:
https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/
The approach of filtering the data via an external UI can also be integrated - you can call the dataStateChange event handler when the external filter is changed, passing it the current state with skip 0 and new filter configuration (filter descriptors, based on the value of the external filtering UI).
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik