Click here to Skip to main content
15,906,455 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello Sir ,

I used following code for Fixed Header in Gridview .Now i am trying to keep scroll position on any postback event .

My Code is :--
<div>
                         <ctrl:exgridview id="grdAdmin" runat="server" autogeneratecolumns="False" backcolor="White"
                             bordercolor="#DEDFDE" borderstyle="None" borderwidth="1px" cellpadding="4" forecolor="Black"
                             gridlines="Vertical" width="700px" onrowdatabound="grdAdmin_RowDataBound" onselectedindexchanged="grdAdmin_SelectedIndexChanged"
                             style="margin-right: 0px">
                         <RowStyle BackColor="#F7F7DE" />
                         <Columns>
                             <asp:TemplateField HeaderText="Menu Name">
                                 <EditItemTemplate>
                                     <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("menuname") %>'></asp:TextBox>
                                 </EditItemTemplate>
                                 <ItemTemplate>
                                     <asp:CheckBox ID="chkMenu" runat="server" AutoPostBack="True" OnCheckedChanged="chkMenu_CheckedChanged" />
                                     <asp:Label ID="lblMenuName" runat="server" Text='<%# Bind("menuname") %>' Width="200px"></asp:Label>
                                 </ItemTemplate>
                                 <HeaderTemplate>
                                     <asp:CheckBox ID="Chkselectall" runat="server" Text=" Click Here To Select All Menu "
                                         AutoPostBack="true" OnCheckedChanged="Chkselectall_CheckedChanged" Width="220px" />
                                 </HeaderTemplate>
                             </asp:TemplateField>
                             <asp:TemplateField HeaderText="View">
                                 <EditItemTemplate>
                                     <asp:CheckBox ID="CheckBox1" runat="server" />
                                 </EditItemTemplate>
                                 <ItemTemplate>
                                     <asp:CheckBox ID="chkView" runat="server" AutoPostBack="True" OnCheckedChanged="chkView_CheckedChanged"
                                         CssClass="chkbox" Width="30px" />
                                 </ItemTemplate>
                             </asp:TemplateField>
                             <asp:TemplateField HeaderText="Save">
                                 <EditItemTemplate>
                                     <asp:CheckBox ID="CheckBox2" runat="server" />
                                 </EditItemTemplate>
                                 <ItemTemplate>
                                     <asp:CheckBox ID="chkSave" runat="server" AutoPostBack="True" CssClass="chkbox" Width="30px"
                                         OnCheckedChanged="chkSave_CheckedChanged" />
                                 </ItemTemplate>
                             </asp:TemplateField>
                             <asp:TemplateField HeaderText="Update">
                                 <EditItemTemplate>
                                     <asp:CheckBox ID="CheckBox3" runat="server" />
                                 </EditItemTemplate>
                                 <ItemTemplate>
                                     <asp:CheckBox ID="chkUpdate" runat="server" AutoPostBack="True" CssClass="chkbox"
                                         Width="30px" OnCheckedChanged="chkUpdate_CheckedChanged" />
                                 </ItemTemplate>
                             </asp:TemplateField>
                             <asp:TemplateField HeaderText="Delete">
                                 <EditItemTemplate>
                                     <asp:CheckBox ID="CheckBox4" runat="server" />
                                 </EditItemTemplate>
                                 <ItemTemplate>
                                     <asp:CheckBox ID="chkDelete" runat="server" AutoPostBack="True" CssClass="chkbox"
                                         Width="30px" OnCheckedChanged="chkDelete_CheckedChanged" />
                                 </ItemTemplate>
                             </asp:TemplateField>
                             <asp:BoundField DataField="menuid" HeaderStyle-BackColor="#E7DFA0" HeaderStyle-BorderColor="#E7DFA0">
                                 <HeaderStyle BackColor="#E7DFA0" BorderColor="#E7DFA0" />
                             </asp:BoundField>
                             <asp:BoundField DataField="Parentid" HeaderStyle-BackColor="#E7DFA0" HeaderStyle-BorderColor="#E7DFA0">
                                 <HeaderStyle BackColor="#E7DFA0" BorderColor="#E7DFA0" />
                             </asp:BoundField>
                         </Columns>
                         <FooterStyle BackColor="#CCCC99" />
                         <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
                         <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
                         <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" HorizontalAlign="Left"  />
                         <AlternatingRowStyle BackColor="White" />
                   </ctrl:exgridview>
                   </div>



and exGridview class
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI;


namespace CustomControls
{
    [    
    ToolboxData("<{0}:ExGridView runat=\"server\"> ")
    ]
    public class ExGridView : GridView
    {
        
        public ExGridView() { }

        public Unit GridHeight { get; set; }

