Gridview with fixed header and both horizontal and vertical scrollbars

Question

User-1767698477 posted

I tried adding one suggestion which was to put css like so into the head:

 <style type="text/css">
  .FixedHeader {
    ;
    font-weight: bold;
 }     
</style> 

and into the gridview this

CssClass="FixedHeader"

But it obliterated my scroll bars alltogether and made a real mess.

Is there a solution for this?

 <div style="overflow-x: auto; height: 150px; width: 700px">
                        <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" CellPadding="3" HorizontalAlign="Center" HeaderStyle- OnRowDataBound="Gridview1_rowdatabound" DataKeyNames="LiabID" RowStyle-Wrap="False" HeaderStyle-Wrap="False">
                            <PagerStyle Wrap="True" />
                            <RowStyle HorizontalAlign="Center" />
                            <Columns>
                                <asp:TemplateField ItemStyle-Width="20px" HeaderText="">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="editbtn" ImageUrl="~/templates/images/small-pencil.jpg" runat="server" Width="25" Height="25" OnClick="editbtn_Click" CommandArgument='<%# Eval("LiabID") %>' />
                                        <asp:HiddenField ID="HiddenField1" runat="server" Value='<%#Bind("LiabID") %>' />
                                    </ItemTemplate>
                                    <HeaderTemplate>
                                        <asp:ImageButton ID="insertbtn" ImageUrl="~/templates/images/add-icon.png" runat="server" Width="20" Height="20" OnClick="insertbtn_Click" />

                                    </HeaderTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField ItemStyle-Width="30px" HeaderText="">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="deletebtn" ImageUrl="~/templates/images/delete-icon.png" runat="server" Width="20" Height="20" OnClick="deletebtn_Click" OnClientClick="return confirm('Are you sure you want to delete this record?');" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
                                <asp:BoundField DataField="Othertype" HeaderText="Other type" SortExpression="Othertype" />
                                <asp:BoundField DataField="Name" HeaderText="Company" SortExpression="Name" />
                                <asp:BoundField DataField="Acctnum" HeaderText="Acct #" SortExpression="Acctnum" />
                                <asp:BoundField DataField="Mopmt" HeaderText="Payment" SortExpression="Mopmt" />
                                <asp:BoundField DataField="Balance" HeaderText="Balance" SortExpression="Balance" />
                                <asp:BoundField DataField="Molefttopay" HeaderText="Months left" SortExpression="Molefttopay" />
                                <asp:BoundField DataField="Paidatclosing" HeaderText="Paid @ close" SortExpression="Paidatclosing" />
                                <asp:BoundField DataField="PaidPTC" HeaderText="Paid PTC" SortExpression="PaidPTC" />
                                <asp:BoundField DataField="Resub" HeaderText="Resubordinate" SortExpression="Resub" />
                                <asp:BoundField DataField="Omit" HeaderText="Omit" SortExpression="Omit" />
                                <asp:BoundField DataField="REOnum" HeaderText="REO #" SortExpression="REOnum" />
                            </Columns>
                        </asp:GridView>
                    </div>

Answer 1

User-939850651 posted

Hi sking,

All scroll bars are disappear? I created a simple example for testing, and found that what you describe is just to make the header line out of the document flow, and nothing else changes. All scroll bars are still there, and the grid view becomes less beautiful.

When the content cannot be fully displayed in the viewing area, there will be a scroll bar, and your requirement seems to go against this.

If you need to display all the columns, there will be no horizontal scroll bar. But this will not affect the vertical scroll bar, it depends on the amount of data.

So I have some confusion about your description, if possible, please provide more details.

Best regards,

Xudong Peng

Answer 2

User-1767698477 posted

Hi XuXDong,

Well, I have been googling all over for this. I found this which is what I want but this is html not really asp.net

https://www.dotnetbull.com/2011/11/scrollable-gridview-with-fixed-headers.html

And then then I found this:

https://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-in-ASP.Net.aspx

which has the vertical scroll bar. My question is what happens when a 5th column is added?  Will a horizontal scroll bar appear?  I have not tried to implement his code in my gridview yet. If you scroll to the bottom of the page you will see live examples in both of these pages.

Answer 3

User-939850651 posted

Hi sking,

which has the vertical scroll bar. My question is what happens when a 5th column is added?  Will a horizontal scroll bar appear?

I think what you mentioned is the second one. When you add the fifth column, scroll bars will not appear in the GridView or title table. It is actually a splicing effect of two tables. You need to manually add the title column instead of frame generation.

So I think what you might want to achieve is as described in the first article.

Best regards,

Xudong Peng

Answer 4

User-1767698477 posted

I could not get the first article to work. He is populating the gridview from the code behind. My gridview loads initially on the aspx page with a sql datasource.  He shows to add the below code after gridview.databind().

