Issue with Grid : User Control : Edit Form : Dynamically added controls in custom control

[Param Mundra]

I have a user control that uses a custom control which has business logic to added controls dynamically. Example text boxes along with lable will be added based on the rule to capture addtional information from user.

If the user control is part of page and displayed using RadWindow then the I do not have any issues and on each post back between client and server dynamically added controls are getting displayed.

When the same user control is displayed inline using "User Control Edit Form" then for the first time dynamically added controls are getting displayed, but on the further post back they are not getting displayed.

In the custom control i am using CreateChildControls() to add controls dynamically.

[Radoslav]

Hi Param,

Based on the supplied information, it is hard to determine what is causing the unwanted behavior at your end. Could you please post your aspx page markup code with the related code behind.
Thus we will be able to gather more details about your scenario and to provide you a solution.
Additionally if you create your RadGrid programmatically could you please verify if you correctly create the Grid structure using the instructions in the following help topic.

Looking forward for your reply.

Kind regards,
Radoslav
the Telerik team

[Param Mundra]

I have used the same sample from demo site. Demo URL

From the the demo, i have modified

• ASCX User control to include custom control on the top.
• ASCX.cs to initialize custom control.

Below are the four code snippets.

Changed "EmployeeDetailsCS.ascx" and added following code.

<%@ Control Language="c#" Inherits="Telerik.GridExamplesCSharp.DataEditing.UserControlEditForm.EmployeeDetails.EmployeeDetails" Codebehind="EmployeeDetailsCS.ascx.cs" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Assembly="Sample.WebControls" Namespace="Sample.WebControls" TagPrefix="DCC" %>

<table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="1" rules="none"
    style="border-collapse: collapse">
    <tr class="EditFormHeader">
        <td colspan="2">
            <b>Employee Details</b>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <b>Dynamic Controls.......</b>
            <br />
            <asp:UpdatePanel ID="updatePanel1" runat="server">
                <ContentTemplate>
                    <DCC:DynamicCustom ID="DCID" runat="server" />
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <b>Personal Info:</b>

Changed Page Load even in "EmployeeDetailsCS.ascx.cs", using test view state to identify first page load for user control.

protected void Page_Load(object sender, System.EventArgs e)
{
    if (ViewState["Test"] == null)
    {
        ViewState["Test"] = "SomeValue";
        XmlDocument xdTemp = new XmlDocument();
        xdTemp.Load(Server.MapPath(".") + "/SampleXML.xml");
        DCID.XmlList = xdTemp.InnerXml;
    }
}

Code of Custom Control, it adds controls dynamically based on XML

using System;
using System.Collections;
using System.Data;
using System.Web;
using System.Web.UI.WebControls;
using System.Xml;
using Telerik.Web.UI;

namespace Sample.WebControls
{
    public class DynamicCustom : CompositeControl
    {
        #region Constants
        private const int XML_CONTROL_ID = 0;
        private const int XML_CONTROL_LABEL = 1;
        private const int XML_CONTROL_TYPE = 2;
        private const int XML_CONTROL_VALUES = 3;

        private const string CONTROL_TYPE_DROPDOWN = "DropDown";
        private const string CONTROL_TYPE_NUMERICTEXTBOX = "NumericTextBox";
        private const string CONTROL_TYPE_TEXTBOX = "TextBox";
        #endregion

