Solved

Scrollable Grid

Posted on 2009-03-30
18
501 Views
Last Modified: 2012-05-06
How do I make a standard GridView scrollable in ASP.NET?
0
Comment
Question by:NigelRocks
  • 9
  • 9
18 Comments
 
LVL 27

Accepted Solution

by:
nmarun earned 500 total points
ID: 24022740
Enclose your gridview between a div tag:

<div style="overflow:scroll; height:100px">

</div>
0
 
LVL 1

Author Comment

by:NigelRocks
ID: 24022847
Didn't work.  See attached code.
    <div style="overflow:scroll; height:100px">
    <asp:GridView ID="gridProducts" runat="server" 
        onselectedindexchanged="gridProducts_SelectedIndexChanged" 
        
            style="z-index: 1; left: 19px; top: 74px; position: absolute; height: 465px; width: 1028px; bottom: 0px; right: -7px;" 
            AutoGenerateSelectButton="True" Height="5px">
        <RowStyle Font-Size="Medium" Height="25px" />
        <Columns>
            <asp:CheckBoxField />
        </Columns>
        <HeaderStyle Height="5px" />
    </asp:GridView>
    </div>

Open in new window

0
 
LVL 27

Assisted Solution

by:nmarun
nmarun earned 500 total points
ID: 24022905
Remove this from the gridview and try:
style="z-index: 1; left: 19px; top: 74px; position: absolute; height: 465px; width: 1028px; bottom: 0px; right: -7px;"
0
ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 1

Author Comment

by:NigelRocks
ID: 24022929
Do I put this in the DIV tag or the GridView tag?
0
 
LVL 27

Assisted Solution

by:nmarun
nmarun earned 500 total points
ID: 24022954
Make this as your div tag and remove the 'style' parameter from the gridview.
<div style="overflow:scroll; z-index: 1; left: 19px; top: 74px; position: absolute; height: 465px; width: 1028px; bottom: 0px; right: -7px">
0
 
LVL 1

Author Comment

by:NigelRocks
ID: 24023209
Any reason why this code would make my DropDownList disappear?
 
 
0
 
LVL 27

Expert Comment

by:nmarun
ID: 24023244
The DDL might have been stuck under the div tag. Please post your html code.
0
 
LVL 1

Author Comment

