Skip to main content

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

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


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


  1. Thank you so much for posting these steps, this is exactly what I was looking for.



Post a Comment

Popular posts from this blog

Could not load file or assembly 'Microsoft.Web.Infrastructure'

Could not load file or assembly 'Microsoft.Web.Infrastructure, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The system cannot find the file specified. What 'Micorosoft.Web.Infrastructure' does? This dll lets HTTP modules register at run time. Solution to above problem: Copy 'Micorosoft.Web.Infrastructure' dll in bin folder of your project and this problem should be resolved. If you have .Net framework installed on machine, this dll should be present on it. You can search for this dll and copy it in your active project folder.   Alternatively,  you can install this dll using nuget package manager PM> Install-Package Microsoft.Web.Infrastructure -Version 1.0.0 Happy coding!!

Create chatbot in 20 minutes using RASA

This blog will help you create a working chatbot with in 20 minutes. For creating chatbot we need following libraries to be installed- >> Python3 >> Pip3 >> Rasa Lets start installing all libraries & dependencies which are need for creating chatbot. Note: I have used MAC, therefore sharing commands related to it. You can install it on Windows, Linux or any other operating system using respective commands. 1. Install Python3 > brew install python3 > python --version #make sure you have python3 installed 2. Install Pip3 > curl -O > sudo python3 If you get issue related to Frameoworks while installing pip, follow below steps -  > cd /usr/local/lib > mkdir Frameworks > sudo chown -R $(whoami) $(brew --prefix)/* Once installed check pip3 version > pip3 --version After python3 and pip3 is succeffully installed, proceed to next steps. 3. Install Rasa > pip

Running dotnet on Linux

Server: Linux, version SUSE 12 To run dotnet code on Linux, the first and foremost task is to "Install Mono package on linux". Note: Mono is an open implementation of Microsoft's .Net framework, including compilers. It uses the same development libraries on Linux which are being used on Windows. Therefore, if you code and compiled some mono code on Linux,  it will work for Windows as well.       zypper is a package installation tool which is used in this scenario. If zypper is not available, check which package manager tool is installed on server. Furthermore, to verify if zypper is installed or not, type zypper on command line which will show all options if zypper is available on server else it will show 'command not found'. zypper ar -r The above command will download from mentioned URL in a new repository. Here 'ar' stands for 'add repo'. After adding it to repos