        private String CalculateWidth()
        {
            string strWidth = "auto";
            if (!this.Width.IsEmpty)
            {
                strWidth = String.Format("{0}{1}", this.Width.Value, ((this.Width.Type == UnitType.Percentage) ? "%" : "px"));
            }
            return strWidth;
        }

        private String CalculateHeight()
        {
            string strHeight = "200px";
            if (!this.GridHeight.IsEmpty)
            {
                strHeight = String.Format("{0}{1}", this.GridHeight.Value, ((this.GridHeight.Type == UnitType.Percentage) ? "%" : "px"));
            }
            return strHeight;
        }
        
        protected override void Render(HtmlTextWriter writer)
        {
            //render header row 
            writer.Write("<table border="0" cellspacing="" + this.CellSpacing.ToString() + "" cellpadding="" + this.CellPadding.ToString() + "" style="width:680px;">");
            GridViewRow customHeader = this.HeaderRow;
            
            if (this.HeaderRow != null)
            {
                customHeader.ApplyStyle(this.HeaderStyle);
                if (AutoGenerateColumns == false)
                {
                    int i = 0;
                    foreach (DataControlField col in this.Columns)
                    {
                        customHeader.Cells[i].ApplyStyle(col.HeaderStyle);                        
                        i++;
                    }
                }

                customHeader.RenderControl(writer);
                this.HeaderRow.Visible = false;
                

            }
            writer.Write("</table>");
            
            //render data rows
            writer.Write("<div id="" + ClientID + "_div" style="" +<br mode="hold" />                             "padding-removed5px;overflow-x:hidden;overflow-y:scroll;" +<br mode="hold" /><br mode="hold" />                             "width:640px;" +<br mode="hold" />                             "height:" + CalculateHeight() + ";" +<br mode="hold" />                             "background-color:#FFFFFF;">");
            
            //get the pager row and make invisible
            GridViewRow customPager = this.BottomPagerRow;
            if (this.BottomPagerRow != null)
            {
                this.BottomPagerRow.Visible = false;
            }


            base.Render(writer);
            writer.Write("</div>");
            
            //render pager row
            if (customPager != null && this.PageCount > 0)
            {
                writer.Write("<table border="0" cellspacing="" + this.CellSpacing.ToString() + "" cellpadding="" + this.CellPadding.ToString() + "" style="width:" + CalculateWidth() + "">");
                customPager.ApplyStyle(this.PagerStyle);
                customPager.Visible = true;
                customPager.RenderControl(writer);
                writer.Write("</table>");
            }
        }
    }
}
Posted
Updated 8-Mar-13 6:09am
v2
Comments
Richard C Bishop 8-Mar-13 12:10pm    
I am not sure about that sort of functionality within a gridview, but you can use MaintainScrollPositionOnPostBack="true" in the page directive.
jhez25 8-Mar-13 20:58pm    
<script language="javascript" type="text/javascript">
// This Script is used to maintain Grid Scroll on Partial Postback
var scrollTop;
//Register Begin Request and End Request
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
//Get The Div Scroll Position
Function BeginRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
scrollTop=m.scrollTop;
}
//Set The Div Scroll Position
function EndRequestHandler(sender, args)
{
var m = document.getElementById('divGrid');
m.scrollTop = scrollTop;
}
</script>

Following is the code for the GridView. The Gridview should be placed inside an UpdatePanel and a Div control. The Div allow us to scroll the GridView.
Collapse | Copy Code

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<contenttemplate>
<div id="divGrid" style="overflow: auto; height: 130px">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
DataSourceID="SqlDataSource1" ForeColor="#333333" GridLines="None" Width="235px"
OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<footerstyle backcolor="#5D7B9D" font-bold="True" forecolor="White">
<rowstyle backcolor="#F7F6F3" forecolor="#333333">
<HeaderStyle CssClass="HeaderFreez" />
<columns>
<asp:BoundField DataField="Roll" HeaderText="Roll" SortExpression="Roll" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Langauge" HeaderText="Language" SortExpression="Langauge" />
<asp:CommandField ShowSelectButton="True" />

<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<editrowstyle backcolor="#999999">
<alternatingrowstyle backcolor="White" forecolor="#284775">

</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:DotNetRnDDBConnectionString %>"
SelectCommand="SELECT * FROM [StudDetails]">



Here is the CSS code which is used to freeze the Header of the GridView. Just add this class as a HeaderStyle class of the Gridview. This will freeze the grid's header. We can use it in other cases where we need to freeze the header.
Collapse | Copy Code

.HeaderFreez
{
position:relative ;
top:expression(this.offsetParent.scrollTop);
z-index: 10;
}

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900