Wednesday, March 21, 2012

Use DynamicPopulateExtender on AccordionPane content

Hi Folks,

Warning: I'm quite new at AJAX so I may be missing something obvious.

I just want to defer population of some AccordionPane conent until the pane is actually clicked. I tried using a DynamicPopulateExtender, but I cant seem to hook up the PopulateTriggerControlID to an AccordianPane(no errors, just doesnt seem to fire). If I hook it up to the Accordian instead, it fires, but oddly enough only fires when clicking the content (any content, of any pane) but not clicking any header, which doesnt do me much good anyway.

See anything i'm missing here? Is there an easy way to do this?

Thanks much in advance, code follows.

Greg

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test dynamic accordian content</title>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<div>
<ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0" SuppressHeaderPostbacks="True" >
<Panes>

<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>header1</Header>
<Content>content1</Content>
</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>header2 </Header>
<Content>
<asp:Panel ID="Panel2" runat="server" Height="50px" Width="100%">static content</asp:Panel>
<ajaxToolkit:DynamicPopulateExtender ID="dp2" runat="server" TargetControlID="Panel2" ServiceMethod="GetHTML" PopulateTriggerControlID="AccordionPane2" />
</Content>
</ajaxToolkit:AccordionPane>

</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>
<script runat="server">
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static string GetHTML(string contextKey)
{
return "some dynamic content"+contextKey;
}
</script>

Hi Greg,

The problem is caused by not specifying correct id. I changed your code a little bit, and place a span element with a specified id in the header. Then use it as the trigger.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Test dynamic accordian content</title>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<div>
<ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0" SuppressHeaderPostbacks="True" >
<Panes
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>header1</Header>
<Content>content1</Content>
</ajaxToolkit:AccordionPane
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>
<span id="hd2">Header2</span>
</Header>
<Content>
<asp:Panel ID="Panel2" runat="server" Height="50px" Width="100%">static content</asp:Panel>
<ajaxToolkit:DynamicPopulateExtender ID="dp2" runat="server" TargetControlID="Panel2" ServiceMethod="GetHTML" PopulateTriggerControlID="hd2" />
</Content>
</ajaxToolkit:AccordionPane
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>
<script runat="server">
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static string GetHTML(string contextKey)
{
return "some dynamic content" + DateTime.Now.ToString() + contextKey;
}

</script>


Thanks Ramond! You da man!!

Greg

No comments:

Post a Comment