Modifying Dock Expand icon

[Tony Polad]

Hi,

1. How do I modify the expand/collapse icon in the dock ?
2. How do I move the position of the expand/collapse icon to left side.

Here is what I wanna do.
1. Change the expand/collapse icon with the triangle icon.
2. Move the position of the expand/collapse icon to the left (just before the title of the dock)

Any help would be appriciated.

Thanks.

[-DJ-]

Hi Susanto.

1. You just have to edit the

.RadDock_MySkin .rdCollapse

 and

.RadDock_MySkin .rdExpand

classes. There you can set a new image of your choice.

Example:

.RadDock_MySkin .rdCollapse
{
    background:url(Dock/minimize.png) no-repeat;
}

2. To align it to the left side I'm guessing you will have to set a right margin. How big depends on the width of your dock.

Something like this should work:

.RadDock_MySkin .rdCollapse
{
    background:url(Dock/minimize.png) no-repeat;
    margin-right: 250px
}

Note that you can also set hover images for both the expand and collapse images by adding these classes to your skin css file:

.RadDock_MySkin .rdCollapse:hover
.RadDock_MySkin .rdExpand:hover

Regards,
-DJ-

[Tony Polad]

Hi,

Thanks for the answer.

The icon is works.

But

The alignment does not work as expected.

I have a dynamic size of Dock. The Dock can be resize at any time.

How you you set it from css without set the fixed value. I did try to put percentage, but it does not work.

Do you have any other suggestion ?

Thanks.

[-DJ-]

Hi again Susanto.

I won't be at my work computer until next Tuesday, so I'm afraid I won't be of much help to you.

If I remember correctly there is no Dir="rtl" property for the Dock, nor is there a simple align value for the buttons.

Using % doesn't sound like a bad idea, but you will probably have to add some javascript so the % get applied on the fly as the user resizes the dock.

That is if you get the % working in the first place.

Regards,
-DJ-

[Martin]

Hi Susanto,

Unfortunately, the scenario with the left-aligned expand / collapse button cannot be achieved with the current rendering of RadDock neither with margins (as DJ has suggested), nor with any kind of positioning, because the buttons have a wrapping element that does not allow such manipulation.

I have tried several approaches, but none of these worked.

Have a great weekend,
Martin Ivanov
the Telerik team

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

[harika dasari]

Hi,

  I want to change the image of Expand/Collapse of raddock
i tried giving the same as mentioned
but not working
following is the code which i have added to my aspx page

 

<

 

style type="text/css">

 

 

 

 

 

 

 

 

.rdExpand

 

 

 

{

 

 

 

background:url(DockImage\DockImage\Images\red.urgent.icon.28x28.gif) no-repeat;

 

 

 

}

 

</style>

Need help on this asap

Thanks in Advance
Pushpa.