Docking a GridView and add a horizontal scrollbar

• Download sample - 171.1 KB

Introduction

Following article shows you how to add a lengthy GridView and dock to available screen area. Docking is not depending on screen resolution.

Background

Following technologies (Jquery, CSS and C#) are used in following application.

Before using the JQuery.

After using JQuery.

Using the code

Add Jquery reference to the master page.

<script language="javascript" type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>

Create a style as follows. As you see width is specified as 200px initially. Later using the JQuery 200px is replaced with width of dvScreenWidth div.

<style type="text/css">
    .GridDock
    {
        overflow-x: auto;
        overflow-y: hidden;
        width: 200px;
        padding: 0 0 17px 0;
    }
</style>

Add a div to measure the screen width.

<div id="dvScreenWidth" visible="false"></div> 

Add another div around the GridView. This div display the scroll bar.

<div class="GridDock" id="dvGridWidth">
     <asp:GridView ID="GridView1" runat="server" Width="100%">
     </asp:GridView>
</div> 

Add the following JQuery scrip. Script will get the width of the dvScreenWidth div and replace the width of dvGridWidth div.

<script type="text/javascript">
    $(document).ready(function() {
       $('#dvGridWidth').width($('#dvScreenWidth').width());
    });
</script>

Populate the Gridview with dummy data.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
 
namespace DockingSample
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable gridDataDataTable = new DataTable();
            gridDataDataTable.Columns.Add("ID");
            gridDataDataTable.Columns.Add("Name");
            gridDataDataTable.Columns.Add("Address1");
            gridDataDataTable.Columns.Add("Address2");
            gridDataDataTable.Columns.Add("Address3");
            gridDataDataTable.Columns.Add("City");
            gridDataDataTable.Columns.Add("Zip");
            gridDataDataTable.Columns.Add("Province");
            gridDataDataTable.Columns.Add("Country");
            gridDataDataTable.Columns.Add("Sex");
            gridDataDataTable.Columns.Add("SNo");
            gridDataDataTable.Columns.Add("TelNo");
            gridDataDataTable.Columns.Add("FaxNo");
            gridDataDataTable.Columns.Add("MobileNo");
            gridDataDataTable.Columns.Add("VehicleNo");
            gridDataDataTable.Columns.Add("Color");
            gridDataDataTable.Columns.Add("Height");
            gridDataDataTable.Columns.Add("Weight");
            gridDataDataTable.Columns.Add("Company");
            gridDataDataTable.Columns.Add("CompanyAddress");
            gridDataDataTable.Columns.Add("CompanyTelNo");
            gridDataDataTable.Columns.Add("CompanyFaxNo");
 
            gridDataDataTable.Rows.Add("1", "Ryan", "City Stree1", "City Stree2", "City Stree1", "Barcelona", "232232", "N/A", "Spain", "Male", "S23343", "2223-232323-22", "2223-232323-22", "2223-232323-22", "2223-232323-22", "Red", "80cm", "75kg", "Lockheed Martin", "City Street3", "800-536145", "800-142587");
            gridDataDataTable.Rows.Add("2", "Ryan", "City Stree1", "City Stree2", "City Stree1", "Barcelona", "232232", "N/A", "Spain", "Male", "S23343", "2223-232323-22", "2223-232323-22", "2223-232323-22", "2223-232323-22", "Red", "80cm", "75kg", "Lockheed Martin", "City Street3", "800-536145", "800-142587");
            gridDataDataTable.Rows.Add("3", "Ryan", "City Stree1", "City Stree2", "City Stree1", "Barcelona", "232232", "N/A", "Spain", "Male", "S23343", "2223-232323-22", "2223-232323-22", "2223-232323-22", "2223-232323-22", "Red", "80cm", "75kg", "Lockheed Martin", "City Street3", "800-536145", "800-142587");
            
            GridView1.DataSource = gridDataDataTable;
            GridView1.DataBind();                      
 
        }
    }
}

Points of Interest

If we set the width as 100% for dvGridWidth div, width of the GridView will take the precedence. Then GridView width will bleed out of the screen and browser scroll will appear.

History

• May 16, 2012: Article created.