Monday, March 26, 2012

Treeviw within an Accordion Pane

I have mocked up some code to illustrate my point.
The pane hides the expanded treeview (or doesn't expand along with it)
and any controls under the treeview this may be considered a bug.
I would like some input on how I could get around this.

To see my point in action, expand the treeview in the code below, notice the textbox disappears.
click the pane 2 header, then the pane 1 header to reveal the whold treeview.
collapse the treeview and see a gap between the panes.

1<%@dotnet.itags.org. Page Language="VB" %>23<%@dotnet.itags.org. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">56<script runat="server">7 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)8 Dim tree As TreeView = Pane1.ContentContainer.FindControl("treeview")9 Dim node As TreeNode10 Dim root As New TreeNode11 root.Text = "root"12 tree.Nodes.Add(root)13 Dim x As Integer14 For x = 1 To 1015 node = New TreeNode16 node.Text = "Data " & x.ToString17 root.ChildNodes.Add(node)18 Next19 tree.CollapseAll()20 End Sub21</script>2223<html xmlns="http://www.w3.org/1999/xhtml">24<head runat="server">25 <title>Accordion/Treeview Test</title>26</head>27<body>28 <form id="form1" runat="server">29 <div>30 <atlas:ScriptManager ID="Script" runat="server" />31 <atlasToolkit:Accordion ID="acc" runat="server" Width="300" FadeTransitions="true"32 FramesPerSecond="40" TransitionDuration="250">33 <atlasToolkit:AccordionPane ID="Pane1" runat="server" BorderColor="black">34 <Header>35 <table width="100%" bgcolor="silver">36 <tr>37 <td>Pane 1</td>38 </tr>39 </table>40 </Header>41 <Content>42 <asp:TreeView ID="treeview" runat="server" ShowLines="true" />43 <asp:TextBox ID="txt" runat="server" />44 </Content>45 </atlasToolkit:AccordionPane>46 <atlasToolkit:AccordionPane ID="Pane2" runat="server" BorderColor="black">47 <Header>48 <table width="100%" bgcolor="olive">49 <tr>50 <td>Pane 2</td>51 </tr>52 </table>53 </Header>54 <Content>Content Here</Content>55 </atlasToolkit:AccordionPane>56 </atlasToolkit:Accordion>57 </div>58 </form>59</body>60</html>

Hi Chris,

This isissue 1560 and we're hoping to get it fixed by the next release.

Thanks,
Ted

Ted,

Is this issue fixed in the latest release?

My current workaround is to add a panel with a vertical scrollbar. I would like it to look cleaner without the panel..

Chris


Hi Ted,

I saw that this issue was marked as closed. But my example running on IE7 with today's release (12/14) still yields the same result.

Thanks,
Chris

Ted, here is an updated version of the code that works with the RTM.

this is still not working correctly. open the treeview and you'll see what I mean.

<%@. Page Language="VB" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Dim tree As TreeView = Pane1.ContentContainer.FindControl("treeview")
Dim node As TreeNode
Dim root As New TreeNode
root.Text = "root"
tree.Nodes.Add(root)
Dim x As Integer
For x = 1 To 10
node = New TreeNode
node.Text = "Data " & x.ToString
root.ChildNodes.Add(node)
Next
tree.CollapseAll()
End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Accordion/Treeview Test</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="Script" runat="server" />
<ajaxToolkit:Accordion ID="acc" runat="server" Width="300" FadeTransitions="true"
FramesPerSecond="40" TransitionDuration="250">
<panes>
<ajaxToolkit:AccordionPane ID="Pane1" runat="server" BorderColor="black">
<Header>
<table width="100%" bgcolor="silver">
<tr>
<td>Pane 1</td>
</tr>
</table>
</Header>
<Content>
<asp:TreeView ID="treeview" runat="server" ShowLines="true" />
<asp:TextBox ID="txt" runat="server" />
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="Pane2" runat="server" BorderColor="black">
<Header>
<table width="100%" bgcolor="olive">
<tr>
<td>Pane 2</td>
</tr>
</table>
</Header>
<Content>Content Here</Content>
</ajaxToolkit:AccordionPane>
</panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>


Im having the same problems with the latest release but with the new calendar extender - when i click into my textbox and the calendar pops up it is hidden behind the accordion. It looks like the same problem as the treeview bug in that anything dynamic and the accordion panes dont re-size.

Does anyone have a workaround for this problem??

TIA


Ive found that if you remove the cssclass from the calendar extender the problem goes away and the calendar pops up outside the accordion.


I have the exact same issue as CConchel describes, however with a CollapsiblePanelExtender. There seem to be quite some issues, even on this Forum, regarding dynamic resizing of the AccordionControl where content is just truncated. However, I still have found no solution for this problem. I found a similar issue with a javascript solution but have no clue on how to implement this.

Ted:
It doesn't seem to be fixed in the latest release of the toolkit (Release 10201 - feb-01-2007)

Omen:
For me, removing the CssClass from all elements does not seem to work in this case.

Does anyone have asolution - or workaround - for this?


This seems to be fixed in theupcoming 10301 release of the toolkit. I have compiled the development build from CodePlex and it works, along side with many other fixes (such as IE crash and such).

Well done, guys!


Hi,

Yes, we've completely reworked the Accordion so its layout will be a lot more flexible - thanks mostly to feedback generated via these forums and CodePlex. We just shipped the latest release, so try it if you haven't already.

Thanks,
Ted

No comments:

Post a Comment