[Solved] Rad Dock commands pushed out of viewable area of titlebar

[Adam Heeg]

I'm having a problem with my rad docks.  All my docks are created in code behind.  I add the title and the commands in code behind as well.  Everything works fine to that point.  Now I am trying to add a control to the title bar.  When I add it the vertical position of the commands is pushed down causing them to be hidden from view.

I have tried to implement a custom titlebar template, but I have not found out how to control the placement of the commands.

Here is some code creating the rad dock.

//Create the Rad Dock and set properties
RadDock rd = new RadDock ();
rd.DockMode = DockMode.Docked;
rd.UniqueName = Guid.NewGuid().ToString();
rd.ID = string.Format("rd{0}",rd.UniqueName);
rd.Width = Unit.Percentage(99);
rd.Skin = "Custom";
rd.EnableEmbeddedSkins = false ;
rd.EnableRoundedCorners = true ;
rd.Title = "Title";

rd.Command += new
DockCommandEventHandler(rd_Command);
DockCommand cmd = new DockCommand();
cmd.AutoPostBack = true;
cmd.Name = hideCommand;
cmd.Text = "Hide";
rd.Commands.Add(cmd);
rd.Commands.Add(new DockExpandCollapseCommand());

 
Here is the code to add the Icon and title to the title bar.

Label lbl = new Label();
lbl.ID = "lbl" + rd.ID;
lbl.EnableViewState = true;
lbl.Width = Unit.Pixel(250);
lbl.Text = "My Desired Content";

Image mg = new Image();
mg.ImageUrl = "~/demo/oldData.jpg";
mg.ID = "mg" + rd.ID;
// This method here will add a tooltip to the image
// so users can see old data on mouseover.
CreatePastDataToolTip(rd,null, mg.ID);
rd.ContentContainer.Controls.Add(lbl);
rd.TitlebarTemplate = new TitleBarTemplate();
rd.TitlebarContainer.Controls[0].FindControl(TitleBarContent).Controls.Add(mg);

Here is my Custom TitleBar Template.  I've implemented a couple different ideas, this was my last idea, and it worked as far as lining up the Title and the Image in the title.  But, I still couldn't get the Commands to display within the titlebar.

  

   public class TitleBarTemplate : ITemplate
   {
      Label lblText = new Label();
      Panel pContainer = new Panel();
      Panel pControls = new Panel();

      public void InstantiateIn(Control container)
      {
         Literal l;
         lblText.ID = "TitleText";
         lblText.Text = "Initial Text";
         //pControls.CssClass = "rdTitleControls";
         pControls.ID = "PanelForControls";
         l = new Literal();
         l.Text = "<table><tr><td>";
         pContainer.Controls.Add(l);
         pContainer.Controls.Add(lblText);

         l = new Literal();
         l.Text = "</td><td>";
         pContainer.Controls.Add(l);
         pContainer.Controls.Add(pControls);
         l = new Literal();
         l.Text = "</td></tr></table>";
         pContainer.Controls.Add(l);

         container.Controls.Add(pContainer);
      }
   }

Any help would be greatly appreciated.



Adam

[Adam Heeg]

I could really use some help on this.  If there is any more information I can give please let me know.  Any acknowledgement is appreciated.

[Pero]

Hi Adam,

Thank you for the code.

The problem is caused by adding [display:] block elements to the TitleBar container of the dock. To overcome the issue you need to float: left these elements. I have created a sample project based on your code. Everything is working fine, and the project can be found attached to the thread.

Regards,
Pero
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Adam Heeg]

Thank you, Pero, it did fix the problem.