Click here to Skip to main content
13,350,506 members (73,251 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 23 May 2013

Different Ways to Implement the Scrollbar in a Grid

, 23 May 2013
Rate this:
Please Sign up or sign in to vote.
This is a tip to implement the scrollbar to a grid.


Generally, we all know that gridview, datagrid, listview, etc. all are .NET controls. These controls include paging as their property. Using paging, we are able to restrict the data as well as record size. Sometimes, there comes a requirement like scrollbar to the grid. In this case, we wonder how to apply the scrollbar to the grid. I will discuss all the possible ways to apply the scrollbar to the grid like controls.

Using the Code

There are basically two easy ways to apply scrollbar to the grid:

  1. Keep the control in a fixed div and apply the scrollbar to the div.
  2. Use simple plugins to customize your grid to apply scrollbar.

Using <div> tag

Using <div> tag, it is quite easy to apply the scrollbar to any control. But it's not the exact solution to the problem. Here, I will discuss some of the problems that may arise.

  1. If the page is not having the design based upon the divs, i.e., the layout is not based upon the exact format, then there may be some design related issues.
  2. Based upon the screen size, the design may differ and that also creates a problem.

<div style="height: 100px; width: 400px; overflow: scroll;">
<asp:Gridview id="grdGridview" runat="server">

Here the style determines the scrolling property:

style="overflow: scroll;"

The "overflow" property has many more properties like  "auto", "scroll", "none", etc. Generally auto is preferable.

Using a Simple Plugin

This is what the experts do while coding. I will share with you a demo project which explains the things properly. The basic requirements that we need to include will be discussed here.

In the JavaScript code, add the following code:

<script type="text/javascript">
        $(document).ready(function () {

               $(".tableDiv").each(function () {
                   var Id = $(this).get(0).id;
                   var maintbheight = 355;
                   var maintbwidth = 860;

                   $("#" + Id + " .FixedTables").fixedTable({
                       width: maintbwidth,
                       height: maintbheight,
                       fixedColumns: 1,
                       // header style
                       classHeader: "fixedHead",
                       // footer style
                       classFooter: "fixedFoot",
                       // fixed column on the left
                       classColumn: "fixedColumn",
                       // the width of fixed column on the left
                       fixedColumnWidth: 100,
                       // table's parent div's id
                       outerId: Id,
                       // tds' in content area default background color
                       Contentbackcolor: "#FFFFFF",
                       // tds' in content area background color while hover.
                       Contenthovercolor: "#99CCFF",
                       // tds' in fixed column default background color
                       fixedColumnbackcolor: "#5097d1",
                       // tds' in fixed column background color while hover.
                       fixedColumnhovercolor: "#99CCFF"
          $(".fixedTable table").attr('rules', 'All');

In the aspx page code, add the following code:

<div id="divGrid" class="tableDiv">
        <asp:GridView ID="grdData" runat="server" 


            CellPadding="4" GridLines="None" 

            class="FixedTables" Width="600">           

In the codebehind, bind the grid for displaying the data. then your work is done. You will be able to see the scrollbar in your grid.

This demo and tip will help you a lot.



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sisir Patro
Software Developer
India India
Learn the base not only the requirement related things for quick fixing and make others learn the exact thing always...

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180111.1 | Last Updated 23 May 2013
Article Copyright 2013 by Sisir Patro
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid