0

I have an ASP.NET gridview and I would like to have a vertical and horizontal scrollbar while the header remains fixed. I having issues with the size of the table from the gridview since it is fairly large. I had the gridview covered in a div using:

style="overflow-x:auto; overflow-y:auto; width:1100px; height:400px;"

The above shows the horizontal and vertical scrollbars but does not allow me keep the headers fixed.

I've tried many different types heights and widths but the horizontal and vertical scrollbars don't appear, and header keeps getting covered up.

        #pcoTable table tbody {
            display: block;
            height: 400px;
            overflow: auto;
        }

        #pcoTable table thead tr {
            display: block;
            position: relative;
        }

        #pcoTable {
            width: 2368px;
            overflow: hidden;
            position: relative;
            left: 0px;
            top: 0;
        }

Example of the div I tried to use:

<div id="pcoTable">
 <asp:Panel ClientIDMode="Static" ID="pCOData" runat="server" CssClass="dataTable">


            <asp:GridView ID="gridPCO" runat="server" AutoGenerateColumns="false" 
                ShowHeaderWhenEmpty="true"     
                ShowFooter="true"
                DataKeyNames="CourseOfferingId" >
                <Columns>
                    <asp:TemplateField HeaderText="CourseOfferingId" Visible="false">
                      <ItemTemplate>
                         <asp:TextBox ID="iTxtCourseOfferingId" runat="server" Text='<%#Bind("CourseOfferingId") %>'/>                          
                     </ItemTemplate>
                     <EditItemTemplate>
                         <asp:TextBox ID="txtCourseOfferingId" width="70px"  runat="server" Text='<%#Bind("CourseOfferingId") %>'/>
                     </EditItemTemplate>
                     <FooterTemplate>
                         <asp:TextBox ID="txtCourseOfferingId" width="70px"  runat="server" Text='<%#Bind("CourseOfferingId") %>'/>
                     </FooterTemplate>
                 </asp:TemplateField>

                    <asp:TemplateField ItemStyle-Width="400px">
                     <ItemStyle Width="400px" />
                    <EditItemTemplate>
                        <asp:LinkButton ID="ButtonUpdate" runat="server" CommandName="Update"  Text="Update"  />
                        <asp:LinkButton ID="ButtonCancel" runat="server" CommandName="Cancel"  Text="Cancel" />
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:LinkButton ID="ButtonEdit" runat="server" CommandName="Edit"  Text="Edit"  />
                        <asp:LinkButton ID="ButtonDelete" runat="server" CommandName="Delete" Text ="Delete" />
                    </ItemTemplate>
                    <FooterTemplate>

                 .............More Columns Here...............

                </Columns>
            </asp:GridView>
    </asp:Panel>
</div>

I need the horizontal and vertical scrollbars to appear while the header remains fixed.

Juan
  • 75
  • 9
  • Does this answer your question? [Fixed GridView Header with horizontal and vertical scrolling in asp.net](https://stackoverflow.com/questions/7625706/fixed-gridview-header-with-horizontal-and-vertical-scrolling-in-asp-net) – Mikhail Oct 29 '19 at 21:42
  • With horizontal scroll bar, headers should move,shouldn't it? otherwise we cannot identify column name and data – Ajoe Oct 30 '19 at 04:51

0 Answers0