by:NigelRocks
ID: 24023305
I deleted the references to the DropDownList (ddlProductCategory) and put it back in.  However, now the selected event for that control is not firing.
 
 

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Order_Create.aspx.cs" Inherits="OrderCreate" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #form1
        {
            height: 577px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
 
    
    
 
<div style="overflow:scroll; z-index: 1; left: 19px; top: 74px; position: absolute; height: 465px; width: 1028px; bottom: 0px; right: -7px">
    <asp:GridView ID="gridProducts" runat="server" 
        onselectedindexchanged="gridProducts_SelectedIndexChanged" 
            AutoGenerateSelectButton="True" Height="68px" Width="416px">
        <RowStyle Font-Size="Medium" Height="25px" />
        <Columns>
            <asp:CheckBoxField />
        </Columns>
        <HeaderStyle Height="5px" />
    </asp:GridView>
    <asp:DropDownList ID="ddlProductCategory" runat="server" 
        onselectedindexchanged="ddlProductCategory_SelectedIndexChanged"         
        style="z-index: 1; left: 620px; top: 76px; position: absolute; height: 35px; width: 258px">
    </asp:DropDownList>
</div>
    
    
 
    <p>
        <asp:Button ID="btnCheckout" runat="server" onclick="btnCompleteOrder_Click" 
            style="z-index: 1; left: 966px; top: 40px; position: absolute; right: 80px" 
            Text="Checkout" />
    </p>
    <asp:RadioButton ID="radAllProducts" runat="server" 
        oncheckedchanged="radAirCards_CheckedChanged" 
        style="z-index: 1; left: 316px; top: 28px; position: absolute; margin-bottom: 0px; height: 21px;" 
        Text="All Products" GroupName="radProductCategory" Visible="False" />
    <asp:RadioButton ID="radLocal" runat="server" 
        style="z-index: 1; left: 195px; top: 35px; position: absolute" 
        Text="Local" oncheckedchanged="radLocal_CheckedChanged" 
        GroupName="radProductCategory" />
    <asp:RadioButton ID="radUSATelephone" runat="server" 
        style="z-index: 1; left: 432px; top: 73px; position: absolute" 
        Text="USA Telephone" GroupName="radProductCategory" Visible="False" />
    <asp:RadioButton ID="radLongDistance" runat="server" 
        style="z-index: 1; left: 200px; top: 66px; position: absolute" 
        Text="Long Distance" GroupName="radProductCategory" Visible="False" />
    <asp:RadioButton ID="radBlackberries" runat="server" 
        oncheckedchanged="radBlackberries_CheckedChanged" 
        style="z-index: 1; left: 1002px; top: 74px; position: absolute" 
        Text="Blackberries" GroupName="radProductCategory" Visible="False" />
    <p>
 
        
        
        <asp:RadioButton ID="radCloseCallAdvantage" runat="server" 
            style="z-index: 1; left: 422px; top: 30px; position: absolute" 
            Text="CloseCall Advanage" GroupName="radProductCategory" Visible="False" />
    <asp:RadioButton ID="radAirCards" runat="server" 
        oncheckedchanged="radAirCards_CheckedChanged" 
        style="z-index: 1; left: 705px; top: 47px; position: absolute; margin-bottom: 0px" 
        Text="Air Cards" GroupName="radProductCategory" Visible="False" />
    <asp:RadioButton ID="radWireless0" runat="server" 
        style="z-index: 1; left: 849px; top: 80px; position: absolute" 
        Text="Wireless" GroupName="radProductCategory" Visible="False" />
        <asp:RadioButtonList ID="radList" runat="server" 
            
            style="z-index: 1; left: 605px; top: 83px; position: absolute; height: 27px; width: 168px" 
            Visible="False">
        </asp:RadioButtonList>
    </p>
 
    </form>
</body>
</html>

Open in new window

0
 
LVL 27

Assisted Solution

by:nmarun
nmarun earned 500 total points
ID: 24023421
You are positioning the controls individually with absolute positioning. You need to re-arrange these controls so they don't overlap over each other. When I changed the position to relative, I could see a lot more controls, but again some of them are still overlapping.

A better way would be place these controls in a <table>.
0
 
LVL 1

Author Comment

by:NigelRocks
ID: 24023742
I didn't have to do any of that before I added the <DIV> tag.  Is this really that difficult?  I think it's time to try another IDE.
0
 
LVL 1

Author Comment

by:NigelRocks
ID: 24023770
This is in the HTML:

<asp:DropDownList ID="ddlProductCategory" runat="server"
onselectedindexchanged="ddlProductCategory_SelectedIndexChanged"
style="z-index: 1; left: 620px; top: 76px; position: absolute; height: 35px; width: 258px">
</asp:DropDownList>
 
This is in the code-behind:

protected void ddlProductCategory_SelectedIndexChanged(object sender, EventArgs e)
{
int productCategoryID;
string sql;
productCategoryID = Convert.ToInt32(ddlProductCategory.SelectedItem.Value);
//Load products into GridView
sql = "SELECT * FROM PRODUCT WHERE Product_Category_ID_FK=" + productCategoryID;
WebFormControls.Grids.PopulateGridView(Program.closeCallDatabase, sql, gridProducts);
//gridProducts.Columns[1].HeaderStyle.Width = 0;
//FormatProductGrid();
}
 
 
Yet, nothing happens when I select from this list.  Why?
0
 
LVL 27

Assisted Solution

by:nmarun
nmarun earned 500 total points
ID: 24023780
Change your html to:
<asp:DropDownList ID="ddlProductCategory" runat="server" AutoPostBack="true"
onselectedindexchanged="ddlProductCategory_SelectedIndexChanged"
style="z-index: 1; left: 620px; top: 76px; position: absolute; height: 35px; width: 258px">
</asp:DropDownList>
0
 
LVL 27

Expert Comment

by:nmarun
ID: 24023789
I guess even other IDE's will give you similar results. Here's why this din't happen before:

You had placed every control in absolute position and when you added the div tag, this messed up the positioning for every other control. That's why you have to change the positioning for other controls.
0
 
LVL 1

Author Comment

by:NigelRocks
ID: 24028211
if I don't use absolute position, my controls lock to the grid and I can't move them around when I first create them.
 
0
 
LVL 1

Author Comment

by:NigelRocks
ID: 24028422
The grid still doesn't scroll.
 
0
 
LVL 1

Author Comment

by:NigelRocks
ID: 24028545
Now that I've taken the style off the grid, it won't move.  Do people actually design UIs in .NET?  How???
0
 
LVL 27

Expert Comment

by:nmarun
ID: 24028676
Nigel, Here's what you need to do:

Start simple: Add only a few controls on the aspx page and see if you can get the div tag to add scroll bars. Make sure you set the DataSource property of gridProducts, if not the gridview will not be rendered. I have this page and I see the scroll bars:

<div style="overflow:scroll; height:150px;">
    <table>
        <tr>
            <td>
                <asp:GridView ID="gridProducts" runat="server" 
                        AutoGenerateSelectButton="True" Height="68px" Width="416px">
                    <RowStyle Font-Size="Medium" Height="25px" />
                    <Columns>
                        <asp:CheckBoxField />
                    </Columns>
                    <HeaderStyle Height="5px" />
                </asp:GridView>
            </td>
        </tr>
        <tr>
            <td>
                <asp:DropDownList ID="ddlProductCategory" runat="server" />
            </td>
        </tr>
    </table>
</div>
 
//code-behind
protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
 
    gridProducts.DataSource = dt;
    gridProducts.DataBind();
}

Open in new window

0
 
LVL 27

Expert Comment

by:nmarun
ID: 24028692
I'm not sure what you mean by 'it won't move'. Are you saying you want users to be able to move controls around the page?
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Gridview selected row 9 47
Media.Imaging 1 18
HTML - Color not displaying correctly in EMAIL. 6 38
Call Controller Action Method from ASPX 2 15
This article is for Object-Oriented Programming (OOP) beginners. An Interface contains declarations of events, indexers, methods and/or properties. Any class which implements the Interface should provide the concrete implementation for each Inter…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question