Raddock - custom images at the right-top

[franchute]

Hi guys,

Is there any way to change the images showed in the custom commands example at the right-top of the control ?

Thanks in advance,

François.

[Sophy]

Hi François,

Please, refer to the Styling Custom Commands help article which describes how to change the images shown in RadDock's custom commands.

All the best,
Sophy
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[sam]

hi sophy

i am trying to add imge in command in title bar in rad dock object
the folloing my code in HTML and its didn't work
Commands>
<cc1:RadDockableObjectCommand AutoPostBack="True" Name ="ViewTotalCallsForLoginUserReport" ToolTip = "ViewReport"
Image="../../../ViewReport.gif" />
</Commands> 


thanx in advance
Asmaa

[Svetlina Anati]

Hi sam,

I am not quite sure what exactly is

<cc1:RadDockableObjectCommand AutoPostBack="True" Name ="ViewTotalCallsForLoginUserReport" ToolTip = "ViewReport"
Image="../../../ViewReport.gif" />

but I assume that this is a user control (.ascx). If I am right I want to note that you can not put such in the titlebar. Between the <Commands> tags you should define a <telerik:DockCommand>, which you can customize further as shown below:

   <telerik:DockCommand CssClass="MyCustomStyle" Name="Alert" OnClientCommand="MakeAnAlert" />

In the OnClientCommand handler you specify what to happen when the icon is clicked. The icon image is associated with the command by the CSSClass property and in the corresponding class you set the image:

.MyCustomStyle
  {
    width: 30px;
    height: 10px;
    background:url(alertIcon.gif);
  }

For your convenience I am attaching a sample project which shows how to achieve the desired functionality.

All the best,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[sam]

Hi Svetlina  
I tried the code u sent in previous post, its not work what i want is add an Image just like Expande and Collapse images in my commnad in my rad dock obj i am using Q1 20047.
 why in the following HTML the image property was not take the image path

<%

@ Register Assembly="RadDock.Net2" Namespace="Telerik.WebControls" TagPrefix="cc1" %>

<cc1:RadDockableObject ID="TestObject" runat="server" Enabled ="true" DockingMode ="Dockable" Behavior =" Pin, Collapse " Text ="Test Obj" Width="200px" Height ="100" OnCommand = "TestObject_Command" BorderColor ="#cccc33"  >
<ContentTemplate >
<uc2:ucTest  ID="ucTest 1" runat="server" />
</ContentTemplate>
<Commands>
<cc1:RadDockableObjectCommand AutoPostBack="True" Name ="TestTest"

ToolTip ="xxx" Image="~/ViewReport.gif"/>
<cc1:RadDockableObjectCommand Enabled="False" Name="Expand" ToolTip="Expand" />
<cc1:RadDockableObjectCommand Enabled="False" Name="Collapse" ToolTip="Collapse" />
</Commands> </cc1:RadDockableObject>

thnx in advanc
Asmaa

[Svetlina Anati]

Hello sam,

Thank you for the provided code.

I noticed that you are using RadDock for ASP.NET, not the RadDock for ASP.NET AJAX.

The Image property should be set to the image's name, not to the corresponding URL. In order to achieve the desired behavior you should add your image (ViewReport.gif) to the folder RadControls\Dock\Skins\[Your_Skin_Name]\Img in your project.
 
Let's assume that you use the default skin. In this case after you have added the image in the folder RadControls\Dock\Default\Img, you should modify your markup in the following manner:

<cc1:RadDockingManager Skin="Default" ID="RadDockingManager1" runat="server" />
        <cc1:RadDockableObject  ID="TestObject" runat="server" Enabled="true" DockingMode="Dockable"
            Behavior=" Pin, Collapse " Text="Test Obj" Width="200px" Height="100" >
            <ContentTemplate>
            </ContentTemplate>
            <Commands>
                <cc1:RadDockableObjectCommand AutoPostBack="True" Name="TestTest" ToolTip="xxx" Image="ViewPort.gif" />
                <cc1:RadDockableObjectCommand Enabled="False" Name="Expand" ToolTip="Expand" />
                <cc1:RadDockableObjectCommand Enabled="False" Name="Collapse" ToolTip="Collapse" />
            </Commands>
        </cc1:RadDockableObject>

All the best,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center