[CLOSED] UserControlRendererConfig RenderModes

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] UserControlRendererConfig RenderModes

    I've found that UserControlRenderConfig.RenderModes do the following:
    • Replace - replaces the parent control with the added control
    • AddTo/InsertTo - replaces the parent's child with the new usercontrol


    But there is no way to AppendTo or InsertWithin. The client may already have added a control or two on the client-side, but these will get overwritten with AddTo or InsertTo (because the server doesn't have access to these items). I should be able to click a button, and add an unlimited number of new controls to the client without replacing the ones on the client already present.
    Last edited by Baidaly; Dec 17, 2013 at 8:40 PM. Reason: [CLOSED]
  2. #2
    Hello!

    According to description of this RenderModes:

    AddTo - Add the control to items collection of the element

    InsertTo - Insert the control to items collection of the element


    But I guess you mean that you want to append the control to the same container?
  3. #3
    Quote Originally Posted by Baidaly View Post
    According to description of this RenderModes:
    AddTo - Add the control to items collection of the element
    InsertTo - Insert the control to items collection of the element
    Unless in my sample testing I did something wrong, my descriptions are more accurate based on the results I found. AddTo/InsertTo can insert an item to the parent's existing items (around other children discovered in the control list on the server which may not match the client), but it will overwrite the same previous render of the requested add if I added that user control already. It will not position a new control into the client's list of controls.

    Quote Originally Posted by Baidaly View Post
    But I guess you mean that you want to append the control to the same container?
    Yes. The client position, not the server position.
    Last edited by michaeld; Dec 13, 2013 at 2:33 AM.
  4. #4
    Hi everybody,

    Well, InsertTo and AddTo modes don't replace the components, it actually inserts and adds them. But, it pre-destroys a component with the same client id if exists.

    So, to render a new item, you have to provide a component with a unique id.
    Last edited by Daniil; Dec 16, 2013 at 3:33 AM.
  5. #5
    Quote Originally Posted by Daniil View Post
    Well, InsertTo and AddTo modes don't replace the components, it actually inserts and adds them. But, it pre-destroys a component with the same client id if exists.

    So, torender a new item, you have to provide a component with a unique id.
    I considered and already tested this possibility and I got the same result. I've retested as well. The reason it is destroyed every time is it's pre-destroying the container each time. You can't change the name of the container.

        public static int i = 1;
        protected void OnLoad( object sender, DirectEventArgs e ) {
            UserControlRendererConfig cfg = new UserControlRendererConfig {
                UserControlPath = "Test42.ascx",
                UserControlId = "uc"+i++.ToString(),
                UserControlClientIDMode = System.Web.UI.ClientIDMode.Static,
                Mode = RenderMode.AddTo,
                Element = P.ClientID
            };
            UserControlRenderer.Render( cfg );
        }
  6. #6
    Could you provide a full sample, so we can avoid misunderstanding and discuss a real case.

    If there is some issues we'd be glad to investigate them.
  7. #7
    Quote Originally Posted by Baidaly View Post
    Could you provide a full sample, so we can avoid misunderstanding and discuss a real case.

    If there is some issues we'd be glad to investigate them.
    aspx
    <%@ Page Language="C#" %>
    <script runat="server">
        protected void Page_Load( object sender, EventArgs e ) {
        }
        public static int i = 1;
        protected void OnLoad( object sender, DirectEventArgs e ) {
            // Render the New Account Ask Question
            //(new UserControlLoader() { Path = "Test42.ascx", UserControlID="uc" }).Render();
            UserControlRendererConfig cfg = new UserControlRendererConfig {
                UserControlPath = "Test42.ascx",
                UserControlId = "uc"+i++.ToString(),
                UserControlClientIDMode = System.Web.UI.ClientIDMode.Static,
                Mode = RenderMode.AddTo,
                Element = P.ClientID
            };
            UserControlRenderer.Render( cfg );
        }
    </script>
    
    
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Test42</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" SourceFormatting="true" RenderScripts="CDN" RenderStyles="CDN" />
    
    
            <ext:Viewport ID="vp" runat="server" Layout="VBoxLayout">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>
    
    
                    <ext:Panel Title="Test" />
                    <ext:Panel ID="P" runat="server" Border="false" Padding="3" Flex="1" Title="Test42" Layout="VBoxLayout">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
                            <ext:Button ID="Test" runat="server" Text="Test" OnDirectClick="OnLoad" />
                        </Items>
                    </ext:Panel>
    
    
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    ascx
    <%@ Control Language="C#" ClassName="Test42" %>
    <script runat="server">
        public static int i = 1;
        protected void Page_Load( object sender, EventArgs e ) {
            Button1.Text = i++.ToString();
        }
        protected void OnClick( object sender, DirectEventArgs e ) {
            X.Msg.Alert( "Test", "Test1" );
        }
    </script>
        <ext:Label ID="Label1" runat="server" Html="Inner" IDMode="Explicit" />
        <ext:DatePicker ID="Dates" runat="server" IDMode="Explicit" />
        <ext:Button ID="Button1" runat="server"  Text=""  OnDirectClick="OnClick" IDMode="Explicit" />


    Click Test button multiple times. Even with the id name changing, you'll notice it still destroys the original and recreates.
    Last edited by michaeld; Dec 13, 2013 at 11:54 PM.
  8. #8
    ..........
    Last edited by michaeld; Dec 14, 2013 at 12:12 AM.
  9. #9
    Thank you for your example!

    OK, the problem here is that you use wrong UserControlClientIDMode. And if you take a look what JS code is produced by the DirectEvent you can see that the container for the items of the UserControl are the same, therefore new items replace the old items.

    // First call
    {script:"Ext.net.append(Ext.getBody(),[\"<div id=\\\"uc1_ct_Content\\\" class=\\\"x-hidden\\\"><div id=\\\"App.Label1_Container\\\" style=\\\"display:inline;\\\"></div>\",\"    <div id=\\\"App.Dates_Container\\\"></div>\",\"    <div id=\\\"App.Button1_Container\\\"></div></div>\"].join(''));
    
    Ext.net.ResourceMgr.destroyCmp(\"App.uc1_ct\");Ext.create(\"Ext.net.Label\",{id:\"Label1\",html:\"Inner\",renderTo:\"App.Label1_Container\"});Ext.create(\"Ext.picker.Date\",{id:\"Dates\",renderTo:\"App.Dates_Container\",format:\"d.m.Y\",longDayFormat:\"j F Y 'г.'\"});Ext.create(\"Ext.button.Button\",{id:\"Button1\",renderTo:\"App.Button1_Container\",text:\"1\",directEvents:{click:{fn:function(item,e){Ext.net.directRequest({control:this});}}}});App.P.add({id:\"uc1_ct\",xtype:\"container\",contentEl:\"uc1_ct_Content\"});"}
    
    // Second call
    {script:"Ext.net.append(Ext.getBody(),[\"<div id=\\\"uc2_ct_Content\\\" class=\\\"x-hidden\\\"><div id=\\\"App.Label1_Container\\\" style=\\\"display:inline;\\\"></div>\",\"    <div id=\\\"App.Dates_Container\\\"></div>\",\"    <div id=\\\"App.Button1_Container\\\"></div></div>\"].join(''));
    
    Ext.net.ResourceMgr.destroyCmp(\"App.uc2_ct\");Ext.create(\"Ext.net.Label\",{id:\"Label1\",html:\"Inner\",renderTo:\"App.Label1_Container\"});Ext.create(\"Ext.picker.Date\",{id:\"Dates\",renderTo:\"App.Dates_Container\",format:\"d.m.Y\",longDayFormat:\"j F Y 'г.'\"});Ext.create(\"Ext.button.Button\",{id:\"Button1\",renderTo:\"App.Button1_Container\",text:\"2\",directEvents:{click:{fn:function(item,e){Ext.net.directRequest({control:this});}}}});App.P.add({id:\"uc2_ct\",xtype:\"container\",contentEl:\"uc2_ct_Content\"});"}
    So just don't use ClientIDMode.Static:

    UserControlRendererConfig cfg = new UserControlRendererConfig {
        UserControlPath = "MyUserControl.ascx",
        UserControlId = "uc"+i++.ToString(),
        //UserControlClientIDMode = System.Web.UI.ClientIDMode.Static,
        Mode = RenderMode.AddTo,
        Element = P.ClientID,
        ClearContainer = false
    };
  10. #10
    Okay, thank you.
Page 1 of 2 12 LastLast

Similar Threads

  1. [OPEN] [#403] UserControlRendererConfig does not render some controls
    By michaeld in forum 2.x Legacy Premium Help
    Replies: 15
    Last Post: Dec 18, 2013, 2:13 PM

Posting Permissions