Gridview Performance improvement with Custom Paging

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()

GridView1.Databind();

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 performance

A 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

Default value of @startIndex is set to 0 and @recordCount is set to 10 which means it will fetch 10 records starting from 0th row.


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.


PopulateData(GridView1.PageIndex, 10);
Note: GridView1.PageIndex gives the Index value which is 0 by Default

Next Button Click

Now 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

PopulateData(GridView1.PageIndex * 10, 10);      
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 Click

Similarly Previous Button will decrement the GridView1.PageIndex by 1 on every click till the value is 0. 

First Button Click

Clicking on First button will call method 
PopulateData(0, 10); 

Last Button Click

Clicking on Last button will call method 
PopulateData(TotalRecordCount()-10, TotalRecordCount());  
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 Paging

Editing 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.


PopulateData(GridView1.PageIndex*10,10)


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.