How to add a vertical scrollbar to a asp:GridView control?

Question

User-2071692902 posted

Hi folks,

I am working on asp.net C# and I have a asp:GridView. How to add a vertical scrollbar to a asp:GridView control? 

div style=" overflow: scroll ;">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" CssClass="auto-style6" EnableModelValidation="True">
                <Columns>
                    <asp:BoundField DataField="id" HeaderText="No." ReadOnly="True"/>
                    <asp:BoundField DataField="username" HeaderText="Username" />
                    <asp:BoundField DataField="password" HeaderText="Password" />
                </Columns>
                <FooterStyle BackColor="White" ForeColor="#000066" />
                <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                <RowStyle ForeColor="#000066" />
                <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
            </asp:GridView>
              </div>

Thanks very much

Answer 1

User-943250815 posted

With overflow: scroll you already have scroll bars, but since there is no width or height defined on DIV they are at rightmost and bottom of screen
As an example just try style="height: 300px; width: 300px; overflow: auto;", I´m using "auto" because it will give scrool as necessary.

But I suggest you enable GridView Paging and set PageSize to a best fit number of records

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="25" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" CssClass="auto-style6" EnableModelValidation="True">
                <Columns>
                    <asp:BoundField DataField="id" HeaderText="No." ReadOnly="True"/>
                    <asp:BoundField DataField="username" HeaderText="Username" />
                    <asp:BoundField DataField="password" HeaderText="Password" />
                </Columns>
                <FooterStyle BackColor="White" ForeColor="#000066" />
                <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                <RowStyle ForeColor="#000066" />
                <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
            </asp:GridView>

Answer 2

User839733648 posted

Hi Omanxp45-1,

According to your description, I suggest that you could use overflow-y: scroll attribute to achieve your requirement.

Here is my testing sample.

    <form id="form1" runat="server">
        <div style="overflow-y: scroll;height: 200px; width: 300px;">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" CssClass="auto-style6" EnableModelValidation="True" DataSourceID="SqlDataSource1">
                <Columns>
                    <asp:BoundField DataField="Eid" HeaderText="Eid" SortExpression="Eid" />
                    <asp:BoundField DataField="Ename" HeaderText="Ename" SortExpression="Ename" />
                    <asp:BoundField DataField="age" HeaderText="age" SortExpression="age" />
                    <asp:BoundField DataField="sex" HeaderText="sex" SortExpression="sex" />
                </Columns>
                <FooterStyle BackColor="White" ForeColor="#000066" />
                <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                <RowStyle ForeColor="#000066" />
                <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EmployeeManagementConnectionString %>" SelectCommand="SELECT * FROM [tb_info]"></asp:SqlDataSource>
        </div>
    </form>

result:

Best Regards,

Jenifer

Answer 3

User-2071692902 posted

Hi Jenifer Jian...

Sorry, but it doesn't work

Answer 4

User839733648 posted

Hi Omanxp45-1,

Have you set both overflow-y: scroll and height: 200px?

You could set the height smaller so that you could see the effect.

Or if possible, please share your detailed testing code so that it will be easier to help with you.

Best Regards,

Jenifer

Answer 5

User-2071692902 posted

Hi Jenifer Jian...

Here my detailed testing code

 <div style="overflow-y: scroll;height: 100px; width: 100px;">
          <asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="25" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" CssClass="auto-style6" EnableModelValidation="True">
                <Columns>
                    <asp:BoundField DataField="id" HeaderText="No." ReadOnly="True"/>
                    <asp:BoundField DataField="username" HeaderText="Username" />
                    <asp:BoundField DataField="password" HeaderText="Password" />
                </Columns>
                <FooterStyle BackColor="White" ForeColor="#000066" />
                <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                <RowStyle ForeColor="#000066" />
                <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
            </asp:GridView>
        </div>

Answer 6

User-943250815 posted

It work, even if Gridview is empty you should see Vertical Scroll bar disabled.
In your sample, Scroll bar will be enabled only when Gridview becomes bigger then div size.
Do you have enough records to show?

Answer 7

User-2071692902 posted
Yes I have enough records inside it

Answer 8

User-943250815 posted

Do you can see scroll bar on screen?

Answer 9

User-2071692902 posted
No

Answer 10

User-943250815 posted

On browser hit F12 and inspect element to see if div style is applied

Check this link using different browsers, you should see 15 scroll bars, on Chrome they are colored.
It uses same overflow, width and height as suggested.

Answer 11

User-943250815 posted

Forgot link, here is https://codepen.io/GhostRider/pen/GHaFw