Click here to Skip to main content
Click here to Skip to main content

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.

Introduction

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">
</asp:Gridview>
</div>

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');
    </script>

In the aspx page code, add the following code:

<div id="divGrid" class="tableDiv">
 
        <asp:GridView ID="grdData" runat="server" 
        AutoGenerateColumns="true"
            CellPadding="4" GridLines="None" 
            class="FixedTables" Width="600">           
             
        </asp:GridView>
</div> 

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.

Thanks.

License

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

Share

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...
Follow on   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 23 May 2013
Article Copyright 2013 by sisir patro
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid