Splitview item selection highlight

[Brian]

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>

[Kiril Nikolov]

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

 

 

[Brian]

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");
      }

[Brian]

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>

[Brian]

I got it.  I missed adding the style part that you had in your example.  Thanks!

[Kiril Nikolov]

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