[CLOSED] Road-block: ReRendering GroupTabPanel with Portlets causes exception

  1. #1

    [CLOSED] Road-block: ReRendering GroupTabPanel with Portlets causes exception

    Click the ReRender button at bottom.
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    
    <script runat="server">
        protected void Page_Load( object sender, EventArgs e ) {
        }
        [DirectMethod( IDMode = DirectMethodProxyIDMode.None, ShowMask = true )]
        public void Click() {
            GP.ReRender();
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    
    
    <title>Test</title>
    
    
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    
    
    <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Development" SourceFormatting="true" IDMode="Explicit" />
    
    
    
    
    <ext:Viewport runat="server" Layout="VBoxLayout">
    <LayoutConfig>
        <ext:VBoxLayoutConfig Align="Stretch" />
    </LayoutConfig>
    <Items>
            <ext:Panel ID="Panel1" runat="server" Border="false" BodyBorder="0" Flex="1" Layout="VBoxLayout">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:GroupTabPanel ID="GP" runat="server" TabWidth="130" ActiveGroupIndex="0" Border="false" Cls="GTabSel" Flex="1" AutoScroll="true">
                <Items>
                    <ext:Panel runat="server">
                    <Items>
                        <ext:Portal runat="server" Title="Test 1" Cls="TagPort" >
                        <Items>
                            <ext:PortalColumn ID="PortalColumn1" runat="server" Cls="PortCol" BodyCls="PortColB" ColumnWidth="0.5" >
                            <Items>
                                <ext:Portlet ID="Portlet1" runat="server" Title="Portlet 1" Border="false" Cls="Port" BodyCls="PortB">
                                <Items>
                                    <ext:MenuPanel runat="server" Title="Menu Panel" Frame="true" Collapsible="true" Closable="false" Margin="4" Cls="MPan" BodyCls="MPanB" Border="false" BodyBorder="0" Icon="Music">
                                    </ext:MenuPanel>
                                </Items>
                                </ext:Portlet>
                                <ext:Portlet ID="Portlet3" runat="server" Title="Portlet 3" Padding="6" >
                                <Items>
                                    <ext:MenuPanel runat="server" Title="Test" Frame="true" Collapsible="true">
                                    </ext:MenuPanel>
                                </Items>
                                </ext:Portlet>
                            </Items>
                            </ext:PortalColumn>
                            <ext:PortalColumn ID="PortalColumn3" runat="server" Cls="PortCol" BodyCls="PortColB" ColumnWidth="0.5">
                                <Items>
    
    
                                    <ext:Portlet ID="Portlet5" runat="server" Title="Portlet 1" Border="false" Cls="Port" BodyCls="PortB">
                                        <Items>
    
    
                                            <ext:MenuPanel ID="MenuPanel2" runat="server" Title="Event Type" Frame="true" Collapsible="true" Closable="false" Margin="4" Cls="MPan" BodyCls="MPanB" Border="false" BodyBorder="0" Icon="ArrowRight">
                                                <Menu>
                                                    <Items>
                                                        <ext:MenuItem ID="MenuItem4" runat="server" Text="Test1" Href="/" Icon="ArrowRight" />
                                                        <ext:MenuItem ID="MenuItem5" runat="server" Text="Test2" Href="/" Icon="ArrowRight" />
                                                        <ext:MenuItem ID="MenuItem6" runat="server" Text="Test3" Href="/" Icon="ArrowRight" />
                                                    </Items>
                                                </Menu>
                                            </ext:MenuPanel>
    
    
                                        </Items>
                                    </ext:Portlet>
                                </Items>
                            </ext:PortalColumn>
                        </Items>
                        </ext:Portal>
                    </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel2" runat="server">
                    <Items>
                        <ext:Portal ID="Portal2" runat="server" Title="Test2" Cls="TagPort">
                        <Items>
                            <ext:PortalColumn ID="PortalColumn2" runat="server" Cls="PortCol" ColumnWidth=".5">
                            <Items>
                                    <ext:Portlet ID="Portlet2"
                                        runat="server"
                                        Title="Portlet 1"
                                        Padding="6" >
                                    <Items>
                                            <ext:MenuPanel ID="MenuPanel1" runat="server" Title="Test" Frame="true" Collapsible="true">
                                            <Menu runat="server">
                                                <Items>
                                                    <ext:MenuItem ID="MenuItem1" runat="server" Text="Test1" Href="/" />
                                                    <ext:MenuItem ID="MenuItem2" runat="server" Text="Test2" Href="/" />
                                                    <ext:MenuItem ID="MenuItem3" runat="server" Text="Test3" Href="/" />
                                                </Items>
                                            </Menu>
                                            </ext:MenuPanel>
                                    </Items>
                                    </ext:Portlet>
                                    <ext:Portlet ID="Portlet4"
                                        runat="server"
                                        Title="Portlet 1"
                                        Padding="6" />
                            </Items>
                            </ext:PortalColumn>
                        </Items>
                        </ext:Portal>
                    </Items>
                    </ext:Panel>
                    <ext:Panel ID="Panel3" runat="server">
                        <Items>
                            <ext:Portal ID="Portal1" runat="server" Title="Test3" Cls="TagPort">
                                <Items>
                                </Items>
                            </ext:Portal>
                        </Items>
                    </ext:Panel>
    
    
                </Items>
                </ext:GroupTabPanel>
            </Items>
                <Buttons>
                    <ext:Button ID="Button1" runat="server" Text="Refresh"  OnClientClick="App.direct.Click" />
                </Buttons>
        </ext:Panel>
    </Items>
    </ext:Viewport>
    </form>
    </body>
    Last edited by Daniil; Feb 11, 2014 at 3:07 PM. Reason: [CLOSED]
  2. #2
    Thanks for the report. Fixed in SVN
    Just one note, please set ID for first portal widget. GroupTabPanel submits active tab id to the server, in your case it will be dynamic id (like 'portalpanel-1011'). That id will rendered in the config of grouptabpanel when you rerender that widget (activeTab: 'portalpanel-1011') and you will get the error because such widget is absent (extjs renders it with new auto id)
  3. #3
    Okay, after SVN and adding an ID to the Portlet, I was able to get my test sample working but my production version is constructed entirely dynamically from data in the database so it's harder to represent.

    I'm still getting an error after ensuring that I set the ID for the Portlet (as below).
    		// Create Portal
    		var port = new Portal() {
    			Title = key, Border=false,
    			Cls="Port", BodyCls="PortB",
    			ID="Port"+id.ToString()
    		};
    Is it possible there are other IDs that are essential to set? In my production case, I don't set them for PortalColumn,MenuPanel, or MenuItem. Do these also need this id explicitly set for rerender?

    This is the stack trace and error:
    
    

    It's virtually impossible to debug inside a VM without newlines so I'm at a loss for how I can identify which id is invalid.
  4. #4
    Well, you can set Type=Load for DirectEvent to avoid data submiting. In this case, that error should gone
  5. #5
    Quote Originally Posted by Vladimir View Post
    Well, you can set Type=Load for DirectEvent to avoid data submitting. In this case, that error should gone
    Unfortunately I need to rely on form data be passed. That's why I asked if there might be other IDs that need to be explicitly set. I'm trying to set all now to see if that solves the problem.
  6. #6
    Okay, so the last issue isn't ids. It was an issue on my side.


    However, I'm very curious. I'm finding a lot of my ids are changing on the rerender inside the GrouptTabPanel vs original Refresh

    Example, on Refresh, the id for this is: ctl00_cp_ctl05_ctl06_Port0_MP2
    On rerender its: ctl00_cp_idff36a00c771c469f_id71df5aa8624f2e1b_Por t2_MP2

    Any thoughts on how/why that can change?
  7. #7
    Just do not rely on auto ID, during dynamic rendering we do not render auto ID or replace it by unique id because ASP.NET auto id (like ctl43 and etc) is not unique and can conflict with already rendered widgets.

    So, ignore auto ID or use IDMode to change how id is generated
  8. #8
    Resource Manager is set to Explicit. You mean <pages> in web.config? Okay, I've switched to predictable. Is that what you mean?
    Last edited by michaeld; Feb 06, 2014 at 11:06 AM.
  9. #9
    Explicit means that Ext.Net will not render render auto ID but if control has explicit ID then it will be rendered (ClientID will be rendered)
    If control is placed inside INamingContainer (user control, master page and etc) then its ClientID doesn't equal ID, it will be looled as
    ctl00_cp_ctl05_ctl06_Port0_MP2
    You can use another IDMode for particular control (for example, Static) to change ClientID generation. If you use Static then ClientID == ID, just ensure that ID is unique inside whole Page context

Similar Threads

  1. Replies: 2
    Last Post: Jan 29, 2014, 7:42 PM
  2. Replies: 4
    Last Post: Dec 13, 2013, 5:13 AM
  3. Replies: 14
    Last Post: Jun 17, 2013, 8:36 AM
  4. Learning road map
    By galessio in forum 2.x Help
    Replies: 0
    Last Post: Aug 09, 2012, 2:01 AM
  5. [CLOSED] Coolite Road Blocks in Version 1.0
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 09, 2010, 5:04 PM

Posting Permissions