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 had 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. It's 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>

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/Poject and choose to "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 used to show the Page and Grid Size.

Step 4

Now we will work on the code behind of this page, 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 had calculated the window and then the page size is set depending on the window size.

At the end coding for the page index changing is done, this will be reelvant when the user will click on the next page.

Until now our application is 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.