Dynamic DataGrid with scrolling

Discussion in 'ASP .Net Web Controls' started by Angela, Feb 20, 2004.

  1. Angela

    Angela Guest

    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
    Angela, Feb 20, 2004
    #1
    1. Advertising

  2. 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.
    Jeffrey Tan[MSFT], Feb 21, 2004
    #2
    1. Advertising

  3. Angela

    Angela Guest

    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)
    Angela, Feb 23, 2004
    #3
  4. 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" <> wrote in message
    news:...
    > 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
    Sarmad Aljazrawi, Feb 23, 2004
    #4
  5. Angela

    Angela Guest

    Thank you!

    I got it to work now, thanks to both of you
    Angela, Feb 23, 2004
    #5
  6. 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.
    Jeffrey Tan[MSFT], Feb 24, 2004
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. abacnet

    Datagrid header and scrolling,

    abacnet, Aug 10, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    2,086
    Saravana
    Aug 11, 2003
  2. Saravana [MVP]

    Scrolling in datagrid.

    Saravana [MVP], Oct 16, 2003, in forum: ASP .Net
    Replies:
    6
    Views:
    420
    Rajesh.V
    Oct 16, 2003
  3. Bruce W...1
    Replies:
    2
    Views:
    332
    Rajesh.V
    Nov 6, 2003
  4. Tony Do
    Replies:
    0
    Views:
    435
    Tony Do
    Nov 14, 2003
  5. Replies:
    1
    Views:
    221
Loading...

Share This Page