locked
Gridview Fixed Header with Scroll bar-VB.NET RRS feed

  • Question

  • 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