Gridview provides excellent features to show the data on webpage. Few of the popular features are sorting, column arrangements, styles, item templates, editing, updating and deleting.
Get the data from SQL, DataList, Arrays and bind the data to Gridview and it displays the data in required format.
GridView1.DataSource = SQL command Result OR List() OR Array()
When the data is huge and you bind the data with GridView, it can impact the performance of your page. To Overcome that, GridView Paging is provided but it fetches all the records and bind it to GridView and when you click on page number, it shows the records of that page index.
GridView paging is also not good solution and hits the performance as it fetches all the records once and then bind it to GridView.
Here is the solution which do custom paging and fetches the data when required.
|GridView with Custom Paging|
GridView is showing 10 records by default. Clicking on 'Next' button will show next 10 records. Clicking on 'Previous' button will show previous 10 records. First button will take you to First Page and Last button will take you to Last page of GridView.
Trick starts with SQL Server Stored Procedure. We have to write a stored procedure which will return the required records.
SQL Paging to improve performanceA kind of SQL Paging is done which takes two parameters
1. startIndex (from where to start)
2. recordCount (how many records to fetch)
|SQL Paging using Stored Procedure|
Now time to write code to fetch the data and populate it to GridView.
|Populate GridView on PageLoad|
Here GridView is being populated on Page_Load method and PopulateData method is pulling the records from SQL Server.
Note: GridView1.PageIndex gives the Index value which is 0 by Default
Next Button ClickNow when we will click on 'Next' Button, we will increment the GridView1.PageIndex by 1 and next 10 results will be shown.
|Next Button Click Code Behind|
where GridView1.PageIndex is incremented by 1 and gives results as 1. Multiply by 10 will give result as 10. Now records will start from 10 and will display next 10 records.
Previous Button ClickSimilarly Previous Button will decrement the GridView1.PageIndex by 1 on every click till the value is 0.
First Button ClickClicking on First button will call method
Last Button ClickClicking on Last button will call method
where TotalRecordCount() method returns total count of records in sql table.
After doing Cutom Paging, Editing, Deleting and Updating can also be done on fetched records.
GridView Edit / Delete / Update after Custom PagingEditing can also be done easily after doing custom paging.
It is very much similar to editing we do in Gridview. The only difference is that we are
calling method PopulateData after finding index of edited row in GridView.
The reason we are calling this method because if we will not call this method how GridView will come to know which record to edit when page postback will happen on click on Edit button of GridView.
|GridView Edit after Custom Paging|
As we have written the code for Edit, similarly you can write the code for cancel, delete and update event of GridView.
Happy Coding !!
It would be honor for me if you could provide your valuable comments if you liked / not liked /suggestions to improve.