Extending RadDock Control

4 posts, 0 answers
  1. Malichone
    Malichone avatar
    8 posts
    Member since:
    Nov 2009

    Posted 16 Dec 2009 Link to this post

    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);  
            }  
        }  
  2. Gido Geek
    Gido Geek avatar
    28 posts
    Member since:
    Nov 2009

    Posted 17 Dec 2009 Link to this post

    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 !
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Malichone
    Malichone avatar
    8 posts
    Member since:
    Nov 2009

    Posted 21 Dec 2009 Link to this post

    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?

  5. Gido Geek
    Gido Geek avatar
    28 posts
    Member since:
    Nov 2009

    Posted 21 Dec 2009 Link to this post

    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
Back to Top