Dropdown cell in table

[chris f]

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]

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!

 

[chris f]

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]

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