[Solved] Visual Indicator of Child Items

[Paul Evans]

I have a hierarchical PanelBar (code below).  Would like to have a visual indicator on each item that has children.  As a stopgap, have put ">" signs next to the text of these items, but is there a better way? Thanks <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Outlook">

<Items>

<telerik:RadPanelItem Text="Local" >

<Items>

<telerik:RadPanelItem Text="Charts >">

<Items>

<telerik:RadPanelItem Text="Summary"></telerik:RadPanelItem>

<telerik:RadPanelItem Text="Detail >" >

<Items>

<telerik:RadPanelItem Text="Local, County, Statewide"></telerik:RadPanelItem>

<telerik:RadPanelItem Text="Inventory"></telerik:RadPanelItem>

<telerik:RadPanelItem Text="Prices"></telerik:RadPanelItem>

<telerik:RadPanelItem Text="Sales"></telerik:RadPanelItem>

<telerik:RadPanelItem Text="Market Time"></telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Reports">

<Items>

<telerik:RadPanelItem Text="Recent Local Sales"></telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Maps"><Items>

<telerik:RadPanelItem runat="server" Text="Map 1"></telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Map 2"></telerik:RadPanelItem>

</Items></telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="County"></telerik:RadPanelItem>

<telerik:RadPanelItem Text="State"></telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

 

 

[Schlurk]

You could do something like this during a couple of events (page load for example);

int itemCount = 0;
foreach (RadPanelItem myItem in RadPanelBar1.Items)
{
     itemCount = myItem.Items.Count;
     if (itemCount > 0)
          myItem.ImageUrl = "~/Test.jpg";
}

Which sets the image of the PanelBarItem if it has children.

[Paul Evans]

Thanks for the response.  Got dragged on to another project for a while, but now back into this.  

Tried your suggestion and it worked ... but has a couple of drawbacks.  First, the loop only covers 1st level items.  Since there are several levels in my hierarchy, it needs to be made recursive.  Not a big deal. 

Also, I couldn't find the images they use for the up and down arrows.  So found a similar image and created my own image files.  Problem is that when they display on a colored background, you see the arrow inside of a white square on top of the colored background ... not very slick looking.  Have spent a couple of hours looking at documentation of skins and style sheets and can do no better. 

I found the attached image, which seems to do exactly what I need (note the arrows on Child Item 1.1 and Child Item 1.3), in the help under RadPanelBar ... Usability ... Expanding and Collapsing Items.  But there's no sample code. 

[Schlurk]

What you could do is define a custom CSS class for those items, and then for each child that has more children inside of it you simply set their CSS class to your custom class. An example of this is seen here, and I think this would be the route to go :)

[Paul Evans]

Schlurk, thanks once again.  Not there yet, but making progress. 

Looked at the link you sent.  Based on that, decided to create a custom skin following the tutorial: http://www.telerik.com/help/aspnet-ajax/panel_appearancecreatingacustomskin.html .  Succeeded in duplicating the Default skin.

Below is a fragment of PanelBar.Default.css.  Here's the problem.  If I change the css background-color from transparent to Blue, all expandable items have a blue background ... perfect.  But they do NOT display the background-image (Expandable.png). 

Apparently css background-color maps to RadPanelItem BackColor.  But as far as I can tell, css background-image does NOT map to RadPanelItem ImageUrl as I would have expected based on the samples.  And haven't found an answer in the documentation. 
.............................

/* <expand arrows> */
.RadPanelBar_Default .rpExpandable .rpText,
.RadPanelBar_Default .rpExpanded .rpText
{
 background-color: transparent;
 background-image: url('PanelBar/Expandable.png');
}
/* </expand arrows> */
...............................

[Schlurk]

You are welcome! That last bit is a bit tricky though, perhaps if you place !important after your background-image statement this could work. There might be something with the CSS specificity that is preventing the image to be displayed. Also, I believe the ImageURL is meant specifically for when you want an image to tag along with your item (say like in this demo), and isn't connected to the expand/collapse image.