expand / collapse arrow

[Todd A]

I am using a RadPanelBar -- I am currently hiding the expand and collapse arrows using the following code:

.rpExpandHandle
{
    display: none!important;
}
 .rpCollapseHandle
{
    display: none!important;
}

This works great -- except now I need to add another RadPanelBar to the same page where I need to show the expand and collapse arrows.

I read in the following help file that if you set the imageUrl and imagePosition to right, then it will replace the image.  Unfortunately I can't get that to work.

Here's the help link:

http://www.telerik.com/help/aspnet-ajax/panel_appearanceitemimages.html

Here's my code sample:

<telerik:RadPanelBar runat="server" ID="SupportPanelBar" Width="150" >
                        <ExpandAnimation Type="None"></ExpandAnimation>
                        <CollapseAnimation Type="None"></CollapseAnimation>
                        <Items>
                            <telerik:RadPanelItem Text="TeamSideline" Expanded="True" PreventCollapse="true" NavigateUrl="/Home.aspx" ImagePosition="Right" ImageUrl="~/img/icon_delete_active.png" SelectedImageUrl="~/img/icon_delete_active.png">
                                <Items>
                                    <telerik:RadPanelItem Text="Support Menu" NavigateUrl="/Support/Home.aspx" BackColor="#D7D8D8"  />
                                    <telerik:RadPanelItem Text="Public Downloads" NavigateUrl="/TsMoreInfo.aspx" BackColor="#D7D8D8" />
                                </Items>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelBar>

And the output is attached.  I am using the telerik dll -- 2010.3.1109.40

Your help is appreciated.

Thanks,
Todd.

[Shinu]

Hello Todd,


Then you can follow another technique to hide the expand/collapse image by using javascript code. Attach OnClientLoad client event and iterate through all the items to hide the image.

Code for reference:

<script type="text/javascript">
    function OnClientLoad(sender, args) {
        var items = sender.get_allItems();
        for (var i = 0; i < items.length; i++) {
            items[i].get_expandHandleElement().style.display = "none";
        }
    }
</script>

-Shinu.

[Todd A]

Hi Shinu,

Thank you for the workaround.

If I could do what the documentation says -- that would be ideal.

Is this a bug?

Thanks,
Todd.

[Shinu]

Hello,


The behavior is expected since you applied the CSS rule for global CSS selector. It will be applied for all the RadPanelBars on page and hence it is not a bug.

So, the javascript will be useful for customizing any specific RadPanelBar by accessing the particular item and setting CSS rule for that. Hope I explained it better. :)


-Shinu.

[Todd A]

Hi Shinu,

I appreciate your responses.

I have removed the global CSS code.  And then the up and down arrows showed as expected.

I applied the code per the documentation, setting the imageUrl and positioning it to the right, and the arrows did not disappear as expected.

Thanks
Todd.

[Todd A]

I tried this solution - and it works although when the page renders, the handles are briefly shown.

Regarding the documentation and not working like it's documented, should I submit a support ticket?

Thanks,
Todd.

[Yana]

Hello Todd,

You are right that the documentation is not correct, we'll review and update the article. Thanks for reporting this, I've updated your points.

Kind regards,
Yana
the Telerik team