Dynamic Gridview Page Size Based on Screen Height

• Download source - 143.22 KB

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.

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

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

• 22^nd July, 2011: Initial version