Remove From My Forums

Gridview Fixed Header with Scroll bar-VB.NET

Question
0

Sign in to vote

User-1578974752 posted

My grid view is in the div. I can scroll the gridview. The header is also moving after 5 records. How can i make the header fixed,even if there is 30 rows in the gridview in VB.NET . (Grid view have some template textboxes which can be made editable ).Appreciate the Help

<div id="dialog1" style="display: none">
</div>

Wednesday, April 24, 2019 2:38 AM

Answers

User-1174608757 posted

Hi shsu,

According to your description, I have made a sample here. Firstly, if you want to realize that the header fixed and you should add a css class for the header style of Gridview to set its position as absolute. Here is the demo, I hope it could you.

Aspx:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .FixedHeader {
            ;
            font-weight: bold;
        }     
    </style>   
</head>
<body>
    <form id="form1" runat="server">
        
            <div style="width: 100%;  overflow: scroll; height: 151px;">
                <asp:GridView ID="GridView1" runat="server" style="overflow:auto" HeaderStyle-BackColor="YellowGreen" HeaderStyle-CssClass="FixedHeader" Width="118px" OnRowDataBound="GridView1_RowDataBound" Height="223px">

<HeaderStyle CssClass="FixedHeader" BackColor="YellowGreen"></HeaderStyle>

                </asp:GridView>
            </div>

    </form>
</body>
</html>

Then if you set as this ,your first row of Gridview will be covered ,so in code behind:

Public Class Grid1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim dt As DataTable = New DataTable()
            dt.Columns.Add(New DataColumn("Name", GetType(String)))
            dt.Columns.Add(New DataColumn("Age", GetType(String)))
            dt.Columns.Add(New DataColumn("Job", GetType(String)))
            dt.Rows.Add("a1", "b1", "c1")
            dt.Rows.Add("a2", "b2", "c2")
            dt.Rows.Add("a3", "b3", "c3")
            dt.Rows.Add("a4", "b4", "c4")
            dt.Rows.Add("a5", "b5", "c5")
            dt.Rows.Add("a6", "b6", "c6")
            dt.Rows.Add("a6", "b6", "c6")
            dt.Rows.Add("a6", "b6", "c6")
            dt.Rows.Add("a6", "b6", "c6")
            dt.Rows.Add("a6", "b6", "c6")
            dt.Rows.Add("a6", "b6", "c6")
            dt.Rows.Add("a6", "b6", "c6")
            GridView1.DataSource = dt
            GridView1.DataBind()
        End If
    End Sub

    Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.DataRow Then
            If e.Row.RowIndex = 0 Then e.Row.Style.Add("height", "60px")
        End If
    End Sub
End Class

You could see as below:

Best Regards

Wei

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, April 24, 2019 8:45 AM

Answered by:

Gridview Fixed Header with Scroll bar-VB.NET

Question

Answers