        protected override void CreateChildControls()
        {
            PlaceHolder phControls = new PlaceHolder();
            Table tblMain = new Table();
            XmlDocument xmlDoc = null;

            if (!String.IsNullOrEmpty(this.XmlList))
            {
                xmlDoc = new XmlDocument();
                xmlDoc.LoadXml(this.XmlList);

                XmlNodeList xnlControls = xmlDoc.GetElementsByTagName("Control");

                tblMain.EnableViewState = true;
                tblMain.ID = "tblMain";
                tblMain.CellPadding = 2;
                tblMain.CellSpacing = 2;
                tblMain.Attributes.Add("width", "100%");

                TableRow tblRow = null;

                foreach (XmlNode xnControl in xnlControls)
                {
                    tblRow = new TableRow();
                    tblRow.EnableViewState = true;
                    tblRow.ID = "tblRow" + xnControl.ChildNodes[XML_CONTROL_ID].InnerText;

                    TableCell tcLabel = new TableCell();
                    tcLabel.Style.Add("padding-left", "10px");

                    Label lblDisplayText = new Label();
                    lblDisplayText.Text = xnControl.ChildNodes[XML_CONTROL_LABEL].InnerText;
                    tcLabel.Controls.Add(lblDisplayText);
                    tblRow.Controls.Add(tcLabel);

                    string strControlType = xnControl.ChildNodes[XML_CONTROL_TYPE].InnerText;

                    if (strControlType == CONTROL_TYPE_DROPDOWN)
                    {
                        #region Drop Down
                        TableCell tcControlDD = new TableCell();
                        RadComboBox rcbDropDown = new RadComboBox();
                        rcbDropDown.ID = xnControl.ChildNodes[XML_CONTROL_ID].InnerText;

                        //--- Setting options for dropdown
                        XmlDocument xdItems = new XmlDocument();
                        xdItems.LoadXml(xnControl.ChildNodes[XML_CONTROL_VALUES].OuterXml);

                        ArrayList list = new ArrayList();

                        DataTable dtComboBoxSource = GetDataTableFromXML(xdItems);
                        rcbDropDown.DataTextField = "ItemText";
                        rcbDropDown.DataValueField = "ItemValue";
                        rcbDropDown.DataSource = dtComboBoxSource;
                        rcbDropDown.CausesValidation = false;
                        rcbDropDown.AutoPostBack = true;

                        tcControlDD.Controls.Add(rcbDropDown);
                        tblRow.Controls.Add(tcControlDD);
                        tblMain.Controls.Add(tblRow);

                        rcbDropDown.DataBind();

                        RadComboBoxItem rcbItem = new RadComboBoxItem("Select", "-1");
                        rcbDropDown.Items.Insert(0, rcbItem);
                        #endregion
                    }
                    else if (strControlType == CONTROL_TYPE_TEXTBOX)
                    {
                        #region Text Box
                        TableCell tcControlTB = new TableCell();
                        TextBox txtTextBox = new TextBox();
                        txtTextBox.ID = xnControl.ChildNodes[XML_CONTROL_ID].InnerText;

                        tcControlTB.Controls.Add(txtTextBox);
                        tblRow.Controls.Add(tcControlTB);
                        tblMain.Controls.Add(tblRow);
                        #endregion
                    }
                    else if (strControlType == CONTROL_TYPE_NUMERICTEXTBOX)
                    {
                        #region Numeric Text Box
                        TableCell tcControlNTB = new TableCell();
                        RadNumericTextBox txtNTextBox = new RadNumericTextBox();
                        txtNTextBox.ID = xnControl.ChildNodes[XML_CONTROL_ID].InnerText;

                        tcControlNTB.Controls.Add(txtNTextBox);
                        tblRow.Controls.Add(tcControlNTB);
                        tblMain.Controls.Add(tblRow);
                        #endregion
                    }
                }

                phControls.Controls.Add(tblMain);
                this.Controls.Add(phControls);
                base.CreateChildControls();
            }
        }

        public string XmlList
        {
            get
            {
                string strXML = ViewState["XMLString"] as string;

                return (strXML == null) ? String.Empty : strXML;
            }
            set
            {
                ViewState["XMLString"] = value;
            }
        }

