Dynamic DataGrid with scrolling

A

Angela

I have a dynamic DataGrid and I need to add scrolling to it (the user wants it to scroll instead of page). I've been searching on Google for solutions to my problem and I keep finding the <div> solution to the Scrolling DataGrid. This doesn't work for me since I'm creating the DataGrid on the fly. I also found a solution that works with IE only, but I don't want to limit my application to only one browser

Are there any other ways to make a scrolling DataGrid

Angela
 
J

Jeffrey Tan[MSFT]

Hi Angela,

Thank you for posting in the community!

Based on my understanding, you want to implement a scrollable datagrid in
WebForm, and your datagrid is create dynamicly.

===========================================
From your statement, I see that you already know that scrollable datagrid
control is complemented through included in the <div> html tag with
"overflow" html attribute.

To dynamicly add your div tag, I think you want to get all this done at
server side. Actually, <div> html tag can be made into a server control
through HtmlGenericControl class.
HtmlGenericControl can be used to represent an HTML server control tag not
directly represented by a .NET Framework class, such as <span>, <div>,
<body>, and <font>.

So you can do like this:

protected System.Web.UI.HtmlControls.HtmlForm Form1;
private void Button1_Click(object sender, System.EventArgs e)
{
DataGrid dg=new DataGrid();
SqlDataAdapter adapter=new SqlDataAdapter("select * from
jobs","server=localhost; database=pubs;uid=sa; pwd=");
DataSet ds=new DataSet();
adapter.Fill(ds);
dg.DataSource=ds;
dg.DataBind();

Form1.Controls.Add(dg);

System.Web.UI.HtmlControls.HtmlGenericControl divcontrol=new
HtmlGenericControl("div");
divcontrol.Style.Add("width", "300");
divcontrol.Style.Add("height", "400");
divcontrol.Style.Add("overflow", "scroll");
divcontrol.Controls.Add(dg);

Form1.Controls.Add(divcontrol);
}

In the sample code, I dynamicly add the datagrid control in button.click
event.

Also, I want to inform you that: <div>'s "overflow" attribute has 4 values:
visible, scroll, hidden, auto. I use "scroll" here to make scroll bars are
always added, even if the content does not exceed the dimensions of the
object.
For more details information, please refer to:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/ref
erence/properties/overflow.asp

=================================================
Please apply my suggestion above and let me know if it helps resolve your
problem.

Thank you for your patience and cooperation. If you have any questions or
concerns, please feel free to post it in the group. I am standing by to be
of assistance.
Have a nice day!!

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 
A

Angela

Thanks for your reply..

Your code sample got me further than I was able to get thus far, but it still didn't solve my problem. I got scrollbars but they weren't around my DataGrid. They were below my DataGrid. I tried to add my DataGrid control to the HtmlGenericControl, but that makes just the scrollbars appear on the screen and no DataGrid at all

I'll include some of my code in this post so you can see what I'm doing

Create controls
this.dgMyGrid = new DataGrid()
this.divControl = new HtmlGenericControl("div")
this.tblMain = new Table()

this.divControl.Style.Add("width", "550")
this.divControl.Style.Add("height", "400")
this.divControl.Style.Add("overflow", "scroll")

Set up the table
this.tblMain.CellPadding = 2
this.tblMain.CellSpacing = 0
this.tblMain.ID = "tblMain"
this.tblMain.Width = Unit.Pixel(600)

First I tried this: //This makes the scrollbars appear under the DataGri
this.tblMain.Rows[0].Cells[0].Text = "&nbsp;"
this.tblMain.Rows[1].Cells[0].Controls.Add(this.tblHeader)
this.tblMain.Rows[1].Cells[0].Controls.Add(this.dgMyGrid)
this.tblMain.Rows[1].Cells[0].Controls.Add(this.divControl)
this.tblMain.Rows[2].Cells[0].Text = "&nbsp;"

this.Controls.Add(this.tblMain)

Then I tried this: //This makes the scrollbars appear above the DataGri
this.tblMain.Rows[0].Cells[0].Text = "&nbsp;"
this.tblMain.Rows[1].Cells[0].Controls.Add(this.tblHeader)
this.tblMain.Rows[1].Cells[0].Controls.Add(this.divControl)
this.tblMain.Rows[1].Cells[0].Controls.Add(this.dgMyGrid)
this.tblMain.Rows[2].Cells[0].Text = "&nbsp;"

this.Controls.Add(this.tblMain)

Then I tried: //This makes the scrollbars appear but no DataGri
this.divControl.Controls.Add(this.dgMyGrid)

this.tblMain.Rows[0].Cells[0].Text = "&nbsp;"
this.tblMain.Rows[1].Cells[0].Controls.Add(this.tblHeader)
this.tblMain.Rows[1].Cells[0].Controls.Add(this.divControl)
this.tblMain.Rows[2].Cells[0].Text = "&nbsp;"

this.Controls.Add(this.tblMain)
 
S

Sarmad Aljazrawi

The code working as it should be, what you are missing is that you have to :

1. add your grid control to the div first.
2. then add your div to your table cell.

here is a sample code:

DataGrid1.PageSize = 30
DataGrid1.DataSource = odatasource
DataGrid1.DataBind()

mydiv.Controls.Add(DataGrid1)
Table1.Rows(1).Cells(0).Controls.Add(mydiv)

some of the aspx code:

div id="mydiv" runat="server" style="overflow:auto; width:200;
height:300"></div
asp:DataGrid id="DataGrid1" runat="server" Width="100">
TABLE id="Table1" runat="server"


i've tried this code and it works.

--
Sarmad Aljazrawi
B.Sc. Computer Science, MSDBA, MCP
www.aljazrawi.net


Angela said:
I have a dynamic DataGrid and I need to add scrolling to it (the user
Click to expand...
wants it to scroll instead of page). I've been searching on Google for
solutions to my problem and I keep finding the <div> solution to the
Scrolling DataGrid. This doesn't work for me since I'm creating the
DataGrid on the fly. I also found a solution that works with IE only, but I
don't want to limit my application to only one browser.
 
J

Jeffrey Tan[MSFT]

Hi Angela,

Thanks for your feedback.

I am glad it works now, if you have any further concern, please feel free
to tell me, I will help you.

Best regards,
Jeffrey Tan
Microsoft Online Partner Support
Get Secure! - www.microsoft.com/security
This posting is provided "as is" with no warranties and confers no rights.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Problem with android and scrolling with <input textarea 5
Ed's Odd scrolling issue 76
iframe scrolling 5
dynamic datagrid 0
Stuck with html and css 25
Scrolling of a datagrid 3
alternative scrolling 3
Scrolling 3

Members online

Total: 31 (members: 1, guests: 30)
Robots: 404

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top