This is a migrated thread and some comments may be shown as answers.

RadPanelBar collapse and expand image

17 Answers 326 Views
Panelbar (obsolete as of Q2 2010)
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
David
Top achievements
Rank 1
David asked on 21 Nov 2008, 05:44 PM
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

17 Answers, 1 is accepted

Sort by
0
Boyko Markov
Telerik team
answered on 25 Nov 2008, 03:52 PM
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.
0
Mira
Top achievements
Rank 1
answered on 16 Aug 2009, 02:54 PM
Hi!
Did you fix this bug?
And if not when are you going to fix it?
Thanks
0
Boryana
Telerik team
answered on 18 Aug 2009, 10:29 AM
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.
0
Karl
Top achievements
Rank 1
answered on 14 Oct 2010, 05:24 PM
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
0
Karl
Top achievements
Rank 1
answered on 14 Oct 2010, 05:33 PM
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?

0
Peter
Telerik team
answered on 19 Oct 2010, 12:38 PM
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
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
0
Sasidhar
Top achievements
Rank 1
answered on 21 Nov 2011, 11:36 PM
Thanks, it works for me...You Save my day!!!!

Thanks,
SasidharReddy
0
Michael
Top achievements
Rank 1
answered on 13 Feb 2012, 05:07 PM
Can the images (up and down arrows on the right side of the panel bar) be changed yet in the new version?
0
Kate
Telerik team
answered on 15 Feb 2012, 01:41 PM
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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Swati
Top achievements
Rank 1
answered on 11 Dec 2012, 09:42 AM
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
0
Swati
Top achievements
Rank 1
answered on 11 Dec 2012, 11:11 AM
It is done..Neways..Thanks.

Regards,
Swati Babber
0
Arpit
Top achievements
Rank 1
answered on 11 Dec 2017, 01:17 PM
How can I replace expand/collapse images of radpanel item with some other images?
0
Rumen
Telerik team
answered on 11 Dec 2017, 05:04 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Arpit
Top achievements
Rank 1
answered on 12 Dec 2017, 01:39 PM

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.

0
Rumen
Telerik team
answered on 15 Dec 2017, 12:21 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Arpit
Top achievements
Rank 1
answered on 18 Dec 2017, 03:02 PM

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???

 

0
Rumen
Telerik team
answered on 19 Dec 2017, 03:16 PM
Hello,

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

Best regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Panelbar (obsolete as of Q2 2010)
Asked by
David
Top achievements
Rank 1
Answers by
Boyko Markov
Telerik team
Mira
Top achievements
Rank 1
Boryana
Telerik team
Karl
Top achievements
Rank 1
Peter
Telerik team
Sasidhar
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Kate
Telerik team
Swati
Top achievements
Rank 1
Arpit
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or