How to make gridview in asp.net scrollable?

Question

I want to know how can i make my asp.net gridview scrollable vertically and horizontally without using CSS and html.

this is my code on how I make gridview scrollable

in CSS:

div#scroll  
{
border: 1px solid #C0C0C0;
background-color: #F0F0F0;
width: 584px; 
height: 180px; 
overflow: scroll; 
position: relative;
left: 39px;
top: 813px;
}

in HTML:

<div id = "scroll">
<asp:GridView ID="tblitem" runat="server" CellPadding="4" 
ForeColor="#333333" GridLines="None" 
style="z-index: 1; left: -2px; top: 0px; position: absolute; height: 57px; width: 584px" 
         AutoGenerateSelectButton="True" Visible="False">
         <AlternatingRowStyle BackColor="White" />
         <EditRowStyle BackColor="#7C6F57" />
         <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
         <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
         <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
         <RowStyle BackColor="#E3EAEB" />
         <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
         <SortedAscendingCellStyle BackColor="#F8FAFA" />
         <SortedAscendingHeaderStyle BackColor="#246B61" />
         <SortedDescendingCellStyle BackColor="#D4DFE1" />
         <SortedDescendingHeaderStyle BackColor="#15524A" />
    </asp:GridView>
    </div>

I dont want to use this because when I hide my gridview, the div scroll that I make is visible.

Answer 1

Wrap the gridview with a div like you mentioned you didn't want to do, but to get around the "hide my gridview, the div scroll that I make is visible" you wrap that with a panel and make the Panel.Visible=true or false.

For me that hides the scrollable GridView without leaving space.

Answer 2

This is how i did

JavaScript:

 function onLoad() {
         FreezeGridViewHeader('MyGridViewID', 'WrapperDiv');
     }


     function FreezeGridViewHeader(gridID, wrapperDivCssClass) {
         /// <summary>
         ///   Used to create a fixed GridView header and allow scrolling
         /// </summary>
         /// <param name="gridID" type="String">
         ///   Client-side ID of the GridView control
         /// </param>
         /// <param name="wrapperDivCssClass" type="String">
         ///   CSS class to be applied to the GridView's wrapper div element.  
         ///   Class MUST specify the CSS height and width properties.  
         ///   Example: width:800px;height:400px;border:1px solid black;
         /// </param>
         var grid = document.getElementById(gridID);
         if (grid != 'undefined') {
             grid.style.visibility = 'hidden';
             var div = null;
             if (grid.parentNode != 'undefined') {
                 //Find wrapper div output by GridView
                 div = grid.parentNode;
                 if (div.tagName == "DIV") {
                     div.className = wrapperDivCssClass;
                     div.style.overflow = "auto";
                 }
             }
             //Find DOM TBODY element and remove first TR tag from 
             //it and add to a THEAD element instead so CSS styles
             //can be applied properly in both IE and FireFox
             var tags = grid.getElementsByTagName('TBODY');
             if (tags != 'undefined') {
                 var tbody = tags[0];
                 var trs = tbody.getElementsByTagName('TR');
                 var headerHeight = 8;
                 if (trs != 'undefined') {
                     headerHeight += trs[0].offsetHeight;
                     var headTR = tbody.removeChild(trs[0]);
                     var head = document.createElement('THEAD');
                     head.appendChild(headTR);
                     grid.insertBefore(head, grid.firstChild);
                 }
                 //Needed for Firefox
                 tbody.style.height =
                      (div.offsetHeight - headerHeight) + 'px';
                 tbody.style.overflowX = "hidden";
                 tbody.overflow = 'auto';
                 tbody.overflowX = 'hidden';
             }
             grid.style.visibility = 'visible';
         }
     }

HTML MARKUP:

  <div id="gvholder">
//My gridviewcontrol
     <asp:GridView ID="MyGridViewID" runat="server" >  
       <Columns>
         ......
         ......
         ......
      <Columns>
     </asp:GridView>

 </div>

CSS

.WrapperDiv {
    border: 1px solid #CCCCCC;
    height: auto;
    max-height: 400px;
    width: auto;
} 

.WrapperDiv TH {
    position:relative;
    font-size:12px;
    font-weight:bold;
}

.WrapperDiv TR 
{
    /*NeededForIe*/
    height:0px;
} 


.WrapperDiv td
{
font-size:12px;
}


#gvholder
{
float:left;
top:10px;
width:auto;
border:1px solid #CCCCCC;
margin-top:10px;
margin-left:10px; 
box-shadow:1px 2px 9px black;
}

Answer 3

You can use grid inside div and make this div scrollable....

Answer 4

Try the below link it will help you... here they use Jquery to Scroll Grid view and it was very simple...

Scroll Grid View