remove span and classes

2 posts, 0 answers
  1. Pato
    Pato avatar
    2 posts
    Member since:
    Feb 2017

    Posted 21 Feb 2017 Link to this post

    to be able to get the desired menu for my css, i need the following output of menu:

    01.<ul id="leftMenu" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" tabindex="0" role="menubar"style="display: block;">
    02.    <li id="HeaderMain" style="display: inline-block;" class="k-item k-state-default k-first selectedMenu" role="menuitem">
    03.        <div class="mnuLiCont">
    04.            <div class="mnuHomeIcon"></div>
    05.            <div class="mnuTxt">Home</div>
    06.        </div>
    07.    </li>
    08.    <li id="HeaderDashBoard" style="display: inline-block;" class="k-item k-state-default" role="menuitem">
    09.        <div class="mnuLiCont">
    10.            <div class="mnuDashBoardIcon"></div>
    11.            <div class="mnuTxt">Dashboard</div>
    12.        </div>
    13.    </li>
    14.</ul>

     

    This is the code im doing to be able to create this menu:

    01.@(Html.Kendo().Menu()
    02.          .Name("leftMenu")
    03.          .Items(items =>
    04.          {
    05.              items.Add().HtmlAttributes(new { @id = "HeaderMain" , @class = "selectedMenu",@style = "display: inline-block;"});
    06.              items.Add().HtmlAttributes(new { @id = "HeaderDashboard", @style = "display: inline-block;" });
    07.              items.Add().HtmlAttributes(new { @id = "HeaderExtra", @style = "display: none;" });
    08.          })
    09.          .HtmlAttributes(new {@style = "display: block"})
    10. 
    11.        )

     

    1.$(document)
    2.        .ready(function () {
    3.            $("#HeaderMain").append("<div class='mnuLiCont'><div class='mnuHomeIcon'></div><div class='mnuTxt'>Home</div></div>");
    4.            $("#HeaderDashboard").append("<div class='mnuLiCont'><div class='mnuDashBoardIcon'></div><div class='mnuTxt'>Dashboard</div></div>");
    5.             
    6. 
    7.        });

     

    And in the next code you can see the undesired SPAN in each menu item, which i need to get rid of.

     

    01.<ul id="leftMenu" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" tabindex="0" e="menubar"style="display: block;">
    02.    <li id="HeaderMain" style="display: inline-block;" class="k-item k-state-default k-first selectedMenu" role="menuitem">
    03.        <span class="k-link"></span>
    04.        <div class="mnuLiCont">
    05.            <div class="mnuHomeIcon"></div>
    06.            <div class="mnuTxt">Home</div>
    07.        </div>
    08.    </li>
    09.    <li id="HeaderDashBoard" style="display: inline-block;" class="k-item k-state-default" role="menuitem">
    10.        <span class="k-link"></span>
    11.        <div class="mnuLiCont">
    12.            <div class="mnuDashBoardIcon"></div>
    13.            <div class="mnuTxt">Dashboard</div>
    14.        </div>
    15.    </li>
    16.</ul>

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1617 posts

    Posted 22 Feb 2017 Link to this post

    Hello Pato,

    This is a second identical thread opened with the same subject, but this one's product (RadMenu for ASP.NET AJAX) is incorrect. I am switching the product to Menu for ASP.NET MVC and closing the thread. If you have more  questions on this matter you can post them in the other forum thread or in the support ticket you opened.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top