This is a migrated thread and some comments may be shown as answers.

Pager Template HTML input events

1 Answer 82 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 12 Jun 2019, 10:14 PM

In the paging section( https://www.telerik.com/kendo-angular-ui/components/grid/paging/) there is a directive to further control the pager content of the grid. What I was trying to accomplish is having a HTML number input to allow users to specify their desired page size. However my 'onchange' event is never firing for the input control.

In the Pager Template stack blitz example there is a slider that is able to bind to events.  Is there some limitation on what controls that can be used with the directive?

Event for onchange

setPageSize(value: any ) {
    console.log('value => ' + JSON.stringify(value));
    }

 

HTML for Pager template

01.<ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
02.            <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
03.            <kendo-slider
04.                [showButtons]="false"
05.                [tickPlacement]="'none'"
06.                [max]="totalPages"
07.                [min]="1"
08.                (valueChange)="sliderChange($event)"
09.                [value]="currentPage">
10.            </kendo-slider>
11.            <kendo-pager-info></kendo-pager-info>
12.            <kendo-pager-next-buttons></kendo-pager-next-buttons>
13.            <input type="number" value= {{pageSize}} (onchange)="setPageSize($event)" >
14.</ng-template>

1 Answer, 1 is accepted

Sort by
0
Accepted
Martin
Telerik team
answered on 14 Jun 2019, 12:51 PM
Hi Michael,

Thank you for the provided code snippet.

I went through the code and everything looks correct. I tested it in a Stackblitz example, and the (onchange) event does not fire on my side too. My suggestion is to use the (input) event: 

<ng-template  kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
   ...
   Page Size: <input type="number" value= {{pageSize}}
   (input)="setPageSize($event.target.value)" >
</ng-template>

In the handled function parse the input to a number:

public setPageSize(size) {
  this.pageSize = Number(size);
}

Check the updated example:

https://stackblitz.com/edit/angular-wuuxdw?file=app/app.component.ts

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

Regards,
Martin
Progress Telerik
Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or