How to make gridview in asp.net scrollable? - asp.net

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

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

Answer 2

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

Answer 3

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 4

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.