Dynamic HTML Content in Accordion Control

Page 2 of 3 FirstFirst 123 LastLast
  1. #11

    still having issues

    Is there any documentation on the Ext.Net.MVC.PartialViewResult? I hate having to ask all these questions, but I can't seem to find any documentation.

    I still can't get this working. In my real solution I get a popup panel 500 error saying it can't find "accEventsPanel".

    On the test project, i can't even make it that far. I get an error in the ExecuteResult method in PartialViewResult.cs at

    string script = controlToRender.ToScript(this.RenderMode, ct, true);

    HomeController.cs
    ------------------------
    using System.Web.Mvc;
    
    namespace ExtTest.Controllers
    {
        [HandleError]
        public class HomeController : Controller
        {
            public ActionResult Index()
            {
                ViewData["Message"] = "Welcome to ASP.NET MVC!";
    
                return View();
            }
    
            public ActionResult HomeTab()
            {
                Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult("homeTab");
                return pr;
            }
        }
    }

    Index.aspx
    ----------------
    <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
     <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
        Home Page
    </asp:Content>
     
    <asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
    
        <ext:ResourceManager ID="ResourceManager1" runat="server"   />
           <div style="clear:both; height:25px;"></div>
            <ext:Panel ID="GroupPageWrapper" runat="server" Width="900" Border="false">
                <Items>
                    <ext:TabPanel Plain="true" ID="tpGroupTabs" runat="server" ActiveTabIndex="0" Padding="20" TabWidth="200">
                        <Items>
                            <ext:Panel ID="homeTab" runat="server"  Title="Home" Height="500">
                                     <AutoLoad Url="/Home/HomeTab" NoCache="true" ShowMask="true" />
                            </ext:Panel>
                            <ext:Panel ID="tabCalendar" runat="server" Closable="false" Title="Calendar" Height="500" Layout="fit">
                               <Items>
                                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                                        <West Collapsible="true" Split="true">
                                            <ext:Panel ID="Panel4" runat="server" Title="Quick Date" Width="150">
                                                <Items>
                                                    <ext:DatePicker 
                                                        ID="DatePicker1" 
                                                        runat="server" 
                                                        Cls="ext-cal-nav-picker">
                                                        <%-- <Listeners>
                                                            <Select Fn="CompanyX.setStartDate" Scope="CompanyX" />
                                                        </Listeners>--%>
                                                    </ext:DatePicker>
                                                </Items>
                                                <TopBar>
                                                    <ext:Toolbar ID="Toolbar1" runat="server">
                                                        <Items>
                                                            <ext:Button 
                                                                ID="Button1"
                                                                runat="server" 
                                                                Text="Save All Events" 
                                                                Icon="Disk" 
                                               
                                                                />
                                                        </Items>
                                                    </ext:Toolbar>
                                                </TopBar>
                                            </ext:Panel>
                                        </West>
                                        <Center>
                                            <ext:Panel ID="Panel5" runat="server" Title="Group Calendar" Layout="Fit" Header="false">
                                                 <Items>
                                                    <ext:CalendarPanel
                                                        ID="CalendarPanel1" 
                                                        runat="server"
                                                        Region="Center"
                                                        ActiveIndex="2"
                                                        Border="false">
                                                        <GroupStore ID="GroupStore1" runat="server">
                                                            <Groups>
                                                                <ext:Group CalendarId="1" Title="Home" />
                                                                <ext:Group CalendarId="2" Title="Work" />
                                                                <ext:Group CalendarId="3" Title="School" />
                                                            </Groups>
                                                        </GroupStore>
                                                        <EventStore ID="EventStore1" runat="server">
                                                            <Events>
                                                                <ext:Event
                                                                    Title="My event"
                                                                    StartDate="2010/10/13"
                                                                    EndDate="2010/10/13" />
                                                            </Events>
                                                        </EventStore>
                                                        <%--<EventStore ID="EventStore1" runat="server" DateFormat="M$">
                                                            <Proxy>
                                                                <ext:HttpProxy Url="../Shared/Code/RemoteService.asmx/GetEvents" Json="true" />
                                                            </Proxy>
                                                            <Reader>
                                                                <ext:JsonReader Root="d" />
                                                            </Reader>
                                                            <BaseParams>
                                                                <ext:Parameter Name="start" Value="" Mode="Value" />
                                                                <ext:Parameter Name="end" Value="" Mode="Value" />
                                                            </BaseParams>
                                                        </EventStore>--%>
                                                        <MonthView ID="MonthView1" 
                                                            runat="server" 
                                                            ShowHeader="true" 
                                                            ShowWeekLinks="true" 
                                                            ShowWeekNumbers="true" 
                                                            />  
                                                       <%-- <Listeners>
                                                            <ViewChange  Fn="CompanyX.viewChange" Scope="CompanyX" />
                                                            <EventClick  Fn="CompanyX.record.show" Scope="CompanyX" />
                                                            <DayClick    Fn="CompanyX.dayClick" Scope="CompanyX" />
                                                            <RangeSelect Fn="CompanyX.rangeSelect" Scope="CompanyX" />
    
                                                            <EventMove   Fn="CompanyX.record.move" Scope="CompanyX" />
                                                            <EventResize Fn="CompanyX.record.resize" Scope="CompanyX" />
                                                            <EventDelete Fn="CompanyX.record.remove" />
                                                        </Listeners>               --%>           
                                                    </ext:CalendarPanel>
                                                </Items>
                                            </ext:Panel>
                                        </Center>
                                        <East Collapsible="true" Split="true">
                                            <ext:Panel ID="Panel6" runat="server" Title="Event Info" Width="100" Collapsed="true">
                                            </ext:Panel>
                                        </East>
                                        <South Collapsible="true" Split="true">
                                            <ext:Panel ID="Panel7" runat="server" Height="150" Title="Event Details" Collapsed="true">
                                                <Items>
                                                    <ext:EventEditWindow 
                                                        ID="EventEditWindow1" 
                                                        runat="server"
                                                        Hidden="true"
                                                        GroupStoreID="GroupStore1">
                                                        <%-- <Listeners>
                                                            <EventAdd    Fn="CompanyX.record.add" Scope="CompanyX" />
                                                            <EventUpdate Fn="CompanyX.record.update" Scope="CompanyX" />
                                                            <EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />
                                                            <EventDelete Fn="CompanyX.record.remove" Scope="CompanyX" />
                                                        </Listeners>--%>
                                                     </ext:EventEditWindow>
                                                 </Items>
                                             </ext:Panel>
                                        </South>
                                    </ext:BorderLayout>
                                     
                               </Items>
                                
                            </ext:Panel>
                            <ext:Panel ID="tab3" runat="server" Title="tab3">
                            </ext:Panel>
                            <ext:Panel ID="tab4" runat="server" Title="tab4">
                            </ext:Panel>
                            <ext:Panel ID="tab5" runat="server" Title="tab5">
                            </ext:Panel>
                            <ext:Panel ID="tab6" runat="server" Title="tab6" TabTip="Click here to Join this Group">
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Panel>
    </asp:Content>

    HomeTab.ascx
    -----------------
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
        <script runat="server">
            protected void LoadCalendarEvents(object sender, DirectEventArgs e)
            {
                string content = "";
                content += "<div style='padding:0px 5px 5px 5px; width:95%'> - No upcoming events.</div>";
                this.accEventsPanel.Update(content);
                //this.accEventsPanel.UpdateContent();
            }
    
        </script>
    
     <ext:ResourceManager ID="rmHomeTab" runat="server" /> 
    
    <table width="100%">
      <tr>
        <td style="width:50%;">
            <div id="MessagingTabs" class="yui-navset">
                yui tabs
            </div>
        </td>
        
        <!-- 2nd column Events -->
        <td style="width:50%; padding:5px 2px 2px 20px;" valign="top">
            <div id="GroupHomePortal-Right">
    
                <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" >
                                   <Items></Items>
                                    <DirectEvents>
                                        <AfterRender OnEvent="LoadCalendarEvents"></AfterRender> 
                                    </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>
            </div>
             
        </td>
       </tr>
    </table>
  2. #12

    resource manager

    ok, it might be because i have 2 resource managers, but even when i remove the one of the home tab, i continue to get different errors. 'insertAdjacentHTML' is null or not an object is one of the errors when i only have 1 resource manager and I'm not specifying the PartialViewResult.RenderMode.

    then i get the same error that I get in my other project which is the accEventsPanel 500 popup error.

    I also get different errors based upon the PartialViewResult.RenderMode. I'm curious to know what the difference between each one is and when you would use them.
    Last edited by craig2005; Dec 27, 2010 at 4:05 AM.
  3. #13
    Hi,

    1. Do not add ResourceManager to partial views
    2. You have to render inside body (not directly to the panel) therefore pass body id as parameter
    <ext:Panel ID="Panel1" runat="server">
                            <AutoLoad Url="/Partial/View1" NoCache="true">      
                                <Params>
                                    <ext:Parameter Name="containerId" Value="function () { return #{Panel1}.body.id; }" Mode="Raw" />
                                </Params>                      
                            </AutoLoad>
                        </ext:Panel>
    
    public ActionResult View1(string containerId)
            {
                PartialViewResult pr = new PartialViewResult(containerId);
                return pr;
            }
    3. RenderMode :
    - Render: render the control to the defined DOM element
    - Add: add Ext.Net widget to Items collection of defined container (in this case rendered widget can participate in layout logic)
  4. #14
    Hi,

    then i get the same error that I get in my other project which is the accEventsPanel 500 popup error.
    Please see FireBug to determione response text for request with 500 error status. I guess that you use different assemblies. For example, you built Ext.Net.MVC with one version of Ext.Net but you add another Ext.Net to the web application

    Also, please note that you cannot use DirectEvents in the partial view because partial view instance is inaccessible on the server after rendering. Please use controller actions instead direct events
  5. #15

    DirectEvents

    I created the MVC.dll with the same Ext dlls that are in my project.

    Also, please note that you cannot use DirectEvents in the partial view because partial view instance is inaccessible on the server after rendering. Please use controller actions instead direct events
    Can you please give me an example of using a controller action for this? I'm not sure I understand what you mean.

    Will Listeners work in partial views? I was planning on moving the entire calendar to a partial view.

    Would the OnPreRender work in a partial view

    <ext:Panel ID="accEventsPanel" runat="server" Border="false" Title="Events" OnPreRender="LoadCalendarEvents"  >
         <Items></Items>
    </ext:Panel>
    The idea is to have one Group.aspx file. In that file is a tab layout. Each tab would then dynamically load it's own ASCX file and some of the ASCX files would dynamically load other ASCX files. Much like the example i copied and pasted with the calendar on the second tab. The only difference is that the calendar would be in a partial view. This is possible right? And the resource manager will know about everything that's going on?

    thanks,

    Craig
    Last edited by craig2005; Dec 27, 2010 at 3:51 PM.
  6. #16

    timeline of events

    I think my timeline of events is wrong or I'm missing something. Sorry for all the questions, i'm just trying to get grounded on a few basic principles needed for your implementation.

    Why does this not work? I removed the DirectEvents and used the Page_Load instead.

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
        <script runat="server" onload="LoadCalendarEvents">
            protected void Page_Load(Object sender, EventArgs e)
            {
                string content = "";
                content += "<div style='padding:0px 5px 5px 5px; width:95%'> - No upcoming events.</div>";
                this.accEventsPanel.Update(content);
            }
    
        </script>
    
    
    <table width="100%">
      <tr>
        <td style="width:50%;">
            <div id="MessagingTabs" class="yui-navset">
                yui tabs
            </div>
        </td>
        
        <!-- 2nd column Events -->
        <td style="width:50%; padding:5px 2px 2px 20px;" valign="top">
            <div id="GroupHomePortal-Right">
    
                <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">
                                   <Items></Items>
                                </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>
            </div>
             
        </td>
       </tr>
    </table>
  7. #17
    Hi,

    During first request for partial view please use Html property
    protected void Page_Load(Object sender, EventArgs e)
            {
                string content = "";
                content += "<div style='padding:0px 5px 5px 5px; width:95%'> - No upcoming events.</div>";
                this.accEventsPanel.Html = content;
            }
  8. #18

    tried that

    I already tried that.

    <script runat="server">
            protected void Page_Load(Object sender, EventArgs e)
            {
                string content = "";
                content += "<div style='padding:0px 5px 5px 5px; width:95%'> - No upcoming events.</div>";
                this.accEventsPanel.Html = content;
                //Ext.Net.Panel p = new Ext.Net.Panel();
                //p.ID = "accEventDetails";
                //p.Html = content;
                //p.AddTo(accEventsPanel);
                
            }
    
        </script>
    The problem is that when you collapse then expand the control again, the content is gone.
  9. #19

    any ideas

    anyone have any idea how to do this or why expanding and collapsing the control removes the content?
  10. #20
    Hi,

    Please set Height for AccordianPanel
Page 2 of 3 FirstFirst 123 LastLast

Similar Threads

  1. How to content <%=Html.TextArea()%>
    By qch2006qch in forum 1.x Help
    Replies: 0
    Last Post: Jan 19, 2012, 2:54 AM
  2. Replies: 1
    Last Post: May 28, 2010, 1:13 PM
  3. Replies: 3
    Last Post: Mar 01, 2010, 4:55 AM
  4. [CLOSED] panel content as html
    By alexp in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 01, 2009, 6:53 AM
  5. Dynamic Accordion Items
    By danr in forum 1.x Help
    Replies: 3
    Last Post: Jan 09, 2009, 9:13 PM

Posting Permissions