Enable/Disable pager nav buttons in a grid by default

4 posts, 0 answers
  1. Abhinav
    Abhinav avatar
    2 posts
    Member since:
    Mar 2015

    Posted 08 Mar Link to this post

    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?

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    356 posts

    Posted 10 Mar Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Abhinav
    Abhinav avatar
    2 posts
    Member since:
    Mar 2015

    Posted 28 Mar Link to this post

    Thanks Dimiter and Dimo.

    It worked :)

Back to Top
Kendo UI is VS 2017 Ready