Dropdown cell in table

Discussion in 'ASP .Net' started by chris f, Jun 19, 2008.

  1. chris f

    chris f Guest

    In my table (ASP.NET 2) that is dynamically generated I have a cell that
    initially will only display N rows of text and hide the rest. (This is so
    that the rows have a small height and I can display more rows on a page.)
    When the user clicks on the cell (or maybe hovers the mouse over it) then I
    want the cell to expand to display all of the rows.

    Can someone help me out as to how I implement it? I've been told to use
    expanding DIVs but I haven't managed to find any useful examples online. Any
    client scripting would be in JavaScript.
    chris f, Jun 19, 2008
    #1
    1. Advertising

  2. Try something like the following (you will obviously want different
    height/width values):

    <span style="display:block;height:100px;width:300px;overflow:hidden;"
    onmouseover="this.style.height='auto';"
    onmouseout="this.style.height='100px';"></span>

    If you have specified any CSS for your table, it is possible that you may
    need the onmouseover/onmouseout to modify them as well. Good Luck!
    --
    Nathan Sokalski

    http://www.nathansokalski.com/

    "chris f" <> wrote in message
    news:...
    > In my table (ASP.NET 2) that is dynamically generated I have a cell that
    > initially will only display N rows of text and hide the rest. (This is so
    > that the rows have a small height and I can display more rows on a page.)
    > When the user clicks on the cell (or maybe hovers the mouse over it) then
    > I want the cell to expand to display all of the rows.
    >
    > Can someone help me out as to how I implement it? I've been told to use
    > expanding DIVs but I haven't managed to find any useful examples online.
    > Any client scripting would be in JavaScript.
    >
    Nathan Sokalski, Jun 20, 2008
    #2
    1. Advertising

  3. chris f

    chris f Guest

    Thanks. Is there a way to set the initial span height dynamically because at
    the time that the span is created then my web app doesn't know the text
    height being used?

    "Nathan Sokalski" <> wrote in message
    news:%...
    > Try something like the following (you will obviously want different
    > height/width values):
    >
    > <span style="display:block;height:100px;width:300px;overflow:hidden;"
    > onmouseover="this.style.height='auto';"
    > onmouseout="this.style.height='100px';"></span>
    >
    > If you have specified any CSS for your table, it is possible that you may
    > need the onmouseover/onmouseout to modify them as well. Good Luck!
    > --
    > Nathan Sokalski
    >
    > http://www.nathansokalski.com/
    >
    > "chris f" <> wrote in message
    > news:...
    >> In my table (ASP.NET 2) that is dynamically generated I have a cell that
    >> initially will only display N rows of text and hide the rest. (This is so
    >> that the rows have a small height and I can display more rows on a page.)
    >> When the user clicks on the cell (or maybe hovers the mouse over it) then
    >> I want the cell to expand to display all of the rows.
    >>
    >> Can someone help me out as to how I implement it? I've been told to use
    >> expanding DIVs but I haven't managed to find any useful examples online.
    >> Any client scripting would be in JavaScript.
    >>

    >
    >
    chris f, Jun 23, 2008
    #3
  4. Yes, just do it the same way you would set any attribute dynamically. Here
    are several methods I am working that you may be interested in that will
    soon be on my website (they are written using VB.NET 2.0, but they could
    easily be modified if you need to convert them to C#):

    Public Class Rollovers
    Public Shared Sub AddRolloverExpansionHeight(ByVal ctrl As
    System.Web.UI.WebControls.WebControl, ByVal initialheight As String, ByVal
    expandedheight As String)
    If ctrl.Style.Value = Nothing Then
    ctrl.Style.Value =
    String.Format("display:block;overflow:hidden;height:{0};", initialheight)
    Else
    If Not ctrl.Style.Value.Contains("display:block") Then ctrl.Style.Value =
    "display:block;" & ctrl.Style.Value
    If Not ctrl.Style.Value.Contains("overflow:hidden") Then ctrl.Style.Value
    = "overflow:hidden;" & ctrl.Style.Value
    ctrl.Style.Value &= String.Format("height:{0};", initialheight)
    End If
    ctrl.Attributes.Add("onmouseover",
    String.Format("this.style.height='{0}';", expandedheight))
    ctrl.Attributes.Add("onmouseout",
    String.Format("this.style.height='{0}';", initialheight))
    End Sub

    Public Shared Sub AddRolloverExpansionHeight(ByVal ctrl As
    System.Web.UI.WebControls.WebControl, ByVal initialheight As String)
    AddRolloverExpansionHeight(ctrl, initialheight, "auto")
    End Sub

    Public Shared Sub AddRolloverExpansionWidth(ByVal ctrl As
    System.Web.UI.WebControls.WebControl, ByVal initialwidth As String, ByVal
    expandedwidth As String)
    If ctrl.Style.Value = Nothing Then
    ctrl.Style.Value =
    String.Format("display:block;overflow:hidden;width:{0};", initialwidth)
    Else
    If Not ctrl.Style.Value.Contains("display:block") Then ctrl.Style.Value =
    "display:block;" & ctrl.Style.Value
    If Not ctrl.Style.Value.Contains("overflow:hidden") Then ctrl.Style.Value
    = "overflow:hidden;" & ctrl.Style.Value
    ctrl.Style.Value &= String.Format("width:{0};", initialwidth)
    End If
    ctrl.Attributes.Add("onmouseover",
    String.Format("this.style.width='{0}';", expandedwidth))
    ctrl.Attributes.Add("onmouseout", String.Format("this.style.width='{0}';",
    initialwidth))
    End Sub

    Public Shared Sub AddRolloverExpansionWidth(ByVal ctrl As
    System.Web.UI.WebControls.WebControl, ByVal initialwidth As String)
    AddRolloverExpansionWidth(ctrl, initialwidth, "auto")
    End Sub

    Public Shared Sub AddRolloverExpansion(ByVal ctrl As
    System.Web.UI.WebControls.WebControl, ByVal initialheight As String, ByVal
    initialwidth As String, ByVal expandedheight As String, ByVal expandedwidth
    As String)
    If ctrl.Style.Value = Nothing Then
    ctrl.Style.Value =
    String.Format("display:block;overflow:hidden;height:{0};width:{1};",
    initialheight, initialwidth)
    Else
    If Not ctrl.Style.Value.Contains("display:block") Then ctrl.Style.Value =
    "display:block;" & ctrl.Style.Value
    If Not ctrl.Style.Value.Contains("overflow:hidden") Then ctrl.Style.Value
    = "overflow:hidden;" & ctrl.Style.Value
    ctrl.Style.Value &= String.Format("height:{0};width:{1};", initialheight,
    initialwidth)
    End If
    ctrl.Attributes.Add("onmouseover",
    String.Format("this.style.height='{0}';this.style.width='{1}';",
    expandedheight, expandedwidth))
    ctrl.Attributes.Add("onmouseout",
    String.Format("this.style.height='{0}';this.style.width='{1}';",
    initialheight, initialwidth))
    End Sub

    Public Shared Sub AddRolloverExpansion(ByVal ctrl As
    System.Web.UI.WebControls.WebControl, ByVal initialheight As String, ByVal
    initialwidth As String)
    AddRolloverExpansion(ctrl, initialheight, initialwidth, "auto", "auto")
    End Sub
    End Class
    --
    Nathan Sokalski

    http://www.nathansokalski.com/

    "chris f" <> wrote in message
    news:...
    > Thanks. Is there a way to set the initial span height dynamically because
    > at the time that the span is created then my web app doesn't know the text
    > height being used?
    >
    > "Nathan Sokalski" <> wrote in message
    > news:%...
    >> Try something like the following (you will obviously want different
    >> height/width values):
    >>
    >> <span style="display:block;height:100px;width:300px;overflow:hidden;"
    >> onmouseover="this.style.height='auto';"
    >> onmouseout="this.style.height='100px';"></span>
    >>
    >> If you have specified any CSS for your table, it is possible that you may
    >> need the onmouseover/onmouseout to modify them as well. Good Luck!
    >> --
    >> Nathan Sokalski
    >>
    >> http://www.nathansokalski.com/
    >>
    >> "chris f" <> wrote in message
    >> news:...
    >>> In my table (ASP.NET 2) that is dynamically generated I have a cell that
    >>> initially will only display N rows of text and hide the rest. (This is
    >>> so that the rows have a small height and I can display more rows on a
    >>> page.) When the user clicks on the cell (or maybe hovers the mouse over
    >>> it) then I want the cell to expand to display all of the rows.
    >>>
    >>> Can someone help me out as to how I implement it? I've been told to use
    >>> expanding DIVs but I haven't managed to find any useful examples online.
    >>> Any client scripting would be in JavaScript.
    >>>

    >>
    >>

    >
    >
    Nathan Sokalski, Jun 23, 2008
    #4
    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. Mark Goldin

    Table in a cell of another table

    Mark Goldin, Aug 19, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    325
    Mark Goldin
    Aug 19, 2004
  2. Phillip Roncoroni
    Replies:
    14
    Views:
    1,089
    Toby A Inkster
    Apr 5, 2004
  3. sdf
    Replies:
    3
    Views:
    1,903
  4. Symphony

    add hyber link to table or table cell web control

    Symphony, Mar 15, 2005, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    386
    Ken Cox [Microsoft MVP]
    Mar 16, 2005
  5. Replies:
    7
    Views:
    197
    Lasse Reichstein Nielsen
    Jul 11, 2005
Loading...

Share This Page