Adding controls dynamically (from codebehind) into the custom Web Part

Dmitry Bastron asked on July 20, 2016 12:58

Hi Community!

I'm developing a custom web part that should have a set of dynamically created editable fields. To achieve this I plan to utilize out-of-the-box CMSModules_PortalEngine_Controls_Editable_EditableText editable control.

So, I have a new custom web part (without any properties created) with empty layout:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EditableText2.ascx.cs" Inherits="CMSApp.CMSWebParts.Custom.EditableText2" %>

And the following codebehind file where I'm adding a dynamically created TxtEditable control to the Web Part controls list:

using System;
using CMS.Controls;
using CMS.Helpers;
using CMS.PortalControls;
using CMS.PortalEngine;

namespace CMSApp.CMSWebParts.Custom
{
    public partial class EditableText2 : CMSAbstractEditableWebPart
    {
        protected CMSModules_PortalEngine_Controls_Editable_EditableText TxtEditable;

        public override void OnContentLoaded()
        {
            base.OnContentLoaded();
            SetupControl();
        }

        protected void SetupControl()
        {
            // Do not hide for roles in edit or preview mode
            switch (ViewMode)
            {
                case ViewModeEnum.Edit:
                case ViewModeEnum.EditLive:
                case ViewModeEnum.EditDisabled:
                case ViewModeEnum.Design:
                case ViewModeEnum.DesignDisabled:
                case ViewModeEnum.EditNotCurrent:
                case ViewModeEnum.Preview:
                    SetValue("DisplayToRoles", String.Empty);
                    break;
            }

            if (TxtEditable != null) TxtEditable.StopProcessing = StopProcessing;

            if (!StopProcessing && TxtEditable != null)
            {
                TxtEditable.ContentID = WebPartID;
                TxtEditable.DataControl = this;
                TxtEditable.PageManager = PageManager;
                TxtEditable.PagePlaceholder = PagePlaceholder;
                TxtEditable.Title = HTMLHelper.HTMLEncode(String.Format("{0} ({1})", GetString("general.richtexteditor"), String.IsNullOrEmpty(WebPartTitle) ? WebPartID : WebPartTitle));
                TxtEditable.SetupControl();
            }
        }

        protected override void CreateChildControls()
        {
            SetupControl();

            Controls.Clear();
            base.CreateChildControls();

            if (!StopProcessing)
            {
                TxtEditable = new CMSModules_PortalEngine_Controls_Editable_EditableText
                {
                    RegionType = CMSEditableRegionTypeEnum.HtmlEditor,
                    ID = $"{WebPartID}_txtEditable"
                };
                Controls.Add(TxtEditable);
            }
            switch (ViewMode)
            {
                case ViewModeEnum.Edit:
                case ViewModeEnum.EditLive:
                case ViewModeEnum.EditDisabled:
                    TxtEditable.UseInlineMode = true;
                    break;
            }
        }

        public override void LoadContent(string content, bool forceReload)
        {
            if (!StopProcessing)
            {
                TxtEditable.LoadContent(content, forceReload);

                if (!string.IsNullOrEmpty(TxtEditable.DefaultText))
                {
                    EmptyContent = false;
                }
            }
        }

        public override string GetContent()
        {
            if (!StopProcessing)
            {
                return TxtEditable.GetContent();
            }

            return null;
        }

        protected override void OnInit(EventArgs e)
        {
            SetupControl();
            base.OnInit(e);
        }
    }
}

But unfortunately I've got non-editable control on the Page tab:

screenshot

As I saw in debug in EditableText.ascx.cs ViewMode property is correctly set to the Edit value but the control is showing as non-editable with hidden TextArea in the markup.

What did I miss during control initialization? Could you please push me in a right direction?

custom web part dynamic controls

Recent Answers

Zach Perry answered on July 20, 2016 17:55

Is it because you are calling SetupControl() before adding the control?

0 votesVote for this answer Mark as a Correct answer

Dmitry Bastron answered on July 21, 2016 06:30

Is it because you are calling SetupControl() before adding the control?

No, I've tried to call it in various sequence - result is the same. Even more, in the out-of-the-box control EditableText.ascx calling sequence is the same: CreateChildControls is calling SetupControl first.

0 votesVote for this answer Mark as a Correct answer

Michal Novák answered on July 21, 2016 15:31

Hi Dimitry, use repeater instead of custom webpart. Each editable field should be a page in the content tree. For this purpose create custom page type. Michal

0 votesVote for this answer Mark as a Correct answer

Dmitry Bastron answered on July 22, 2016 07:15 (last edited on July 22, 2016 07:23)

Thank you, Michal, for your answer. But your advice is not acceptable in my situation.

use repeater instead of custom webpart

I need to implement a custom logic in the Web Part. Hence, I can't just use a repeater.

Each editable field should be a page in the content tree. For this purpose create custom page type.

It's not true. Editable field is not a page at all, it is an user control and can be a part of Web Part. Editable fields content is stored in the "DocumentContent" field in the "CMS_Document" database table for each language version of page separately.

Custom Page Type wouldn't help me in this case. The main question in here is: "How to dynamically (from the codebehind) add EDITABLE user controls into the custom Web Part?"

0 votesVote for this answer Mark as a Correct answer