Hi. I've created a split view application and I'm using the left panel as a menu. I would like the selected menu item to appear selected when tapped. I would also like any of the other menu items to become unhighlighted whenever a menu item is selected. So only one of the menu items should ever appear to be selected. Is this possible?
I'm binding in html as follows:
<div data-role="view" data-title="Menu" id="side-root" class="no-backbutton">
<!--Menu List -->
<ul data-role="listview"
id="mt-home-list-view"
data-template="mt-main-tmpl-home-list"
data-source="arrayOfHomeButtons">
</ul>
</div>
I'm binding in html as follows:
<div data-role="view" data-title="Menu" id="side-root" class="no-backbutton">
<!--Menu List -->
<ul data-role="listview"
id="mt-home-list-view"
data-template="mt-main-tmpl-home-list"
data-source="arrayOfHomeButtons">
</ul>
</div>
5 Answers, 1 is accepted
0
Accepted
Hi Brian,
The functionality that you are looking for is not available built-in with Kendo UI Mobile. I have created an example that should do exactly the same, please check it out and let me know if it helps:
http://dojo.telerik.com/UReN
Regards,
Kiril Nikolov
Telerik
The functionality that you are looking for is not available built-in with Kendo UI Mobile. I have created an example that should do exactly the same, please check it out and let me know if it helps:
http://dojo.telerik.com/UReN
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0

Brian
Top achievements
Rank 1
answered on 24 Jul 2014, 02:05 PM
Hi Kiril. I saw the demo and I understand how it is working and why. However, when I apply it to my code, it still reverts back. I put and alert in the function as below and I see it firing in my code but it immediately reverts back to the initial color/ state. Perhaps I'm missing something else? Any ideas?
<div data-role="view" data-title="Menu" id="side-root" class="no-backbutton">
<!--Menu List -->
<ul data-role="listview"
id="mt-home-list-view"
data-template="mt-main-tmpl-home-list"
data-source="arrayOfHomeButtons"
data-click"highlightItem">
</ul>
</div>
function highlightItem(e) {
alert("test");
e.item.parent("ul").find("li").removeClass("km-state-highlighted");
e.item.addClass("km-state-highlighted");
}
<div data-role="view" data-title="Menu" id="side-root" class="no-backbutton">
<!--Menu List -->
<ul data-role="listview"
id="mt-home-list-view"
data-template="mt-main-tmpl-home-list"
data-source="arrayOfHomeButtons"
data-click"highlightItem">
</ul>
</div>
function highlightItem(e) {
alert("test");
e.item.parent("ul").find("li").removeClass("km-state-highlighted");
e.item.addClass("km-state-highlighted");
}
0

Brian
Top achievements
Rank 1
answered on 24 Jul 2014, 02:09 PM
Hi Kiril. I tried applying your solution to my code but it isn't working. I see the alert below firing when highlightItem is called but it immediately reverts back to the original color. Any ideas?
function highlightItem(e) {
alert("test");
e.item.parent("ul").find("li").removeClass("km-state-highlighted");
e.item.addClass("km-state-highlighted");
}
<div data-role="view" data-title="Menu" id="side-root" class="no-backbutton">
<!--Menu List -->
<ul data-role="listview"
id="mt-home-list-view"
data-template="mt-main-tmpl-home-list"
data-source="arrayOfHomeButtons"
data-click="highlightItem">
</ul>
</div>
function highlightItem(e) {
alert("test");
e.item.parent("ul").find("li").removeClass("km-state-highlighted");
e.item.addClass("km-state-highlighted");
}
<div data-role="view" data-title="Menu" id="side-root" class="no-backbutton">
<!--Menu List -->
<ul data-role="listview"
id="mt-home-list-view"
data-template="mt-main-tmpl-home-list"
data-source="arrayOfHomeButtons"
data-click="highlightItem">
</ul>
</div>
0

Brian
Top achievements
Rank 1
answered on 24 Jul 2014, 02:15 PM
I got it. I missed adding the style part that you had in your example. Thanks!
0
Hello Brian,
I am glad to hear that the issue is resolved now.
I will go ahead and close the ticket, but in case you have any further questions, please do not hesitate to contact us.
Regards,
Kiril Nikolov
Telerik
I am glad to hear that the issue is resolved now.
I will go ahead and close the ticket, but in case you have any further questions, please do not hesitate to contact us.
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!