Reset page index to zero on every new request

[Rajesh]

Hi,

We are using kendo grid for Angular and displaying the results based on some input criteria (input some fields in the form and click on button to fetch results and display in grid). For the first time grid displays the first page.

If we change the search criteria and fetches the results, the grid still displays the previous page index and not reset to first page.

EX: We set the pageSize as 10. In the first search request we get 100 records. So displayed 10 pages. I select 8'th page

       In the second search request we get only 40 records displaying 4 pages. But no data is displayed in the grid unless we click on any of the 4 paging buttons         as it is still considering the page index as 8.

 

How can we reset page index to first page  with every new request that is fetching new data. We are using "kendoGridBinding" to bind the data to the grid

<kendo-grid [style.height.%]="100" #grid
     [kendoGridBinding]="gridData"

     [pageSize]="10"
     [pageable]="true"

 

     <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>
          <kendo-pager-page-sizes [pageSizes]="[10, 50, 100, 200]"></kendo-pager-page-sizes>     

    </ng-template>

</kendo-grid>

 

Thanks in advance,

Rajesh

[Svet]

Hi Rajesh,

The kendoGridBinding directive is used to handle internally the (dataStateChange) event of the grid and we can use it only with the default filtering, sorting, grouping, and paging data operations as demonstrated in the following article:
https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-built-in-directive.

If we want to implement custom filtering we will need to create the required CompositeFilterDescriptor that can contain multiple FilterDescriptors  and manually process the data (once we click the button to fetch the filtered results) using the built in process method.

I hope this helps. Let me know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Rajesh]

Hi Svetlin,

Thanks for the response.

I don't know whether my last post is clear to you. Sorry if it was not clear

To be clear i am listing the steps below

1) I have a dropdown with few values. I will select one value from the dropdown and click on a button. Then i will query my database based on the dropdown value and populates the grid with the results fetched from database

Assume that i got 100 records displaying 10 pages (pageSize=10). I selected 8'th page and i could see the records in page 8. This workflow is fine

2)Now i select a different value from the dropdown and click on the button again. Now again i will query my database based on the dropdown value and fetches the records and bind to grid. (Please remember that i did the second step when i was in page 8)

Assume that i got only 40 records in the second step displaying 4 pages. But my grid does not show the data unless i click on any of 4 paging buttons as it is still considering the page index as 8. (4 paging buttons are displayed after fetching the results but none of them selected and no data is displayed)

I query a third party service that will give me all the relevant records for the dropdown value when i click on the button

I hope i am clear. 

Do you have any example for this to display the first page automatically after performing the second step.

Thanks,

Rajesh

[Svet]

Hi Rajesh,

Thank you for the additional details.

Check the following issue from our public GitHub repository, that provides a solution to the reported behavior:
https://github.com/telerik/kendo-angular/issues/743

Basically we need to update the skip of the grid through the DataBindingDirective directive once we change the grid's data. Check the following example demonstrating this approach:
https://stackblitz.com/edit/angular-czu2cd?file=app%2Fapp.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Rajesh]

Thank you Svetlin.

This is what i was looking for

[Ryan]

Hi,

I have the same scenario as described above but he problem I see is with the menu filtering. If menu filtering is applied on the grid and I update the grid data while on page > 1 then the grid is empty. It properly sets it back to page 1 and shows the data if no filter is applied. I've tried resetting the grid filtering but that doesn't seem to do anything.

 @ViewChild(GridComponent, { static: false }) GridComponent: GridComponent;

processReport(result: ReportBase): void {

this.dataBinding.skip = 0;

    this.gridView = this.gridData;

 

 

 

[Ryan]

 @ViewChild(GridComponent, { static: false }) GridComponent: GridComponent;

processReport(): void {

    this.dataBinding.skip = 0;

    this.gridView = this.gridData;

    this.GridComponent.filter = { logic: 'and', filters: [] };

}

 

[Ryan]

Setting the filter on the DataBindingDirective fixed the behavior I was seeing. Thanks.

processReport(): void {
    this.dataBinding.skip = 0;

    this.dataBinding.filter  = { logic: 'and', filters: [] };

    this.gridView = this.gridData;
}

[Chris]

[quote]Svetlin said:Hi Rajesh,

Thank you for the additional details.

Check the following issue from our public GitHub repository, that provides a solution to the reported behavior:
https://github.com/telerik/kendo-angular/issues/743

Basically we need to update the skip of the grid through the DataBindingDirective directive once we change the grid's data. Check the following example demonstrating this approach:
https://stackblitz.com/edit/angular-czu2cd?file=app%2Fapp.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

[/quote]

There seems to be a problem in the example you gave.

if you click 'Sample Products' button it does go to page 1 as described. However the pagination controls then no longer work properly - clicking page 2 updates the info to say '11 - 20 of 20 items' but the grid still displays products 1-10.

Clicking the 'Products' button to load the longer list then seems to get it working again.

Is there a way to fix this?

[Svet]

Hi Chris,

I will paste my answer here from the previously discussed private thread on the same topic.

Managing the current page of the Grid can be manually achieved by passing the desired value to the [skip] property of the Grid when needed. Please check the following updated example demonstrating that approach:

https://stackblitz.com/edit/angular-czu2cd-jpsw1x?file=app%2Fapp.component.ts

Instead of getting a reference to the directive it is more suitable to directly update the value passed to the [skip] property of the Grid. Also make sure to update the skip accordingly on each (dataStateChange) event:

 

    <kendo-grid
      #grid
      [kendoGridBinding]="gridData"
      (dataStateChange)="dataStateChange($event)"
      [pageSize]="10"
      [skip]="state.skip"
...

 public state: State = { take: 10, skip: 0 };

  dataStateChange(e, grid) {
    this.state = e;
  }

 

I hope this helps. Please let me know in case any further information is needed for this case. Thank you.

Regards,
Svetlin
Progress Telerik