ScriptManager.RegisterStartupScript(Page, this.GetType(), "Key", "<script>MakeStaticHeader('" + GridView1.ClientID + "', 400, 950 , 40 ,true); </script>", False);

Answer 5

User-1767698477 posted

I decided to widen my gridview and implement the following. It is very close, however I want there to be Cellpadding or it really looks bad . This is the article here at

https://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-in-ASP.Net.aspx

If someone can possibly explain how I can line things up, that would be really helpful.

 <div>
                        <table cellspacing="0" cellpadding="2" rules="all" border="1" id="tblHeader"
                            style="font-family: Arial; font-size: 10pt; width: 875px; color: black; border-collapse: collapse; height: 100%;">
                            <tr>
                                <td style="width: 25px; text-align: center">
                                    <asp:ImageButton ID="insertbtn" ImageUrl="~/templates/images/add-icon.png" runat="server" Width="20" Height="20"  OnClick="insertbtn_Click" /></td>
                                <td style="width: 25px; text-align: center; border-left: none; border-right: none;"></td>
                                <td style="width: 150px; text-align: center">Company</td>
                                <td style="width: 170px; text-align: center">Type</td>
                                <td style="width: 75px; text-align: center">Acct #</td>
                                <td style="width: 75px; text-align: center">Payment</td>
                                <td style="width: 75px; text-align: center">Balance</td>
                                <td style="width: 50px; text-align: center">Mo left</td>
                                <td style="width: 50px; text-align: center">Paid Close</td>
                                <td style="width: 50px; text-align: center">Paid PTC</td>
                                <td style="width: 50px; text-align: center">Resub</td>
                                <td style="width: 40px; text-align: center">Omit</td>
                                <td style="width: 40px; text-align: center">REO#</td>
                            </tr>
                        </table>
                    </div>

                    <div style="overflow-x: auto; height: 150px; width: 885px">
                        <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" CellPadding="2" HorizontalAlign="Center" OnRowDataBound="Gridview1_rowdatabound" DataKeyNames="LiabID" RowStyle-Wrap="False" HeaderStyle-Wrap="False" ShowHeader="false" ShowFooter="true" FooterStyle-BackColor="Black" FooterStyle-ForeColor="Black" FooterStyle-Height="5">
                            <PagerStyle Wrap="True" />
                            <RowStyle HorizontalAlign="Center" />
                            <Columns>
                                <asp:TemplateField ItemStyle-Width="25px" HeaderText="">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="editbtn" ImageUrl="~/templates/images/small-pencil.jpg" runat="server" Width="20" Height="20" OnClick="editbtn_Click" CommandArgument='<%# Eval("LiabID") %>' />
                                    </ItemTemplate>

                                </asp:TemplateField>
                                <asp:TemplateField ItemStyle-Width="25px" HeaderText="">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="deletebtn" ImageUrl="~/templates/images/delete-icon.png" runat="server" Width="20" Height="20" OnClick="deletebtn_Click" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="Company" HeaderText="Company" SortExpression="Company" ItemStyle-Width="150px" />
                                <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" ItemStyle-Width="170px" />
                                <asp:BoundField DataField="Acctnum" HeaderText="Acct #" SortExpression="Acctnum" ItemStyle-Width="75px" />
                                <asp:BoundField DataField="Mopmt" HeaderText="Payment" SortExpression="Mopmt" ItemStyle-Width="75px" />
                                <asp:BoundField DataField="Balance" HeaderText="Balance" SortExpression="Balance" ItemStyle-Width="75px" />
                                <asp:BoundField DataField="Molefttopay" HeaderText="Months left" SortExpression="Molefttopay" ItemStyle-Width="50px" />
                                <asp:BoundField DataField="Paidatclosing" HeaderText="Paid @ close" SortExpression="Paidatclosing" ItemStyle-Width="50px" />
                                <asp:BoundField DataField="PaidPTC" HeaderText="Paid PTC" SortExpression="PaidPTC" ItemStyle-Width="50px" />
                                <asp:BoundField DataField="Resub" HeaderText="Resubordinate" SortExpression="Resub" ItemStyle-Width="50px" />
                                <asp:BoundField DataField="Omit" HeaderText="Omit" SortExpression="Omit" ItemStyle-Width="40px" />
                                <asp:BoundField DataField="REOnum" HeaderText="REO#" SortExpression="REOnum" ItemStyle-Width="40px" />
                            </Columns>
                        </asp:GridView>
                    </div>

Answer 6

User-939850651 posted

Hi sking,

In your title table, there seems to be an empty column, I think this is not needed.

<td style="width: 25px; text-align: center; border-left: none; border-right: none;"></td>

