[CLOSED] dynamically added custom controls not rendered in fieldset

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] dynamically added custom controls not rendered in fieldset

    Hi Daniil,

    I have created few custom controls of type combobox, multicombo,fileuploadfield,Time etc. This controls are added dynamically to fieldset. But they are not rendered. I have given the sample code below. Please advise.

    ASPX
    
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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 id="Head1" runat="server">
        <title>Ext.Net.MVC Example</title>
        <script type="text/javascript">
            var AddCustomFields = function (controls, args) {
                //Ext.net.DirectMethod.request({ method: 'POST', url: '/Home/AddTextField/', params: { containerId: args.container.id} });
                Ext.net.DirectMethod.request({
                    url: '/Home/AddTextField/',
                    cleanRequest: true,
                    params: {
                        containerId: args.container.id
                    }
                });
    
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="ReqCustomFldsPnl" runat="server" Border="false" BodyStyle="background-color: #DFE8F6"
            Padding="5" AutoDoLayout="true" Layout="FitLayout">
            <Items>
                <ext:FieldSet ID="fldstReqCustomFlds" runat="server" Title="CustomFields" AutoHeight="true"
                    Padding="5" LabelWidth="75" CollapseMode="Mini" AutoDoLayout="true" Collapsed="true"
                    Collapsible="true" Layout="FormLayout" AnchorHorizontal="95%" AutoScroll="true"
                    AnchorVertical="100%">
                    <Items>
                        <ext:FormPanel ID="IRReqHdrCustomFieldsContainer" runat="server" Padding="6" BodyStyle="background-color: #DFE8F6"
                            ForceLayout="true" Layout="FormLayout" HideLabels="true" BodyBorder="false" Border="false">
                        </ext:FormPanel>
                    </Items>
                    <Listeners>
                        <Expand Handler="AddCustomFields('undefined',{container:#{IRReqHdrCustomFieldsContainer},entityType:'Issue Requisition Header',entityID:''}); " />
                    </Listeners>
                </ext:FieldSet>
            </Items>
        </ext:Panel>
    </body>
    </html>
    
    Controller
     public ActionResult ExtraFields()
            {
                return View();
            }
    
     public ActionResult AddTextField(string containerId)
            {
                TextField tf1 = new TextField() { FieldLabel = "FieldLalel1", Text = "Hello World 1!" };
                string script = tf1.ToScript(RenderMode.AddTo, containerId);             
                NxtFileUpload file = new NxtFileUpload();
                script = script + file.ToScript(RenderMode.AddTo, containerId);           
                NxtDropDownList n = new NxtDropDownList();
                script = script + n.ToScript(RenderMode.AddTo, containerId);
                NxtSimpleDateTime t = new NxtSimpleDateTime();
                script = script + t.ToScript(RenderMode.AddTo, containerId);
                NxtSimpleTime time = new NxtSimpleTime();
                script = script + time.ToScript(RenderMode.AddTo, containerId);
                NxtYesNo YN = new NxtYesNo();
                script = script + time.ToScript(RenderMode.AddTo, containerId);
                NxtMultiSelect m = new NxtMultiSelect();
                script = script + m.ToScript(RenderMode.AddTo, containerId);
                return new AjaxResult(script);
            }
    
            public class NxtSimpleDateTime : FormPanel
            {
                DateField date = new DateField();
                TimeField time = new TimeField();
    
                public NxtSimpleDateTime()
                {
                    this.Width = 400;
                    this.date.Width = 200;
                    this.date.FieldLabel = "Date";
                    this.time.Width = 100;
                    this.time.FieldLabel = "Time";
                    this.time.Format = "H:mm";
    
                    this.Items.Add(this.date);
                    this.Items.Add(this.time);
                }            
            }
    
            public class NxtSimpleTime : TimeField
            {
                public NxtSimpleTime()
                {
                    this.Format = "H:mm";
                    this.Width = 300;
                }            
            }
    
            public class NxtYesNo : ComboBox
            {
                public NxtYesNo()
                {
                    ListItem Yes = new ListItem();
                    Yes.Value = "Yes";
                    Yes.Text = "Yes";
                    this.Items.Add(Yes);
    
                    ListItem No = new ListItem();
                    No.Value = "No";
                    No.Text = "No";
                    this.Items.Add(No);
                    this.Width = 100;
                }           
            }
    
            public class NxtMultiSelect : Ext.Net.MultiCombo
            {
                public NxtMultiSelect()
                {
                    this.Width = 300;
                }          
            }
    Thanks
    Anulekha
    Last edited by Daniil; Feb 24, 2012 at 3:05 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I have replaced "NxtFileUpload" with "FileUploadField" and "NxtDropDownList" with "DropDownField" to avoid compile errors since I have no such classes.

    After these changes the example goes correctly, the fields are rendered on expanding.

    Are there any errors, exceptions on your side? What is the response of a request to the controller action?
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    I have replaced "NxtFileUpload" with "FileUploadField" and "NxtDropDownList" with "DropDownField" to avoid compile errors since I have no such classes.

    After these changes the example goes correctly, the fields are rendered on expanding.

    Are there any errors, exceptions on your side? What is the response of a request to the controller action?
    Hi Daniil,

    Below is the sample code where you can reproduce. I have attached the screenshot of output.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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 id="Head1" runat="server">
        <title>Ext.Net.MVC Example</title>
        <script type="text/javascript">
            var AddCustomFields = function (controls, args) {
                //Ext.net.DirectMethod.request({ method: 'POST', url: '/Home/AddTextField/', params: { containerId: args.container.id} });
                Ext.net.DirectMethod.request({
                    url: '/Home/AddTextField/',
                    cleanRequest: true,
                    params: {
                        containerId: args.container.id
                    }
                });
    
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="ReqCustomFldsPnl" runat="server" Border="false" BodyStyle="background-color: #DFE8F6"
            Padding="5" AutoDoLayout="true" Layout="FitLayout">
            <Items>
                <ext:FieldSet ID="fldstReqCustomFlds" runat="server" Title="CustomFields" AutoHeight="true"
                    Padding="5" LabelWidth="75" CollapseMode="Mini" AutoDoLayout="true" Collapsed="true"
                    Collapsible="true" Layout="FormLayout" AnchorHorizontal="95%" AutoScroll="true"
                    AnchorVertical="100%">
                    <Items>
                        <ext:FormPanel ID="IRReqHdrCustomFieldsContainer" runat="server" Padding="6" BodyStyle="background-color: #DFE8F6"
                            ForceLayout="true" Layout="FormLayout" HideLabels="true" BodyBorder="false" Border="false">
                        </ext:FormPanel>
                    </Items>
                    <Listeners>
                        <Expand Handler="AddCustomFields('undefined',{container:#{IRReqHdrCustomFieldsContainer},entityType:'Issue Requisition Header',entityID:''}); " />
                    </Listeners>
                </ext:FieldSet>
            </Items>
        </ext:Panel>
    </body>
    <
    
    /html>
    
    Controller
    
    class MyFormPanel : FormPanel
            {
                TextField TextField1 = new TextField();
                FileUploadField file = new FileUploadField();
                ComboBox dropDown = new ComboBox();
    
                public MyFormPanel()
                {
                    this.file.AnchorHorizontal = "50%";
                    this.file.Icon = Ext.Net.Icon.Attach;
                    this.Items.Add(this.TextField1);
    
    this.Items.Add(this.file );
                    this.Items.Add(this.dropDown);
                }
    
                public bool IsMandatory
                {
                    get
                    {
                        return !this.TextField1.AllowBlank;
                    }
                    set
                    {
                        this.TextField1.AllowBlank = !value;
                    }
                }
            }
      public ActionResult AddTextField(string containerId)
            {
               
                MyFormPanel form = new MyFormPanel();
                form.IsMandatory = true;
                string script = form.ToScript(RenderMode.AddTo, containerId);
                return new AjaxResult(script);
            }
     public ActionResult ExtraFields()
            {
                return View();
            }
    Thanks
    Anulekha
    Attached Thumbnails Click image for larger version. 

Name:	CustomControl1.jpg 
Views:	103 
Size:	27.5 KB 
ID:	3857  
  4. #4
    This example also doesn't reproduce the problem on my side. The fields are rendered on expanding.

    What is a response of a request to the controller action?
  5. #5
    Quote Originally Posted by Daniil View Post
    This example also doesn't reproduce the problem on my side. The fields are rendered on expanding.

    What is a response of a request to the controller action?
    Hi Daniil,

    Below is the response.


    Ext.net.ResourceMgr.load([{url:"/extnet/extnet-data-js/ext.axd?v=21945"}], function(){Ext.net.ResourceMgr.destroyCmp("idee1812f170034c4fbb9f1b47eac670b8");new Ext.form.FormPanel({id:"idee1812f170034c4fbb9f1b47eac670b8",xtype:"form",items:[{xtype:"textfield",allowBlank:false},{xtype:"combo",displayField:"text",hiddenName:"idbd170c6be0bb4a5a8b5679038ba4be4a_Value",mode:"local",queryDelay:10,triggerAction:"all",valueField:"value",store:new Ext.data.SimpleStore({fields:["text","value"],data :[]}),submitValue:true}],method:"POST",url:"/Home/AddTextField/?_dc=1329994486633"});IRReqHdrCustomFieldsContainer.addAndDoLayout(idee1812f170034c4fbb9f1b47eac670b8);});
    Are you using my controller functions?

    Thanks
    Anulekha
    Last edited by Daniil; Feb 23, 2012 at 12:00 PM. Reason: Please use [CODE] tags
  6. #6
    Quote Originally Posted by AnulekhaK View Post
    Hi Daniil,

    Below is the response.


    Ext.net.ResourceMgr.load([{url:"/extnet/extnet-data-js/ext.axd?v=21945"}], function(){Ext.net.ResourceMgr.destroyCmp("idee181 2f170034c4fbb9f1b47eac670b8");new Ext.form.FormPanel({id:"idee1812f170034c4fbb9f1b47 eac670b8",xtype:"form",items:[{xtype:"textfield",allowBlank:false},{xtype:"combo ",displayField:"text",hiddenName:"idbd170c6be0bb4a 5a8b5679038ba4be4a_Value",mode:"local",queryDelay: 10,triggerAction:"all",valueField:"value",store:ne w Ext.data.SimpleStore({fields:["text","value"],data :[]}),submitValue:true}],method:"POST",url:"/Home/AddTextField/?_dc=1329994486633"});IRReqHdrCustomFieldsContaine r.addAndDoLayout(idee1812f170034c4fbb9f1b47eac670b 8);});

    Are you using my controller functions?

    Thanks
    Anulekha
    Hi Daniil,

    This is a critical issue. Please help.

    Thanks
    Anulekha
  7. #7
    Hi,

    1. Why do you add FormPanel to another FormPanel? It is strange desicion
    2. Nested html form tags are forbidden in html therefore try to set in controller action
    form.RenderFormElement = false;
  8. #8
    Quote Originally Posted by AnulekhaK View Post
    Are you using my controller functions?
    Yes, I used excatly the code you provided and was unable to reproduce the problem.

    Please try the Vladimir's recommendtions.

    If the problem persists please provide the details about Ext.NET sources that you use. I tested with the latest sources. Maybe, updating form SVN may solve the problem.
  9. #9
    Quote Originally Posted by Vladimir View Post
    Hi,

    1. Why do you add FormPanel to another FormPanel? It is strange desicion
    2. Nested html form tags are forbidden in html therefore try to set in controller action
    form.RenderFormElement = false;
    Hi Vladimir,

    - I want to group multiple controls as a single control. This is the reason for creating custom control extending formpanel.
    - I have a form panel within my fieldset, so that the child ontrols align properly.
    - I tried using "form.RenderFormElement = false;" but no change.

    I dont know how this code is working for Daniil. I had attached the screenshot also.

    Please let me know if there any other approach. The requirement is to add multiple custom controls to fieldset based on some logic.

    Thanks
    Anulekha
  10. #10
    I tested your sample and cannot reproduce the problem also
    Are sure that there is no any js errors?

    One thing which confuse me: you set Layout="Fit" but did not provide any size for panel (ReqCustomFldsPnl), it is incorrect
    Try to define size explicitly
Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Feb 01, 2012, 8:53 PM
  2. Replies: 6
    Last Post: Dec 07, 2011, 12:55 PM
  3. Iteration on dynamically added controls
    By kutlu in forum 1.x Help
    Replies: 1
    Last Post: Jan 02, 2011, 7:14 PM
  4. [CLOSED] [1.0] removing dynamically added controls
    By webclouder in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 29, 2010, 7:49 PM
  5. Controls added runtime are not rendered
    By cocci in forum 1.x Help
    Replies: 6
    Last Post: Nov 30, 2009, 12:55 PM

Posting Permissions