How to Fixed GridView’s Header and Footer when scrolling in vb.net?

Use below 2 Css Classes for GridView Header and footer.


.gridHeader {
font-weight:bold;
background-color: Green;
position:relative;
top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);
}

.gridFooter {
font-weight:bold;
background-color: Green;
position:relative;

bottom:expression(scrollBottom(this.parentNode.parentNode.parentNode.parentNode));
}

Use below JavaScript to compute Footer’s Position.


<script language="javascript" type="text/javascript">

function scrollBottom(p_oElem)
{
return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight;

}
</script>

Create GridView inside a Panle.


<asp:Panel runat="server" ID="pnlContainer" ScrollBars="Auto" Height="150px" Width="400">
<asp:GridView ShowFooter="True" runat="server" Width="96%" ID="gvDemo"

AutoGenerateColumns="False">
<HeaderStyle CssClass="gridHeader" />
<FooterStyle CssClass="gridFooter" />
<Columns>
<asp:TemplateField HeaderText="a1">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("a1") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
a1 Footer Here
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="a2">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("a2") %>'></asp:Label>
</ItemTemplate>
<FooterTemplate>
a2 Footer Here
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>

In the Page_Load function we Bind the data source to GridView in Code Behide:


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim dtbl As New DataTable
dtbl.Columns.Add("a1")
dtbl.Columns.Add("a2")
Dim dr As DataRow
For i As Integer = 0 To 10
dr = dt.NewRow
dr(0) = "a1" & i
dr(1) = "a2" & i
dtbl.Rows.Add(dr)
Next
Me.gvDemo.DataSource = dtbl
Me.gvDemo.DataBind()
End Sub

About the Author

avatar