remove span and classes

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

    Posted 21 Feb 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" index="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<v></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" index="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
    1301 posts

    Posted 22 Feb Link to this post

    Hello Pato,

    I replied to your inquiry in the support thread with the same subject you opened. To sum it up here, you can insert your own content in the Menu's items through using the item's Content configuration option:
    items.Add().HtmlAttributes(new { @id = "HeaderMain" , @class = "selectedMenu",@style ="display: inline-block;"}).Content(@<text>
                          <div>Custom Text</div>
                    </text>);

    which will replace the default span element with class k-link with a div element (with class k-content) that will be the custom content's container.

    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