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.