Click here to Skip to main content
Click here to Skip to main content

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?

Introduction

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.

Pseudocode

  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.

Screen

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() { }
        </script>
    </asp:content>
    <asp:content id="BodyContent" runat="server" contentplaceholderid="MainContent">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/UIService.asmx" />
            </Services>
        </asp:ScriptManager>
        <h2>
            Welcome to Dynamic Page Size Sample
        </h2>
        <p>
            <a href="SamplePage.aspx">Click Here</a>
        </p>
</asp:content>

Web Service Code

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

///
///<summary>
///Summary description for UIService
///</summary>
[WebService(Namespace = "http://tempuri.org/")]
[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]
[System.Web.Script.Services.ScriptService]
public class UIService : System.Web.Services.WebService {

    public UIService () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod(EnableSession = true)]
    [ScriptMethod()]
    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">
    <h2>
        Dynamic Page size sample</h2>
</div>
<div style="height: 50Px">
    <asp:label id="lblMessage" runat="server" text="Label"></asp:label>
</div>
<div id="GridView">
      <asp:gridview id="GridView1" autogeneratecolumns="true" 
	pagesize="50" runat="server"
            allowpaging="true" onpageindexchanging="GridView1_PageIndexChanging">
        <RowStyle Height="20px" />
    </asp:gridview>
</div>  

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();
        }
        else
        {
            pageSize = 20;
        }

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

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

Conclusion

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.

History

  • 22nd July, 2011: Initial version

License

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

About the Author

Manjunath Shrikantiah
Architect
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

Comments and Discussions

 
QuestionArchaic technology PinmemberSelvin22-Jul-11 4:18 
AnswerRe: Archaic technology PinmemberManjunath Shrikantiah24-Jul-11 18:07 
AnswerRe: Archaic technology PinmemberRaish1-Feb-12 8:56 
QuestionMy vote of 3 Pinmemberspoodygoon22-Jul-11 3:56 
AnswerRe: My vote of 3 PinmemberManjunath Shrikantiah24-Jul-11 18:04 
GeneralRe: My vote of 3 PinmemberIrwan Hassan18-Feb-12 19:47 

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

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

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