How to customize Pager button

2 posts, 1 answers
  1. Francis
    Francis avatar
    15 posts
    Member since:
    Mar 2011

    Posted 09 Jul 2014 Link to this post

    Hi,

    is it possible to change the buttons of the Pager (in the bottom of the grid, see attached image) ?


    Thank you !

  2. Answer
    Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 14 Jul 2014 Link to this post

    Hi Francis,

    Visual Style Builder does not provide an option to separately customize all button images. You have few options:

    1. You can take the original sprite image(sprite.gif) and replace the default icons with your own icons by respecting the sprite's convention (please refer to the attached screenshot).

    2. If you don't want to use sprite and rather use separate images you can define a css rule for each button:

    CSS:

    /*"First page" image*/
    div.RadGrid_{Custom_skin_name} .rgPageFirst{
       background: url('the_path_to_the_image') 0 0 no-repeat;
    }
     
    /*"Previous" image*/
    div.RadGrid_{Custom_skin_name} .rgPagePrev{
        background: url('the_path_to_the_image') 0 0 no-repeat;
    }
     
    /*and so on for all images*/

    According to me the first approach is more optimal and easier.

    Regards,
    Venelin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top