How to make RadSiteMap work like SiteMapPath

[robertw102]

I was wondering if the RadSiteMap is capable of rendering itself like the asp.net control SiteMapPath?

I like the Telerik controls and I thought this control would be my way of replacing the SiteMapPath control I use because it doesn't make it very easy to change the Text property in code, which is something I need.

So I was wondering if I can somehow replicate the SiteMapPath layout with the current RadSiteMap control or will this be something you guys would include in a later release of the control?

Thanks

[Paul]

Hello robertw102,

Unfortunately, you cannot achieve your goal with RadSiteMap. Anyway, your suggestion goes to our ToDo list for future consideration. Please keep sharing your feedback, as it will not remain overlooked.

Regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[terb]

Hi,

I tried to make a radsitemap that behaves like shown in the telerik web site. However, when I add the separator image, the underline was not removed. I also noticed that the separator image was not aligned in the middle. I really appreciate if someone from this forum or Telerik could provide me the complete css. The attached radsitemap.png file is what I want to achive.

Here's the html mark-up:

<telerik:RadSiteMap ID="BreadCrumbSiteMap" runat="server" DataTextField="Text" DataNavigateUrlField="NavigateUrl" CssClass="breadcrumb" Skin="Default">
        <DefaultLevelSettings ListLayout-RepeatDirection="Horizontal" Layout="Flow">
            <SeparatorTemplate>
                <asp:Image ID="Image1" ImageUrl="~/Images/smallrightarrow.gif" runat="server" />
            </SeparatorTemplate>
        </DefaultLevelSettings>

    </telerik:RadSiteMap>

Here's the css:

/**********************************

Breadcrumb

***********************************/

.breadcrumb
{
    /* border-left: 140px solid #ffa800; */
}

.breadcrumb ul.rsmFlow
{
    padding-bottom: 0;
}

.breadcrumb .rsmOneLevel li.rsmItem,
.breadcrumb .rsmOneLevel .rsmItem a.rsmLink
{
    color: #333;
    font-size: 11px;
    text-decoration: underline;
}

.breadcrumb .rsmOneLevel .rsmItem a.rsmLink:hover
{
    color: #555;
    font-size: 11px;
    text-decoration: none;
    background: none;
}

.breadcrumb_header
{
    height: 50px;
    padding-top: 20px;
    border: 0px solid black;
}

Thank you very much,
TDeztenen

[Kate]

Hello,

Here I have attached a working sample that produces the image that you provided(RadSiteMap.png). The items are underlined, the arrow is used as a separator between the items and it is not underlined.

Best wishes,
Kate
the Telerik team