Issue With The Way HTML Is Rendered

5 posts, 0 answers
  1. djhushd
    djhushd avatar
    6 posts
    Member since:
    Aug 2007

    Posted 19 Mar 2010 Link to this post

    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> 
     



  3. Chris
    Chris avatar
    6 posts
    Member since:
    Aug 2011

    Posted 17 Apr 2012 Link to this post

    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.
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 19 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Chris
    Chris avatar
    6 posts
    Member since:
    Aug 2011

    Posted 20 Apr 2012 Link to this post

    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
  8.
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 25 Apr 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top