Dynamic HTML Content in Accordion Control

[craig2005]

I'm trying to load dynamic content to an accordion control. However, i've been having issues. I've tried different variations of the code below and I can't seem to dynamically inject html.

Here's my accordionPanel

<ext:Panel ID="mpAccordionPanel" Title="What's Happening" runat="server">
            <Items>
            <ext:AccordionLayout ID="AccordionLayout1" runat="server" Animate="true">
                <Items>
                    <ext:Panel ID="accEventsPanel" runat="server" Border="false" Title="Events" >
                       <Items></Items>
                        <DirectEvents>
                            <BeforeRender OnEvent="LoadCalendarEvents"></BeforeRender> 
                        </DirectEvents>
                    </ext:Panel>
                    <ext:Panel ID="Panel2" runat="server" Border="false" Collapsed="true" Title="Item 2">
                        <Items>
                        </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel3" runat="server" Border="false" Collapsed="true" Title="Item 2">
                        <Items>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:AccordionLayout>
            </Items>
            </ext:Panel>

At the top of the page, i have the following code that should be triggered from the DirectEvents.

<script runat="server">
        protected void LoadCalendarEvents()
        {
            string content = "";
            var events = (Session["GroupMembership"] as GroupMembership).UpcomingEvents.ToList();

            if (events.Count > 0)
            {
                foreach (var evnt in events)
                {
                    content += "<div style='padding:5px 5px 5px 5px; width:95%;'>" +
                        "<table><tr><td><img alt='event' src='../../Content/img/icon-calendar.gif' /></td>" +
                        "<td style='padding-left:5px;'><span style='font-weight:bold'>" + evnt.title + "</span> - <span style='font-size:smaller'>" + evnt.start_time + "</span></td>" +
                        "</tr></table></div>";
                }
            }
            else
            {
                content += "<div style='padding:0px 5px 5px 5px; width:95%'> - No upcoming events.</div>";
            }
            this.accEventsPanel.ContentContainer.InnerHtml = content;
            this.accEventsPanel.UpdateContent();
        }

    </script>

So basically, how do I load content inside of an accordion panel. Does it need to be in an <item> tag?

[Vladimir]

Hi,

Please use LiteralControl

this.accEventsPanel.ContentControls.Add(new LiteralControl("Html"));
this.accEventsPanel.UpdateContent();

Another variant:

this.accEventsPanel.Update("htmlString");

Also, signature of your DirectEvent handler is incorrect, should be

protected void LoadCalendarEvents(object sender, DirectEventArgs e)

[craig2005]

this still doesn't work. I tried the this.accEventsPanel.Update(content) as well.

 <script runat="server">
        protected void LoadCalendarEvents(object sender, DirectEventArgs e)
        {
            string content = "";
            var events = (Session["GroupMembership"] as GroupMembership).UpcomingEvents.ToList();

            if (events.Count > 0)
            {
                foreach (var evnt in events)
                {
                    content += "<div style='padding:5px 5px 5px 5px; width:95%;'>" +
                        "<table><tr><td><img alt='event' src='../../Content/img/icon-calendar.gif' /></td>" +
                        "<td style='padding-left:5px;'><span style='font-weight:bold'>" + evnt.title + "</span> - <span style='font-size:smaller'>" + evnt.start_time + "</span></td>" +
                        "</tr></table></div>";
                }
            }
            else
            {
                content += "<div style='padding:0px 5px 5px 5px; width:95%'> - No upcoming events.</div>";
            }
            this.accEventsPanel.ContentControls.Add(new LiteralControl(content));
            this.accEventsPanel.UpdateContent();
        }

    </script>

         <ext:Panel ID="AccordianPanel" Title="What's Happening" runat="server">
                <Items>
                    <ext:AccordionLayout ID="AccordionLayout1" runat="server" Animate="true">
                        <Items>
                            <ext:Panel ID="accEventsPanel" runat="server" Border="false" Title="Events" OnLoad="LoadCalendarEvents" >
                               <Items></Items>
                                <DirectEvents>
                                    <BeforeRender OnEvent="LoadCalendarEvents"></BeforeRender> 
                                </DirectEvents>
                            </ext:Panel>
                            <ext:Panel ID="Panel2" runat="server" Border="false" Collapsed="true" Title="Item 2">
                                <Items>
                                </Items>
                            </ext:Panel>
                            <ext:Panel ID="Panel3" runat="server" Border="false" Collapsed="true" Title="Item 2">
                                <Items>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:AccordionLayout>
                </Items>
            </ext:Panel>

[Vladimir]

Hi,

Please show full test sample which demonstrates the issue

[craig2005]

i created a new slimmed down project. still the same issue.

The project is 4.83MB. I can only upload zip files under 25Kb so i had to strip a lot out but all the code is still there.


Craig

[Vladimir]

Hi,

You have to use PartialViewResulr from Ext.Net.MVC
Please see
http://mvc.ext.net/
http://code.google.com/p/extnet-mvc/
http://extnet-mvc.googlecode.com/svn/trunk

[craig2005]

so I have to used the Ext.Net.Mvc dlls?

Can i still use all the same Ext widgets? Do i just need the Ext.Net.Mvc when using partial views?

My hesitation is that if Ext.net.mvc is completely different, then I don't want to be walking into something half baked.

[craig2005]

Looking at the MVC source code, it looks like it's just one added DLL that is used for additional MVC support, right?

Looks pretty cool too. If this works, all our Telerik code is definitely getting converted to EXT.net

[Vladimir]

Hi,

so I have to used the Ext.Net.Mvc dlls?
Can i still use all the same Ext widgets? Do i just need the Ext.Net.Mvc when using partial views?

Ext.Net.MVC is additional project which must be used with Ext.Net. It contains additinal result classes and helpers for work with Ext.Net under ASP.NET MVC

Regarding your sample, please use PartialViewResult class from Ext.Net.MVC (you can see examples with PartialViewResult in the mvc.ext.net sample application (left menu: Examples -> Partial Views) )

P.S. In the Ext.Net 2.0 we are planning to add support for Razor engine

[craig2005]

Good idea. The razor syntax is much better and cleaner to use.

Honestly, you guys are awesome.

Craig