I have nested accordion controls, with an asp Image in the headers.
On the first pane header, the icon display properly any icon after that (even on the first level) appear as broken/missing images (the white box with red cross).
Here is a sample code:
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" EnableScriptGlobalization="true" EnableScriptLocalization="true" />
<ajaxToolkit:Accordion ID="Accordion1" runat="server" FadeTransitions="True" TransitionDuration="300" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" RequireOpenedPane="false">
<Panes>
<ajaxToolkit:AccordionPane id="AccordionPane1" runat="server">
<Header><asp:Image ID="Image1" runat="server" /> <asp:Label ID="Label1" runat="server" Text=""></asp:Label></Header>
<Content>
<ajaxToolkit:Accordion ID="Accordion2" runat="server" FadeTransitions="True" TransitionDuration="300" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" RequireOpenedPane="false">
<Panes>
<ajaxToolkit:AccordionPane id="AccordionPane4" runat="server">
<Header><asp:Image ID="Image2" runat="server" /></Header>
<Content>
Content of pane 1
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane id="AccordionPane5" runat="server">
<Header></Header>
<Content>
Content of pane 5
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane id="AccordionPane6" runat="server">
<Header></Header>
<Content>
Content of Pane 6
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane id="AccordionPane2" runat="server">
<Header><asp:Image ID="Image5" runat="server" /> <asp:Label ID="Label4" runat="server" Text=""></asp:Label></Header>
<Content>
Content of pane 2
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</asp:Content>
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
}
else
{
Label1.Text = "Level 1 - pane 1";
Image1.ImageUrl = "~/images/error.ico";
Image1.Width = 16;
Image1.Height = 16;
Image2.ImageUrl = "~/images/error.ico";
Image2.Width = 16;
Image2.Height = 16;
Label4.Text = "Level 1 - pane 2";
Image5.ImageUrl = "~/images/error.ico";
Image5.Width = 16;
Image5.Height = 16;
}
}
If I remove the <asp:Image ID="Image2" runat="server" /> from AccordionPane4, the icon on AccordionPane2 is displaying properly. Otherwise it appear broken, along with any icon in the sub accordion.
Comments: This ticket was filed for a pre-15.1 version of AJAX Control Toolkit. If this is still an issue in v15.1 or later, please create a new inquiry.
On the first pane header, the icon display properly any icon after that (even on the first level) appear as broken/missing images (the white box with red cross).
Here is a sample code:
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" EnableScriptGlobalization="true" EnableScriptLocalization="true" />
<ajaxToolkit:Accordion ID="Accordion1" runat="server" FadeTransitions="True" TransitionDuration="300" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" RequireOpenedPane="false">
<Panes>
<ajaxToolkit:AccordionPane id="AccordionPane1" runat="server">
<Header><asp:Image ID="Image1" runat="server" /> <asp:Label ID="Label1" runat="server" Text=""></asp:Label></Header>
<Content>
<ajaxToolkit:Accordion ID="Accordion2" runat="server" FadeTransitions="True" TransitionDuration="300" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" RequireOpenedPane="false">
<Panes>
<ajaxToolkit:AccordionPane id="AccordionPane4" runat="server">
<Header><asp:Image ID="Image2" runat="server" /></Header>
<Content>
Content of pane 1
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane id="AccordionPane5" runat="server">
<Header></Header>
<Content>
Content of pane 5
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane id="AccordionPane6" runat="server">
<Header></Header>
<Content>
Content of Pane 6
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane id="AccordionPane2" runat="server">
<Header><asp:Image ID="Image5" runat="server" /> <asp:Label ID="Label4" runat="server" Text=""></asp:Label></Header>
<Content>
Content of pane 2
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</div>
</asp:Content>
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
}
else
{
Label1.Text = "Level 1 - pane 1";
Image1.ImageUrl = "~/images/error.ico";
Image1.Width = 16;
Image1.Height = 16;
Image2.ImageUrl = "~/images/error.ico";
Image2.Width = 16;
Image2.Height = 16;
Label4.Text = "Level 1 - pane 2";
Image5.ImageUrl = "~/images/error.ico";
Image5.Width = 16;
Image5.Height = 16;
}
}
If I remove the <asp:Image ID="Image2" runat="server" /> from AccordionPane4, the icon on AccordionPane2 is displaying properly. Otherwise it appear broken, along with any icon in the sub accordion.
Comments: This ticket was filed for a pre-15.1 version of AJAX Control Toolkit. If this is still an issue in v15.1 or later, please create a new inquiry.