Click here to Skip to main content
13,195,594 members (74,706 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


14 bookmarked
Posted 22 Jul 2011

Dynamic Gridview Page Size Based on Screen Height

, 22 Jul 2011
Rate this:
Please Sign up or sign in to vote.
How can you change the page size of a grid view based on screen height?


How can you change the page size of a gridview based on screen height? I never thought of this until I came across this requirement in one of my projects. After some thinking, I was able to get it working. There are few preconditions to it. But, it is workable in most of the real time projects. The below section will try to cover how to implement it.


  1. Get the screen or window height. This can be done either in home page or the landing page.
  2. Store window height in a session variable. This will done by calling a web service from JavaScript.
  3. Use the window height to calculate page size. You will also have to consider, top offset required for header, bottom offset required for footer, row height, etc.


When rendered on a 1280 X 800 screen resolution, page size is 21.

1280X800.png - Click to enlarge image

When rendered on a 1280 X 1024 screen resolution. page size is 33.

1280X1024.png - Click to enlarge image

Code on Home/Login/Landing Page

The following code will be used to get and store the window height. This can be in your home page or landing page.

Code: On document ready function, SaveWindowHeight web service method will be called to store the window height in a session variable. Once set, it can be used across all pages of the application. Make sure that you add the script manager and have a reference to the web service.

<asp:content id="HeaderContent" runat="server" contentplaceholderid="HeadContent">
        <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {
                var windowHeight = $(window).height();
                UIService.SaveWindowHeight(windowHeight, OnCompleted);

            function OnCompleted() { }
    <asp:content id="BodyContent" runat="server" contentplaceholderid="MainContent">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
                <asp:ServiceReference Path="~/UIService.asmx" />
            Welcome to Dynamic Page Size Sample
            <a href="SamplePage.aspx">Click Here</a>

Web Service Code

SaveWindowHeight method will store the window height in a session variable.

///Summary description for UIService
[WebService(Namespace = "")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, 
// uncomment the following line. 
// [System.Web.Script.Services.ScriptService]
public class UIService : System.Web.Services.WebService {

    public UIService () {

        //Uncomment the following line if using designed components 

    [WebMethod(EnableSession = true)]
    public void SaveWindowHeight(string height)
        HttpContext.Current.Session["WindowHeight"] = height;

Gridview Page

Here is the .aspx page code, which has a simple gridview in it.

<div style="height: 50Px">
        Dynamic Page size sample</h2>
<div style="height: 50Px">
    <asp:label id="lblMessage" runat="server" text="Label"></asp:label>
<div id="GridView">
      <asp:gridview id="GridView1" autogeneratecolumns="true" 

	pagesize="50" runat="server"

            allowpaging="true" onpageindexchanging="GridView1_PageIndexChanging">
        <RowStyle Height="20px" />

Code Behind Page

The following code provides how window height can be used to manipulate the page size.

public partial class SamplePage : System.Web.UI.Page
    int pageSize = 0;
    int gridTopOffset = 100;
    int gridBottomOffset = 50;
    int rowHeight = 20;
    DataTable dt;
    protected void Page_Load(object sender, EventArgs e)
        if (Session["WindowHeight"] != null)
            pageSize = Convert.ToInt32((Convert.ToInt32
	    (Session["WindowHeight"]) - gridTopOffset - gridBottomOffset) / 20) - 3;
            lblMessage.Text = "PageSize is:" + pageSize.ToString();
            pageSize = 20;

        if (!IsPostBack)
            GridView1.PageSize = pageSize;
            dt = UIHelper.GetData(300);
            GridView1.DataSource = dt;

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
        GridView1.PageIndex = e.NewPageIndex;
        GridView1.PageSize = pageSize;
        GridView1.DataSource = UIHelper.GetData(300); ;


This can be used as a powerful UI feature, when user wants his page size to vary based on this screen rather than the pre-defined one. Along with this, you can also have a drop down, which allows users to change the size to his needs.

Note: What happens if there is a gridview on the login/home/landing page itself? How do we set the window height? I am still thinking about it. Please put in your ideas.


  • 22nd July, 2011: Initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Manjunath Shrikantiah
India India
9+ plus years of experience in IT industry. This includes experience in architecting, designing and developing solutions on Web and desktop application platforms

You may also be interested in...

Comments and Discussions

QuestionVery Professional solution ! Pin
Isemann8-Oct-16 4:14
memberIsemann8-Oct-16 4:14 
SuggestionThere's a much easier way. Pin
Member 100987223-Mar-15 17:54
memberMember 100987223-Mar-15 17:54 
GeneralRe: There's a much easier way. Pin
RASHIDMZ22-May-16 2:00
memberRASHIDMZ22-May-16 2:00 
QuestionArchaic technology Pin
Selvin22-Jul-11 4:18
memberSelvin22-Jul-11 4:18 
AnswerRe: Archaic technology Pin
Manjunath Shrikantiah24-Jul-11 18:07
memberManjunath Shrikantiah24-Jul-11 18:07 
AnswerRe: Archaic technology Pin
Raish1-Feb-12 8:56
memberRaish1-Feb-12 8:56 
QuestionMy vote of 3 Pin
spoodygoon22-Jul-11 3:56
memberspoodygoon22-Jul-11 3:56 
AnswerRe: My vote of 3 Pin
Manjunath Shrikantiah24-Jul-11 18:04
memberManjunath Shrikantiah24-Jul-11 18:04 
GeneralRe: My vote of 3 Pin
Irwan Hassan18-Feb-12 19:47
memberIrwan Hassan18-Feb-12 19:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171019.1 | Last Updated 22 Jul 2011
Article Copyright 2011 by Manjunath Shrikantiah
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid