Enable/Disable pager nav buttons in a grid by default

[Abhinav]

Hi,

I am working on kendo grid where i have a scenario in which i want a grid to show record based on batch of record ( i mean, if there are 300 records in a database then when a grid loads i want to show 10 records at a time, i have an working api for this and grid is responding well to that). I need next batch of data to be shown by hitting the next or last button in pager nav in the grid but it is disabled by default (if have set pagesize for grid is set to 15). 

I am trying to remove k-state-disabled class for grid-pager div for next and last button, which is not working for me (may be i am missing something).

(  $('.k-grid-pager').find('a.k-pager-last').removeClass("k-state-disabled"); ). I tried changing the class name as well but that also doesn't work.

Can you suggest a way to enable pager-nav's next and last button by default, irrespective to the records in the grid?

[Dimiter Topalov]

Hello Abhinav,

You can remove the 'k-state-disabled' class in a handler of the dataBound event of the Kendo UI Grid:

...
dataBound: function(e){
setTimeout(function(){
e.sender.find('.k-pager-wrap.k-grid-pager > a').removeClass('k-state-disabled');
})
}
...

The setTimeout() function is used to ensure the 'next' and 'last' buttons have already received the 'k-state-disabled' class, so it can be removed.

I hope this helps.

Regards,
Dimiter Topalov
Telerik

[Dimo]

P.S. Actually the correct code should read:

...
dataBound: function(e){
 setTimeout(function(){
   e.sender.wrapper.find('.k-pager-wrap.k-grid-pager > a').removeClass('k-state-disabled');
 });
}
...

Regards,
Dimo
Telerik

 

 

[Abhinav]

Thanks Dimiter and Dimo.

It worked :)