Angular 2 Kendo UI Telerik grid paging reloads the page

Question

I have a Kendo-ui (Angular 2) grid (paging enabled) ,when i click on a page button, it reloads the page (the href attribute value i s '#' in the button links). how to fix this issue ?

grid:

                        <kendo-grid [data]="items" [pageSize]="state.take" [filter]="state.filter" [skip]="state.skip" [sort]="state.sort" [sortable]="true" [pageable]="{ buttonCount: 8, info: true}" [scrollable]="'none'" (dataStateChange)="dataStateChange($event)" (filterChange)="onFilterChanged($event)"
                        (pageChange)="onGridPageChange($event)">

pageChangeEvent:

onGridPageChange(e: PageChangeEvent) {
    this.state.skip = e.skip;
    this.state.take = e.take;
    this.loadInvoiceItems();
}

Answer 1

I did encounter this problem before. Please use DataStateChangeEvent instead.

public dataStateChange(state: DataStateChangeEvent): void {
    Object.assign(this.state, state);
    this.loadInvoiceItems();
}