Using RadControls Within a Custom Control

[Mick]

I am trying to develop a very simple Custom Control, all it consits of (at the moment) is a TabStrip (3 tabs), a multiPage and a number of PageViews. However I am encountering issues.
The code is as follows:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace BT.NIEA.StakeholderControls
{
    [ToolboxData("<{0}:CreateStakeholder runat=server></{0}:CreateStakeholder>")]
    public class CreateStakeholder : WebControl
    {
        #region "Properties"

        private int _ApplicationID;
        private string _TableCSSClass = "myTable";

        public int ApplicationID
        {
            get { return _ApplicationID; }
            set { _ApplicationID = value; }
        }

        public string TableCSSClass
        {
            get { return _TableCSSClass; }
            set { _TableCSSClass = value; }
        }

        public string TabSkin
        {
            get { return _TabSkin; }
            set { _TabSkin = value; }
        }

        public Unit TabWidth
        {
            get { return _TabWidth; }
            set { _TabWidth = value; }
        }

        private Unit _TabWidth;
        private string _TabSkin = "WebBlue";
        #endregion

        #region "Overrides"
        //protected override void OnPreRender(EventArgs e)
        //{

        //}
        protected override void Render(HtmlTextWriter writer)
        {
            RadTabStrip ts = new RadTabStrip();
            ts.Skin = TabSkin;
            RadTab tb1 = new RadTab();
            tb1.Text = "Basic Information";
            tb1.Selected = true;
            tb1.Width = TabWidth;
            RadTab tb2 = new RadTab();
            tb2.Width = TabWidth;
            tb2.Text = "Address Details";
            RadTab tb3 = new RadTab();
            tb3.Text = "Optional Information";
            tb3.Width = TabWidth;
            ts.Tabs.Add(tb1);
            ts.Tabs.Add(tb2);
            ts.Tabs.Add(tb3);
            // Create the Tab Strip
            this.Controls.Add(ts);

            RadMultiPage mpCreate = new RadMultiPage();
            RadPageView pvPage1 = new RadPageView();

            // Build The Table Text
            string tblOutput = "<table class=\"" + TableCSSClass + "\">";
            tblOutput += "<caption>Stakeholder Information</caption>";
            tblOutput += "<tr>";
            tblOutput += "<td colspan=\"2\"><strong>Basic Information</strong></td>";
            tblOutput += "<td class=\"sep\"></td>";
            tblOutput += "<td></td>";
            tblOutput += "</tr>";
            tblOutput += "</table>";
            writer.Write(tblOutput);
        }


        #endregion

    }
}

The error this gives is: Script controls may not be registered after PreRender.
If I change the code to the following:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace BT.NIEA.StakeholderControls
{
    [ToolboxData("<{0}:CreateStakeholder runat=server></{0}:CreateStakeholder>")]
    public class CreateStakeholder : WebControl
    {
        #region "Properties"

        private int _ApplicationID;
        private string _TableCSSClass = "myTable";

        public int ApplicationID
        {
            get { return _ApplicationID; }
            set { _ApplicationID = value; }
        }

        public string TableCSSClass
        {
            get { return _TableCSSClass; }
            set { _TableCSSClass = value; }
        }

        public string TabSkin
        {
            get { return _TabSkin; }
            set { _TabSkin = value; }
        }

        public Unit TabWidth
        {
            get { return _TabWidth; }
            set { _TabWidth = value; }
        }

        private Unit _TabWidth;
        private string _TabSkin = "WebBlue";
        #endregion

        #region "Overrides"
        protected override void OnPreRender(EventArgs e)
        {
            RadTabStrip ts = new RadTabStrip();
            ts.Skin = TabSkin;
            RadTab tb1 = new RadTab();
            tb1.Text = "Basic Information";
            tb1.Selected = true;
            tb1.Width = TabWidth;
            RadTab tb2 = new RadTab();
            tb2.Width = TabWidth;
            tb2.Text = "Address Details";
            RadTab tb3 = new RadTab();
            tb3.Text = "Optional Information";
            tb3.Width = TabWidth;
            ts.Tabs.Add(tb1);
            ts.Tabs.Add(tb2);
            ts.Tabs.Add(tb3);
            // Create the Tab Strip
            this.Controls.Add(ts);

            RadMultiPage mpCreate = new RadMultiPage();
            RadPageView pvPage1 = new RadPageView();
        }
        protected override void Render(HtmlTextWriter writer)
        {

            // Build The Table Text
            string tblOutput = "<table class=\"" + TableCSSClass + "\">";
            tblOutput += "<caption>Stakeholder Information</caption>";
            tblOutput += "<tr>";
            tblOutput += "<td colspan=\"2\"><strong>Basic Information</strong></td>";
            tblOutput += "<td class=\"sep\"></td>";
            tblOutput += "<td></td>";
            tblOutput += "</tr>";
            tblOutput += "</table>";
            writer.Write(tblOutput);
        }


        #endregion

    }
}

