Issue With The Way HTML Is Rendered

[djhushd]

Im having an issue with the way the HTML is being rendered.

It seems to wrap the items in <UL> and <li> tags.

(see example)

 <div id="RadSiteMap1" class="RadSiteMap RadSiteMap_Default" StartingNodeOffset="0">
    <!-- 2009.3.1319.20 --><ul class="rsmList rsmLevel rsmTwoLevels">
        <li class="rsmItem"><a class="rsmLink" href="/1.aspx">1</a><ul class="rsmList rsmLevel1">
            <li class="rsmItem"><div class="rsmTemplate">

                       <a href="/2a.aspx">
                           2a</a>

            </div></li><li class="rsmItem"><div class="rsmTemplate">

                       <a href="/2b.aspx">

                           2b</a>

            </div></li><li class="rsmItem"><div class="rsmTemplate">

                       <a href="/2c.aspx">
                           2c</a>

            </div></li><li class="rsmItem"><div class="rsmTemplate">

                       <a href="/2d.aspx">
                           2d</a>


            </div></li>

For my CSS to work properly on my site map menu, i need to remove the LI and UL tags, so that it renders...

    <a href="2.aspx">2</a>

        <div>
        <a href="2a.aspx">2a</a>
        <span class="qmdivider qmdividerx" ></span>
        <a href="2b.aspx">2b</a>
        <span class="qmdivider qmdividerx" ></span>
        <a href="2c.aspx">2c</a>

        <span class="qmdivider qmdividerx" ></span>
        <a href="2d.aspx">2d</a>
        </div>

[Chris]

Hello,

Is there any way to do this? If not, is it possible to affect the css classes applied to each list item? We'd essentially like to be able to have:

<li class="rsmItem sfNoBreadcrumbNavigation newsItem"> News link </li>
<li class="rsmItem sfNoBreadcrumbNavigation contactItem"> Contact item </li>

but we could not find a way to put a CSS class on each generated <li>.

Thank you.

[Kate]

Hi Chris,

You could use the CssClass property of the RadSiteMapNode that will apply the css class to the li element of the rendered html of the page:

<telerik:RadSiteMap ID="RadSiteMap1" runat="server" BackColor="#FFFFCC" Width="800px"
                ShowNodeLines="True">
                <Nodes>
                    <telerik:RadSiteMapNode runat="server" Owner="RadSiteMap1" Text="Workflows">
                        <Nodes>
                            <telerik:RadSiteMapNode runat="server" Owner="" Text="Eintrag 1" CssClass="new">
                            </telerik:RadSiteMapNode>
                    ....
</telerik:RadSiteMap>

Greetings,
Kate
the Telerik team

[Chris]

Hello,

The RadSiteNodes are coming from an external source; they are not declared in the markup. Is there any way to adjust the CSS class from within the template?

Thank you,
Chris

[Kate]

Hello Chris,

One way to add your own css class without using the above suggested property is to use jQuery and append your own css class. You can refer to the following article on how this can be achieved:
http://api.jquery.com/addClass/

Greetings,
Kate
the Telerik team