Wednesday, August 18, 2010

Freeze Gridview’s header and column similar to excel



This article describes how to fix GridView’s columns and header in .Net 2008 or below version.

There are many good articles available to fix columns and header, here are some of them.

http://www.dotnetspider.com/resources/38294-How-Fix-Header-Column-GridView.aspx

http://mattberseth.com/blog/2007/09/freezing_gridview_column_heade_1.html

If we have less number of records on the screen we can use anyone of them but if we want to display thousands of records on the screens, none of these will be helpful.

After spending many hours I found solution that I have explained here, I hope that you would like it.

Step 1: Divide Grid in to two part
Part 1: Display Freeze columns
Part 2: Column which will be scrolled.
Step 2: Now GridView’s Header will not be attached with grid, divide them in different table.


Fix Col

Col 1Col 2Col 3Col 4…
0 0
1 0
2 0
3 0
4 0
5 0

0 10 20 30 4
1 11 1 31 4
2 1 2 22 32 4
3 13 23 33 4
4 14 24 34 4
5 15 25 35 4
Live Demo

Note: Here in blogger we are not able to give exact demo which will be viewed in your asp.net page, but I hope you would love it when you  see magic in your asp.net site.

Name
Vimal
Crystal
Nirman
Maulik
Sandip
Abhilash
Ashish
Adam
Carlos
Daniel
Francisco
Hallvard

PhoneEmailAddressStreetCityStateCountryPincode

Aspx Code:


<%@Page Language="C#" AutoEventWireup="true"CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.divScrollbar
{
background-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
}
.Header
{
padding-left: 1px;
font-weight: bold;
background-color: #B5D1F0;
}
.font
{
font-family: Arial,Helvetica, sans-serif;
font-size: 8pt;
}
.GridHeight
{
height: 137px;
}
.gridData, .gridDatatrtd, .gridDatatr th
{
border: solid 1px #80B0E6;
}
</style>


<script type="text/javascript">
function OnScrollGV(div) {
var div2 = document.getElementById("left");
div2.scrollTop = div.scrollTop;
div2 = document.getElementById("divHeader");
div2.scrollLeft = div.scrollLeft;
}


functionOnScrollFreeze(div) {
var div2 = document.getElementById("right");
div2.scrollTop = div.scrollTop;
}
</script>
</head>
<body>
<formid="form1" runat="server">
<div class="font">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="Header" rules="all" style="height: 30px; width: 100%">
<tr style="text-align: center;">
<th>
Name
</th>
</tr>
</table>
<div id="left" style="overflow-x: auto; overflow-y: hidden; width: 100%; vertical-align: top" class="divScrollbar GridHeight" onscroll="OnScrollFreeze (this)">
<asp:GridView ID="gvFreeze" runat="server" AutoGenerateColumns="False" CssClass="gridData" EnableViewState="False" ShowHeader="False" ShowFooter="True" Width="130%" DataSourceID="LinqPerson">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
</Columns>
<FooterStyle Wrap="True"></FooterStyle>
</asp:GridView>
</div>
</td>
<td>
<div id="divHeader" style="overflow: auto; overflow-x: hidden; text-align: left; width: 100%; height: 30px;">
<table cellpadding="0" cellspacing="0" class="Header" rules="all" style="width: 130%; height: 30px">
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="Header" rules="all" style="width: 100%; height: 30px">
<tr style="text-align: center;">
<th style="width: 10%;">
Phone
</th>
<th style="width: 10%;">
Email
</th>
<th style="width: 20%;">
Address1
</th>
<th style="width:20%;">
Address2
</th>
<th style="width: 10%;">
Street
</th>
<th style="width: 5%;">
City
</th>
<th style="width: 5%;">
State
</th>
<th style="width: 10%;">
Country
</th>
<th style="width: 10%;">
Pincode
</th>
</tr>
</table>
</td>
<td style="width: 20px">
&nbsp
</td>
</tr>
</table>
</div>
<div id="right" style="overflow-y: scroll; width: 100%;" onscroll="OnScrollGV (this)" class="GridHeight">
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="false" CssClass="gridData"
EnableViewState="false" Width="130%" ShowHeader="false" ShowFooter="true" FooterStyle-Wrap="true"
DataSourceID="LinqPerson">
<Columns>
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" FooterStyle-Width="10%" />
<asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" FooterStyle-Width="10%" />
<asp:BoundField DataField="Address1" HeaderText="Address1" SortExpression="Address1" FooterStyle-Width="20%" />
<asp:BoundField DataField="Address2" HeaderText="Address2" SortExpression="Address2" FooterStyle-Width="20%" />
<asp:BoundField DataField="Street" HeaderText="Street" SortExpression="Street" FooterStyle-Width="10%" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" FooterStyle-Width="5%" />
<asp:BoundField DataField="State" HeaderText="State" SortExpression="State" FooterStyle-Width="5%" />
<asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" FooterStyle-Width="10%" />
<asp:BoundField DataField="Pincode" HeaderText="Pincode" SortExpression="Pincode" FooterStyle-Width="10%" />
</Columns>
<FooterStyle Wrap="True"></FooterStyle>
</asp:GridView>
</div>
</td>
</tr>
</table>
</div>
<asp:LinqDataSource ID="LinqPerson" runat="server" ContextTypeName="DataClassesDataContext" TableName="Persons">
</asp:LinqDataSource>
</form>
</body>
</html>



==============================================
Shradhdha Zalavadiya |Senior Software Engineer

WebMingle Technology
Accelerated by knowledge. Driven by values.
www.webMingle.in
Posted by webmingle at 1:43 PM
Labels: , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)