GridView with Scrollbars in ASP.NET

Today I am here to share something to you. This is simpler as never but I bet, you are searching for this since long.

If you have developed any web application using ASP.NET, you must have used GridView, if you are beginner and learning ASP.NET, this will tell you how to make GridView scrollable. As we know, we can Paginate data in GridView, but putting a Scrollbar is really confusing as it is not in default properties of GridView control.

Lets design a web form and insert a GridView. I am using no designs and just a form and dragged and auto formatted GridView control in this tutorial.



Lets see the code for this web form.

<div align="center">

<asp:gridview id="GridView1" runat="server" autogeneratecolumns="False" cellpadding="4"

datakeynames="DistID" datasourceid="SqlDataSource1" forecolor="#333333" gridlines="None"

height="240px" width="667px">

<AlternatingRowStyle BackColor="White" ForeColor="#284775" />

<Columns>

<asp:BoundField DataField="DistID" HeaderText="DistID" InsertVisible="False" ReadOnly="True" SortExpression="DistID" />

<asp:BoundField DataField="StateID" HeaderText="StateID" SortExpression="StateID" />

<asp:BoundField DataField="DistName" HeaderText="DistName" SortExpression="DistName" />

<asp:BoundField DataField="DistDesc" HeaderText="DistDesc" SortExpression="DistDesc" />

</Columns>

<EditRowStyle BackColor="#999999" />

<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />

<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />

<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />

<SortedAscendingCellStyle BackColor="#E9E7E2" />

<SortedAscendingHeaderStyle BackColor="#506C8C" />

<SortedDescendingCellStyle BackColor="#FFFDF8" />

<SortedDescendingHeaderStyle BackColor="#6F8DAE" />

</asp:gridview>

<asp:sqldatasource id="SqlDataSource1" runat="server" connectionstring="<%$ ConnectionStrings:ConnectionString1 %>"

selectcommand="SELECT * FROM [Districts]"></asp:sqldatasource>

</div>

I have bind data from one of my projects, this is schema of Address and table is District List. Lets run the Web form, our output is:



This is how it will list record and entire page will have GridView data. To fix this, I have added just a style tag to Div and some code inside that tag. Below is code.

..style="height:400px; overflow:auto"..
//You can change overflow:auto to overflow:scroll but that will show both Scrollbar and always. 
//Above will show Vertical Scrollbar only when the Height of GridView exceeds than assigned height.

After adding above code, I refreshed the browser, Now this is the new and required layout of GridView.