And the cells in the GridView will not split any word according to the width. If the length of a single word exceeds the set column width, there will be problems. And setting HeaderStyle-Wrap to false may also cause its columns to not correspond correctly.

Reserve enough space for the GridView to display it correctly. like this:

<div>
            <table cellspacing="0" cellpadding="2" rules="all" border="1" id="tblHeader"
                style="font-family: Arial; font-size: 10pt; width: 906px; color: black; border-collapse: collapse; height: 100%;">
                <tr>
                    <td style="width: 25px; text-align: center">
                        <asp:ImageButton ID="insertbtn" ImageUrl="~/templates/images/add-icon.png" runat="server" Width="20" Height="20" OnClick="insertbtn_Click" /></td>
                    <%--<td style="width: 25px; text-align: center; border-left: none; border-right: none;"></td>--%>
                    <td style="width: 150px; text-align: center">Company</td>
                    <td style="width: 170px; text-align: center">Type</td>
                    <td style="width: 75px; text-align: center">Acct #</td>
                    <td style="width: 75px; text-align: center">Payment</td>
                    <td style="width: 75px; text-align: center">Balance</td>
                    <td style="width: 50px; text-align: center">Mo left</td>
                    <td style="width: 50px; text-align: center">Paid Close</td>
                    <td style="width: 50px; text-align: center">Paid PTC</td>
                    <td style="width: 50px; text-align: center">Resub</td>
                    <td style="width: 40px; text-align: center">Omit</td>
                    <td style="width: 40px; text-align: center">REO#</td>
                </tr>
            </table>
        </div>

        <div style="overflow-x: auto; height: 150px; width: 923px">
            <%--DataSourceID="SqlDataSource1"   OnRowDataBound="Gridview1_rowdatabound"  --%>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="2" ShowHeader="false" OnRowDataBound="GridView1_RowDataBound" CaptionAlign="Left" HorizontalAlign="Center" RowStyle-Wrap="false" HeaderStyle-Wrap="false">
                <PagerStyle Wrap="True" />
                <RowStyle HorizontalAlign="Center" />
                
                <Columns>
                    <asp:TemplateField ItemStyle-Width="25px"  HeaderText="">
                        <ItemTemplate>
                            <asp:ImageButton ID="imgbtn" ImageUrl="~/img/pencil.gif" runat="server" Width="20" Height="20" OnClick="imgbtn_Click" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="Company" HeaderText="Company"  SortExpression="Company" ItemStyle-Width="150px"/>
                    <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" ItemStyle-Width="170px" />
                    <asp:BoundField DataField="Acctnum" HeaderText="Acct #" SortExpression="Acctnum"  ItemStyle-Width="75px" />
                    <asp:BoundField DataField="Mopmt" HeaderText="Payment" SortExpression="Mopmt" ItemStyle-Width="75px"   />
                    <asp:BoundField DataField="Balance" HeaderText="Balance" SortExpression="Balance" ItemStyle-Width="75px"   />
                    <asp:BoundField DataField="Molefttopay" HeaderText="Months left" SortExpression="Molefttopay" ItemStyle-Width="50px"   />
                    <asp:BoundField DataField="Paidatclosing" HeaderText="Paid @ close" SortExpression="Paidatclosing" ItemStyle-Width="50px"   />
                    <asp:BoundField DataField="PaidPTC" HeaderText="Paid PTC" SortExpression="PaidPTC" ItemStyle-Width="50px"   />
                    <asp:BoundField DataField="Resub" HeaderText="Resubordinate" SortExpression="Resub" ItemStyle-Width="50px"   />
                    <asp:BoundField DataField="Omit" HeaderText="Omit" SortExpression="Omit" ItemStyle-Width="40px"   />
                    <asp:BoundField DataField="REOnum" HeaderText="REO #" SortExpression="REOnum" ItemStyle-Width="40px"   />
                </Columns>
            </asp:GridView>
        </div>

Result:

Best regards,

Xudong Peng

Answer 7

User-1767698477 posted

It's interesting that by deleting that column you were able to line it up with the header. However, that column you deleted is the delete column and you deleted it! There should be 13 columns and yours has 12.

The column you deleted is right above the red x delete button column. No deleting!

Will you please explain how you arrived at your 906px? I count 850per the columns. I assume the difference has to do with the cellspacing which is set to 2. Does the 1pixel border factor into this?