The control runs without error but the tabstrip is not outputted to the page at runtime.

So my question(s) are:
When and where do I register the tabstrip, so it is shown at runtime?
How can I add content created at runtime to a PageView I have just created and will be adding to a MultiPage control?

Kind Regards

[Erjan Gavalji]

Hi Mick,

You should create the RadTabStrip instance and add it to the child Controls collection in an earlier stage of the control life cycle, e.g. OnInit. Render is the last executed method in terms of control addition to the page and RadTabStrip's setup code is not executed.

Regards,
Erjan Gavalji
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mick]

Thanks for your reply Erjan,

I ammended my code to the following, but still get the same output (i.e: no tab strip displayed). Please advise.

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace BT.NIEA.StakeholderControls
{
    [ToolboxData("<{0}:CreateStakeholder runat=server></{0}:CreateStakeholder>")]
    public class CreateStakeholder : WebControl
    {
        #region "Properties"

        private int _ApplicationID;
        private string _TableCSSClass = "myTable";

        public int ApplicationID
        {
            get { return _ApplicationID; }
            set { _ApplicationID = value; }
        }

        public string TableCSSClass
        {
            get { return _TableCSSClass; }
            set { _TableCSSClass = value; }
        }

        public string TabSkin
        {
            get { return _TabSkin; }
            set { _TabSkin = value; }
        }

        public Unit TabWidth
        {
            get { return _TabWidth; }
            set { _TabWidth = value; }
        }

        private Unit _TabWidth;
        private string _TabSkin = "WebBlue";
        #endregion

        #region "Overrides"

        protected override void OnInit(EventArgs e)
        {
            RadTabStrip ts = new RadTabStrip();
            ts.Skin = TabSkin;
            RadTab tb1 = new RadTab();
            tb1.Text = "Basic Information";
            tb1.Selected = true;
            tb1.Width = TabWidth;
            RadTab tb2 = new RadTab();
            tb2.Width = TabWidth;
            tb2.Text = "Address Details";
            RadTab tb3 = new RadTab();
            tb3.Text = "Optional Information";
            tb3.Width = TabWidth;
            ts.Tabs.Add(tb1);
            ts.Tabs.Add(tb2);
            ts.Tabs.Add(tb3);
            // Create the Tab Strip
            this.Controls.Add(ts);

            RadMultiPage mpCreate = new RadMultiPage();
            RadPageView pvPage1 = new RadPageView();
        }
        protected override void Render(HtmlTextWriter writer)
        {

            // Build The Table Text
            string tblOutput = "<table class=\"" + TableCSSClass + "\">";
            tblOutput += "<caption>Stakeholder Information</caption>";
            tblOutput += "<tr>";
            tblOutput += "<td colspan=\"2\"><strong>Basic Information</strong></td>";
            tblOutput += "<td class=\"sep\"></td>";
            tblOutput += "<td></td>";
            tblOutput += "<td></td>";
            tblOutput += "</tr>";
            tblOutput += "<tr>";
            tblOutput += "<th>Organisation:</th>";
            // Create the organistaion Name Textbox
            RadTextBox txtOrgName = new RadTextBox();
            txtOrgName.ID = "txtOrgName";
            txtOrgName.Width = 300;
            txtOrgName.MaxLength = 100;
            txtOrgName.TabIndex = 1;
            //tblOutput += "<td>" + this.Controls.Add(txtOrgName)  + "</td>";
            tblOutput += "</tr>";
            tblOutput += "</table>";

            writer.Write(tblOutput);
        }


        #endregion

    }
}

[Erjan Gavalji]

Hi Mick,

The Render method override misses the call to the base class's Render, thus preventing the rendering of the child controls.

Please, modify the Render method override as follows:

        protected override void Render(HtmlTextWriter writer)
        {
            base.Render(writer);
            // Build The Table Text 
            string tblOutput = "<table class=\"" + TableCSSClass + "\">";
...

Let me know if that helps.

Kind regards,
Erjan Gavalji
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.