remove span and classes

[Pato]

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>

 

[Ivan Danchev]

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