        private DataTable GetDataTableFromXML(XmlDocument xdTemp)
        {
            DataTable dtTemp = new DataTable();

            DataColumn dcColumn;
            dcColumn = new DataColumn();
            dcColumn.DataType = Type.GetType("System.String");
            dcColumn.ColumnName = "ItemText";
            dtTemp.Columns.Add(dcColumn);

            dcColumn = new DataColumn();
            dcColumn.DataType = Type.GetType("System.String");
            dcColumn.ColumnName = "ItemValue";
            dtTemp.Columns.Add(dcColumn);

            DataRow drTemp = null;
            XmlNode xnTemp = null;

            drTemp = dtTemp.NewRow();
            drTemp["ItemText"] = "Select";
            drTemp["ItemValue"] = "-1";
            dtTemp.Rows.Add(drTemp);

            for (int idxIndex = 0; idxIndex < xdTemp.ChildNodes[0].ChildNodes.Count; idxIndex++)
            {
                drTemp = dtTemp.NewRow();
                xnTemp = xdTemp.ChildNodes[0].ChildNodes[idxIndex];
                drTemp["ItemText"] = xnTemp.ChildNodes[0].InnerText;
                drTemp["ItemValue"] = xnTemp.ChildNodes[1].InnerText;

                dtTemp.Rows.Add(drTemp);
            }

            return dtTemp;
        }
    }
}

SampleXML.xml, used in application.

<?xml version="1.0" encoding="utf-8" ?>
<Controls>
  <Control>
    <ControlID>CI1</ControlID>
    <ControlLabel>First Control Drop Down</ControlLabel>
    <ControlType>DropDown</ControlType>
    <ControlValues>
      <ControlItem>
        <ItemText>Item 1</ItemText>
        <ItemValue>Value 1</ItemValue>
      </ControlItem>
      <ControlItem>
        <ItemText>Item 2</ItemText>
        <ItemValue>Value 2</ItemValue>
      </ControlItem>
    </ControlValues>
  </Control>

  <Control>
    <ControlID>CI2</ControlID>
    <ControlLabel>Second Control Drop Down</ControlLabel>
    <ControlType>DropDown</ControlType>
    <ControlValues>
      <ControlItem>
        <ItemText>Item 1</ItemText>
        <ItemValue>Value 1</ItemValue>
      </ControlItem>
      <ControlItem>
        <ItemText>Item 2</ItemText>
        <ItemValue>Value 2</ItemValue>
      </ControlItem>
    </ControlValues>
  </Control>

  <Control>
    <ControlID>CI3</ControlID>
    <ControlLabel>Third Control Numeric Text Box</ControlLabel>
    <ControlType>NumericTextBox</ControlType>
    <ControlValues></ControlValues>
  </Control>

  <Control>
    <ControlID>CI4</ControlID>
    <ControlLabel>Fourth Control Text Box</ControlLabel>
    <ControlType>TextBox</ControlType>
    <ControlValues></ControlValues>
  </Control>
</Controls>

[Radoslav]

Hello Param,

Could you please try removing the asp:UpdatePanel around the DynamicCustom and let me know if the issue still persists:

<%@ Control Language="c#" Inherits="Telerik.GridExamplesCSharp.DataEditing.UserControlEditForm.EmployeeDetails.EmployeeDetails" Codebehind="EmployeeDetailsCS.ascx.cs" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Assembly="Sample.WebControls" Namespace="Sample.WebControls" TagPrefix="DCC" %>

<table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="1" rules="none"
    style="border-collapse: collapse">
    <tr class="EditFormHeader">
        <td colspan="2">
            <b>Employee Details</b>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <b>Dynamic Controls.......</b>
            <br />

                    <DCC:DynamicCustom ID="DCID" runat="server" />

            <br />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <b>Personal Info:</b>

Looking forward for your reply.

All the best,
Radoslav
the Telerik team

[Param Mundra]

Yes it works.

Shouldn't it work withing Update Panel?

It works when in a idependant page, but not when used with telerik rad grid edit form.

Thanks.

[Daniel]

Hello Param,

Make sure that you do not ajaxify the control more than once. If you have RadAjaxManager or RadAjaxPanel wrapping RadGrid you don't have to add ASP.NET UpdatePanel inside the user control.

I attached a simple demo based on your code. Let me know whether it works properly on your end.

Regards,
Daniel
the Telerik team