Splitview item selection highlight

6 posts, 1 answers
  1. Brian
    Brian avatar
    23 posts
    Member since:
    Sep 2012

    Posted 22 Jul 2014 Link to this post

    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>
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 24 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Brian
    Brian avatar
    23 posts
    Member since:
    Sep 2012

    Posted 24 Jul 2014 in reply to Kiril Nikolov Link to this post

    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");
          }
  5. Brian
    Brian avatar
    23 posts
    Member since:
    Sep 2012

    Posted 24 Jul 2014 in reply to Kiril Nikolov Link to this post

    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>






  6. Brian
    Brian avatar
    23 posts
    Member since:
    Sep 2012

    Posted 24 Jul 2014 in reply to Kiril Nikolov Link to this post

    I got it.  I missed adding the style part that you had in your example.  Thanks!
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 25 Jul 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready