Thursday, 28 August 2014

custom paging in gridview

1. Using your favorite graphic editor (Photoshop), create four buttons that will serve as your icon for the First, Previous, Next and Last buttons.

2. Set your GridView control’s AllowPaging property to true.
3. Add a PagingTemplate inside your GridView and insert 4 ImageButton, 1 DropDownList and a Label controls which will serve as your First, Previous, Next, Last, Page No., and Page Picker of your pager.



Your pager should look like this when you render the page.



4. Add an OnDataBound Event to your GridView. This will render and populate your DropDownList (for page picker) and Label (for page count) controls. Implementation can look like this.




5. Next, we implement an OnSelectedIndexChanged on our DropDownList to go to the selected page when a selection is made from our dropdown.

6. In order for you arrow buttons to work. We must implement an OnCommand event of your buttons. Before that we have to specify a CommandArgument properties to each of our buttons.


7. Finally, the OnCommand event implementation.


Summary

Customizing your GridView pager gives you flexibility and fine grain control over your grid listing. Just don’t be afraid of exploring, experimenting and playing with it to achieve the desired functionalities that you want. Happy coding.





No comments:

Post a Comment