Based on your 906 number which is 56 more than the columns added together, I recomputed be numbers. I also enlarged the last 2 columns to make them the same at 50px. This is now perfectly lined up except for the middle column acct num which is off by 1 pixel. Can you tell me how to fix ?

 <div>
                        <table cellspacing="0" cellpadding="2" rules="all" border="1" id="tblHeader"
                            style="font-family: Arial; font-size: 10pt; width: 954px; color: black; border-collapse: collapse; height: 100%;">
                            <tr>
                                <td style="width: 25px; text-align: center">
                                    <asp:ImageButton ID="insertbtn" ImageUrl="~/templates/images/add-icon.png" runat="server" Width="20" Height="20" OnClick="insertbtn1_Click" /></td>
                                <td style="width: 25px; text-align: center; border-left: none; border-right: none;"></td>
                                <td style="width: 150px; text-align: center">Company</td>
                                <td style="width: 170px; text-align: center">Type</td>
                                <td style="width: 75px; text-align: center">Acct #</td>
                                <td style="width: 75px; text-align: center">Payment</td>
                                <td style="width: 75px; text-align: center">Balance</td>
                                <td style="width: 50px; text-align: center">Mo left</td>
                                <td style="width: 50px; text-align: center">Paid Close</td>
                                <td style="width: 50px; text-align: center">Paid PTC</td>
                                <td style="width: 50px; text-align: center">Resub</td>
                                <td style="width: 50px; text-align: center">Omit</td>
                                <td style="width: 50px; text-align: center">REO#</td>
                            </tr>
                        </table>
                    </div>

                    <div style="overflow: auto; height: 150px; width: 971px">
                        <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" CellPadding="2" HorizontalAlign="Center" OnRowDataBound="Gridview1_rowdatabound" DataKeyNames="LiabID" RowStyle-Wrap="False" HeaderStyle-Wrap="False" ShowHeader="false" ShowFooter="true" FooterStyle-BackColor="Black" FooterStyle-ForeColor="Black" FooterStyle-Height="5">
                            <PagerStyle Wrap="True" />
                            <RowStyle HorizontalAlign="Center" />
                            <Columns>
                                <asp:TemplateField ItemStyle-Width="25px" HeaderText="">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="editbtn" ImageUrl="~/templates/images/small-pencil.jpg" runat="server" Width="20" Height="20" OnClick="editbtn1_Click" CommandArgument='<%# Eval("LiabID") %>' />
                                    </ItemTemplate>

                                </asp:TemplateField>
                                <asp:TemplateField ItemStyle-Width="25px" HeaderText="">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="deletebtn" ImageUrl="~/templates/images/delete-icon.png" runat="server" Width="20" Height="20" OnClick="deletebtn1_Click" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="Company" HeaderText="Company" SortExpression="Company" ItemStyle-Width="150px" />
                                <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" ItemStyle-Width="170px" />
                                <asp:BoundField DataField="Acctnum" HeaderText="Acct #" SortExpression="Acctnum" ItemStyle-Width="75px" />
                                <asp:BoundField DataField="Mopmt" HeaderText="Payment" SortExpression="Mopmt" ItemStyle-Width="75px" />
                                <asp:BoundField DataField="Balance" HeaderText="Balance" SortExpression="Balance" ItemStyle-Width="75px" />
                                <asp:BoundField DataField="Molefttopay" HeaderText="Months left" SortExpression="Molefttopay" ItemStyle-Width="50px" />
                                <asp:BoundField DataField="Paidatclosing" HeaderText="Paid @ close" SortExpression="Paidatclosing" ItemStyle-Width="50px" />
                                <asp:BoundField DataField="PaidPTC" HeaderText="Paid PTC" SortExpression="PaidPTC" ItemStyle-Width="50px" />
                                <asp:BoundField DataField="Resub" HeaderText="Resubordinate" SortExpression="Resub" ItemStyle-Width="50px" />
                                <asp:BoundField DataField="Omit" HeaderText="Omit" SortExpression="Omit" ItemStyle-Width="50px" />
                                <asp:BoundField DataField="REOnum" HeaderText="REO#" SortExpression="REOnum" ItemStyle-Width="50px" />
                            </Columns>
                        </asp:GridView>
                    </div>

Answer 8

User-1767698477 posted

Also, I just learnt that after deleting records to only 5 remaining, the vertical scrollbar goes away and I'm left with this ugly picture below. Is there a way to make the scroll bar remain someway?

Answer 9

User-939850651 posted

Hi sking,

Also, I just learnt that after deleting records to only 5 remaining, the vertical scrollbar goes away and I'm left with this ugly picture below. Is there a way to make the scroll bar remain someway?

Yes it is. The width of the element is affected by padding and borders. In the case of 13 columns, I use 955px and 972px which can work well. You could refer to CSS BOX Model.

And if you want to always display the scroll bar, you can use the overflow-x and overflow-y properties to display the horizontal and vertical scroll bar, but when the content is higher than the width and smaller than the display size, you cannot operate the scroll bar.

like this:

<div style="overflow-x: scroll; overflow-y:scroll; height: 150px; width: 972px">
    <asp: GridView>
    ...
    ...
    </asp: GridView>
</div>

Best regards,

Xudong Peng