Extending RadDock Control

[Malichone]

We are trying to figure out how to properly extend a dynamically created radDock to basically include a footer. Currently we have tried creating a new class file and inheriting fromTelerik.Web.UI.RadDock. We are able to add an icon for the usercontrol and it works, a bit kludgy but w/e. How would we start to go about this? This is the code we are using currently to extend RadDock.

[assembly: TagPrefix("NCS_Black.CustomControls.NCSBlackRadDock", "c1")]
namespace NCS_Black.CustomControls.NCSBlackRadDock
{
    [ToolboxData("<{0}:NCSBlackRadDock ID='NCSBlackRadDock1' runat=\"server\"> </{0}:NCSBlackRadDock>")]
    public class NCSBlackRadDock: Telerik.Web.UI.RadDock
    {
        protected override void OnLoad(EventArgs e)
        {

        }

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

            // INCLUDE A WIDGET SPECIFIC ICON (IF AVAILABLE)
            Image icon = new Image();
            icon.ImageUrl = "~/Prototype/Modules/HttpWebRequest/Images/Config.png";
            icon.CssClass = "imgFloatLT Middle";
            this.TitlebarContainer.Controls.Add(icon);


            // INCLUDE WIDGET SETTINGS CONTROL IN TITLEBAR (IF AVAILABLE)
            DockCommand _Edit = new DockCommand();
            _settings.Name = "Widget_Settings";
            _settings.Text = "Edit";
            this.Commands.Add(_settings);


            // INCLUDE REFRESH TIMESTAMP
            Panel _timePanel = new Panel();
            _timePanel.CssClass = "WidgetTimestamp";

            Label _timeStamp = new Label();
            _timeStamp.Text = DateTime.Now.ToShortTimeString();
            _timePanel.Controls.Add(_timeStamp);
            this.ContentContainer.Controls.Add(_timePanel);
        }
    }
}

[Gido Geek]

I assume you intend on loading Usercontrols into these RadDocks. What I have done is created a "DockUserControl" which all the UserControls that are to be loaded into the RadDock extend from. I have given some properties to this DockUserControl (like Settings). If you apply this method you could include the footer into this "DockUserControl" aswell.. Does this sound like a valid solution to you ?

I have quite allot of experience with RadDock's and love to help you out.

For modifying your Titlebar you can use the following:

RadDock dock = new RadDock(); dock.TitlebarTemplate = new YourTitleBarTemplate();

For modifying your content:

RadDock dock = new RadDock();
dock.ContentTemplate = new YourCustomContentTemplate();

I have a TitleBarTemplate in use. I made a quick simplified version just to show how to make one:

    public class RadDockTemplate : System.Web.UI.ITemplate
    {

        public RadDockTemplate(string MyTitle, string MyIcon)
        {
            m_Title = MyTitle;
            m_Icon = MyIcon;
        }

        private string m_Title;
        private string m_Icon;

        public void InstantiateIn(System.Web.UI.Control container)
        {
            Panel containingDiv = new Panel();
            Literal title = new Literal { ID = "rdTitleText", Text = m_Title };
            Panel iconDiv = new Panel();

            iconDiv.Style.Add("background-image", m_Icon);
            iconDiv.Style.Add("background-repeat", "no-repeat");

            containingDiv.Controls.Add(iconDiv);
            containingDiv.Controls.Add(title);
            container.Controls.Add(containingDiv);

        }
    }

This sample requires you to give the Title and IconURL in the Constructor. You could also make a databound one.

I hope this helps.. please let me know how it goes !

[Malichone]

Thanks for the assist! You helped us brainstorm into a direction we hadn't though of yet. What we have come to is something like:

[assembly: TagPrefix("NCS_Black.CustomControls.NCSBlackRadDock", "c1")]
namespace NCS_Black.CustomControls.NCSBlackRadDock
{
    [ToolboxData("<{0}:NCSBlackRadDock ID='NCSBlackRadDock1' runat=\"server\"> </{0}:NCSBlackRadDock>")]
    public class NCSBlackRadDock: Telerik.Web.UI.RadDock
    {
        private Panel _settingsPanel;
        public Panel settingsPanel
        {
            get
            { return _settingsPanel; }
        }

        private Panel _widgetPanel;
        public Panel widgetPanel
        {
            get
            { return _widgetPanel; }
        }

        private Panel _statusPanel;
        public Panel statusPanel
        {
            get
            { return _statusPanel; }
        }

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

            // SET DEFAULT DOCK PROPERTIES
            this.DockMode           = DockMode.Docked;
            this.Width              = Unit.Percentage(33);
            this.CssClass           = "NCSBlackRadDock";
            this.EnableAnimation    = true;

            // INCLUDE A WIDGET SPECIFIC ICON (IF AVAILABLE)
            Image icon              = new Image();
            icon.ImageUrl           = "~/Prototype/Modules/HttpWebRequest/Images/Config.png";
            icon.CssClass           = "WidgetIcon";
            this.TitlebarContainer.Controls.Add(icon);

            // SET DEFAULT DOCK COMMANDS
            this.Commands.Add(new DockCloseCommand());
            this.Commands.Add(new DockExpandCollapseCommand());

            // INCLUDE WIDGET SETTINGS CONTROL IN TITLEBAR (IF AVAILABLE)
            DockCommand _Edit       = new DockCommand();
            _Edit.Name              = "Widget_Settings";
            _Edit.Text              = "Edit";
            this.Commands.Add(_Edit);

            // SET UP PANELS FOR DOCK CONTENT
            _settingsPanel          = new Panel();
            _widgetPanel            = new Panel();
            _statusPanel            = new Panel();

            // SET PANEL PROPERTIES
            this.ContentContainer.ScrollBars    = ScrollBars.None;
            _settingsPanel.ScrollBars           = ScrollBars.None;
            _settingsPanel.Visible              = false;
            _widgetPanel.ScrollBars             = ScrollBars.Auto;
            _statusPanel.ScrollBars             = ScrollBars.None;
            _statusPanel.CssClass               = "WidgetStatusBar";

            // PLACE TIMESTAMP IN TIME PANEL
            Label _timeStamp        = new Label();
            _timeStamp.Text         = DateTime.Now.ToString();
            _statusPanel.Controls.Add(_timeStamp);

            // ADD PANELS TO DOCK CONTROL
            this.ContentContainer.Controls.Add(_settingsPanel);
            this.ContentContainer.Controls.Add(_widgetPanel);
            this.ContentContainer.Controls.Add(_statusPanel);
        }

        protected override void OnLoad(EventArgs e)
        {
            this.AutoPostBack = true;
            this.CommandsAutoPostBack = true;
        }
    }
}

We are curious if you have found a benefit to adding the title bar icon image as a background rather than a full blown image?

[Gido Geek]

Dear Malichone,

I was glad I could be of assistance.

The reason I use a background image is because my 'dock' or 'widget' icons are sprites. I use a sprite containing a small icon for the titlebar. All other images used inside that specific widget are also contained in that specific sprite. The most common used situation for me is a sprite containing an icon for the titlebar as well as an icon for the dock when being moved. I change the appearance of my dock while being dragged and display a different icon for that.

That's as far as I can remember, the only reason I switched to using background images instead of pure images.

If my previous posted was helpful and answered your question please mark it as the answer.

Merry X-Mas,

Gido