Scrollable Gridview with fixed Header and Footer using Javascript
Scrollable Gridview with fixed Header and Footer using Javascript..?
In this artical i'm trying to explain scrollable gridview with fixed header and footer using Javascript function and CSS style sheets and place GridView inside Div tags. And set GridView ShowFooter property to true.
Scrollable Gridview with fixed Header and Footer
I have a Gridview, in my GridView i have thousands of Rows. Previously i'm displaying my Grid using pagging concept. But now my comapny is not like that why because using Pagging the page is post back on each and every page selection. To Overcome the above issue now i'm introduced the concept scrollable GridView with fixed header and footer. In my page it self header and footer are visible and if i want to see all rows using scrolling i want to move top to bottom and check the data. Using this we overcome the postback. Here i'm explain step by step process of this.STEP 1:
Create CSS style sheets:
<style type="text/css">
.GVFixedHeader { font-weight:bold; background-color: Green; position:relative;
top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}
.GVFixedFooter { font-weight:bold; background-color: Green; position:relative;
bottom:expression(getScrollBottom(this.parentNode.parentNode.parentNode.parentNode));}
</style>STEP 2:
And call this class in GridView HeaderStyle and FoterStyle properties itself. Use the below sample code
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" CssClass="GVFixedFooter"/>
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" CssClass="GVFixedHeader" />STEP 3:
Creat Javascript function for fixing header and footer in a page.
<script language="javascript" type="text/javascript">
function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
var tbl = document.getElementById(gridId);
if (tbl) {
var DivHR = document.getElementById('DivHeaderRow');
var DivMC = document.getElementById('DivMainContent');
var DivFR = document.getElementById('DivFooterRow');
//*** Set divheaderRow Properties ****
DivHR.style.height = headerHeight + 'px';
DivHR.style.width = (parseInt(width) - 16) + 'px';
DivHR.style.position = 'relative';
DivHR.style.top = '0px';
DivHR.style.zIndex = '10';
DivHR.style.verticalAlign = 'top';
//*** Set divMainContent Properties ****
DivMC.style.width = width + 'px';
DivMC.style.height = height + 'px';
DivMC.style.position = 'relative';
DivMC.style.top = -headerHeight + 'px';
DivMC.style.zIndex = '1';
//*** Set divFooterRow Properties ****
DivFR.style.width = (parseInt(width) - 16) + 'px';
DivFR.style.position = 'relative';
DivFR.style.top = -headerHeight + 'px';
DivFR.style.verticalAlign = 'top';
DivFR.style.paddingtop = '2px';
if (isFooter) {
var tblfr = tbl.cloneNode(true);
tblfr.removeChild(tblfr.getElementsByTagName('tbody')[0]);
var tblBody = document.createElement('tbody');
tblfr.style.width = '100%';
tblfr.cellSpacing = "0";
tblfr.border = "0px";
tblfr.rules = "none";
//*****In the case of Footer Row *******
tblBody.appendChild(tbl.rows[tbl.rows.length - 1]);
tblfr.appendChild(tblBody);
DivFR.appendChild(tblfr);
}
//****Copy Header in divHeaderRow****
DivHR.appendChild(tbl.cloneNode(true));
}
}
</script>STEP 4:
Design a page and place your GridView inside DIV tags. See the below sample for this.
<div id="DivRoot" align="left">
<div style="overflow: hidden;" id="DivHeaderRow">
</div>
<div style="overflow:auto;" onscroll="OnScrollDiv(this)" id="DivMainContent" >
<asp:GridView runat="server" ShowFooter="true" ID="gvdetails"
AutoGenerateColumns="false">
<RowStyle BackColor="#EFF3FB" />
<PagerStyle BackColor="#2461BF" ForeColor="White"
HorizontalAlign="Center" /<
<HeaderStyle CssClass="GVFixedHeader" />
<FooterStyle CssClass="GVFixedFooter" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Material" HeaderStyle-Width="8%">
<ItemTemplate>
<asp:Label ID="lblMaterial" runat="server" Text='<%# Bind_Material(Convert.ToString(Eval("Material")))%>'/>
<asp:Label ID="lblMaterial_Id" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Material_Id") %>' Visible="false"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Items" HeaderStyle-Width="8%" HeaderStyle-HorizontalAlign="center">
<ItemTemplate>
<asp:Label ID="lblItem" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Item") %>'/>
<asp:Label ID="lblItem_Id" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Item_Id") %>' Visible="false"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Grade" HeaderStyle-Width="8%" HeaderStyle-HorizontalAlign="center">
<ItemTemplate>
<asp:Label ID="lblGrade" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Grade") %>'/>
<asp:Label ID="lblGrade_Id" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Grade_Id") %>' Visible="false"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="DivFooterRow" style="overflow:hidden">
</div>
</div>STEP 5:
And in Code behind call that javascript, use the below lines of code
protected void Page_Load(Object sender, EventArgs e)
{
DataTable dt1= // bind your Data;
if(dt1.Rows.Count>0)
{
gvdetails.DataSource=dt1;
gvdetails.DataBind();
}
else
{
DataTable dt = new DataTable();
dt.Columns.Add("Material");
dt.Columns.Add("Material_Id");
dt.Columns.Add("Grade");
dt.Columns.Add("Grade_Id");
dt.Columns.Add("Item");
dt.Columns.Add("Item_Id");
DataRow dr;
dr = dt.NewRow();
dt.Rows.Add(dt.NewRow().ItemArray);
gvdetails.DataSource = dt;
gvdetails.DataBind();
gvdetails.Rows[0].Visible = false;
gvdetails.Rows[0].Controls.Clear();
}
ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader('" + gvdetails.ClientID + "', 250, 1000 , 27 ,true); </script>", false);
}
Use the above sample code and see the result..
Attachments
Follow