RadPanelBar collapse and expand image

[David]

Hi there:

First of all Congrats for the new Design and performance of Telerik Forums :D you're great guys.

Now, my problem jejeje. I've been using radpanel bars and I'm trying to customize their styles with the Telerik theme builder. I've localized the collapse and expand images in the element tree:

RootRadElement
--RadPanelBarElement
----ExploreBarLayout
------RadPanelGroupElement (Properties: GroupCollapseExplorerBarImage, GroupExpandExplorerBarImage)

At the last Element I've found those images, but even when I changed them, nothing happened. I don't know if those are the correct images that I've need to change.

Could you help me with that issue?

Thanks

[Boyko Markov]

Hi David,

Thank you for the nice words about the Forums - we are actively working on their next version I am sure you will enjoy the improvements that we will implement.

I'm sorry for the inconvenience you have experienced using RadPanelBar. It seems that the caption images for expand/collapse are hard coded and I won't be able to provide you a solution, or even a work-around. However we will have a SP release next week and I will do my best to fix this issue and make it possible to change the expand/collapse image through the VSB tool or by using the control's API.

Please let me know if there is something else regarding RadPanelBar.


Kind regards,
Boyko Markov
the Telerik team

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

[Mira]

Hi!
Did you fix this bug?
And if not when are you going to fix it?
Thanks

[Boryana]

Hello Mira,

Thank you for your interest. Unfortunately, this issue has not been addressed yet. Our team apologizes for the inconvenience.

Nevertheless, I managed to produce a workaround for this case. The only way to apply custom images to RadPanelBarCaptionButtons is to set their Image property each time the RadPanelBarGroupElements have been expanded or collapsed. This will also allow you to customize the image size, location, and ImagePrimitiveAngle. For further information, please refer to the attached sample project.

I hope this is helpful. Our team apologizes once again. We will address this issue in the future releases. Please, let me know if the provided workaround is convenient for you.

Greetings,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Karl]

I'm having a similar issue with the asp ajax RadPanelBar control.

I want to change the icon shown on an expandable panel for its different states but cant see how this is done. I've even visited the Telerik Visual Style Builder site (which I appreciate is only Beta) and while the icon is shown in the style, it can't be edited. Is the ability to change this icon in the list of changes scheduled for this control?

Thanks,
Karl

[Karl]

Found it...

use
             ExpandedImageUrl="App_Themes/MyTheme/Images/Furniture/btn_hide.gif" 
             ImageUrl="App_Themes/MyTheme/Images/Furniture/btn_show.gif"

However, I'd still like to know how to hide the default arrows on the right?

[Peter]

Hi Karl,

Please, add the following css to hide the expand arrows of the panelbar items:

.rpExpandHandle
       {
           display: none !important;
       }

All the best,
Peter
the Telerik team

[Sasidhar]

Thanks, it works for me...You Save my day!!!!

Thanks,
SasidharReddy

[Michael]

Can the images (up and down arrows on the right side of the panel bar) be changed yet in the new version?

[Kate]

Hello Michael,

Yes, by using the css class selector below you can change the expand/collapse image:

div.RadPanelBar_Office2010Silver .rpExpandable span.rpExpandHandle,
 div.RadPanelBar_Office2010Silver .rpExpanded span.rpExpandHandle {
    background-image: url("PanelBar/Expandable.png");
}

You can also find the image sprite (as an attached image) of the expand/collapse arrow that is applied in general to a RadPanelItem.

Regards,
Kate
the Telerik team

[Swati]

Hi,

Can you please tell me how to shift Expand/Collapse images to the left hand side instead of right (the default position of Expand/Collapse images).


Thanks and Regards,
Swati Babber

[Swati]

It is done..Neways..Thanks.

Regards,
Swati Babber

[Arpit]

How can I replace expand/collapse images of radpanel item with some other images?

[Rumen]

Hello,

If the panelbar is configured with RendeMode="Lightweight" you have to update the font icons with the following CSS classes:

<style>
    .t-i-expand-s:before, .t-i-expand-down:before, .p-i-expand-s:before, .p-i-expand-down:before, .p-i-arrow-chevron-down:before {
        content: "\e100" !important;
    }

    .t-i-expand-n:before, .t-i-expand-up:before, .p-i-expand-n:before, .p-i-expand-up:before, .p-i-arrow-chevron-up:before {
        content: "\e101" !important;
    }
</style>

For the classic render mode you can use this class:

<style>
    .rpExpandable span.rpExpandHandle {
        background-image: url(Images/Apply.png) !important;
        background-position: unset !important;
    }
</style>

Regards,
Rumen
Progress Telerik

[Arpit]

Hi Rumen,

Thanks for your reply....I am using RenderMode="Lightweight" but suggested style is not working for me. Expand Collapse arrows coming as it is after applying style.

[Rumen]

Hello Arpit,

For your convenience I have attached my test project and the following demonstration video: https://www.screencast.com/t/mMlyh7U7.

You can use the browser dev toolbar to further expect the rendered markup and CSS and to overwrite it as shown in the video.

Regards,
Rumen
Progress Telerik

[Arpit]

I was using below code to change the expand image icon of radpanel item :

 <style>

       .RadPanelBar .rpExpandable .rpExpandHandle::before

        {
            content: url(../Images/image.png) !important;
        }

</style>

but after expansion of item i want to replace this previous image with some collapse image,for example if i have 5 radpanel item and if i expand item1 so only item1  image will be replaced with collapse image and rest of 4 item image will remain same.

how can i do that???

 

[Rumen]

Hello,

You can find attached a sample example and a video demonstrating the requested expand and collapse icon change.

Best regards,
Rumen
Progress Telerik