Change Grid Size Dynamically Based on Screen Resolution

Introduction

This article explains how to change Grid Size dynamically based on screen resolution.

A condition is often put before the developers that the Grid size should change depending on the Screen Resolution of the user so that the user can easily access the Website at any Screen Resolution. Today I will show you something by which this problem will be solved and that too is in a simpler way.

Let's see the procedure required to create such an application.

Step 1. First of all, I worked on a webpage on which a JavaScript-ready function is created in which the height will be sent to the WebService method of a WebService. Its code is as follows.

<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.SaveNewHeight(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>
</asp:Content>

Here you can see that after creating the Ready function I had passed the reference of a WebService to which the WebService method was passed.

Step 2. The WebService method will be used to store the window height in a Session Variable, but first check whether your project has a WebService, if not then right-click on your WebSite/Project and choose "Add New Item".

Now in this WebService, the Webservice method will be used to pass the window height in a Session variable.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class UIService : System.Web.Services.WebService
{
    public UIService()
    {
    }

    [WebMethod(EnableSession = true)]
    [ScriptMethod()]
    public void SaveNewHeight(string height)
    {
        HttpContext.Current.Session["WindowHeight"] = height;
    }
}

Step 3. Now I will add one more page to our application with a Grid View in it. Write this code on this new Web Page.

<div style="height: 50px;">
    <asp:Label ID="showMessage" 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>

Here I had declared a Label and a GridView; the label will be used to show the Page and Grid Size.

Step 4. Now we will work on the code behind this page, and write this code in the code behind.

int gridSize = 0;
int gridTop = 100;
int gridBottom = 50;
DataTable dt;

protected void Page_Load(object sender, EventArgs e)
{
    if (Session["WindowHeight"] != null)
    {
        gridSize = Convert.ToInt32((Convert.ToInt32(Session["WindowHeight"]) - gridTop - gridBottom) / 20) - 3;
        showMessage.Text = "Grid and Page Size Will be: " + gridSize.ToString();
    }
    else
    {
        gridSize = 20;
    }

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

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

Here first I calculated the window and then the page size was set depending on the window size.

At the end of coding for the page, index changing is done, this will be relevant when the user clicks on the next page.

Until now our application has been created and is ready to be executed.

Output

At the start, my Screen Resolution is 1920 * 1080.

So, on running the application I got the Grid with a page size of 38.

But now I am changing the Screen Resolution to 1600 * 900.

So, on running the application I got a Grid of page Size 29.