Mobile: change ListView data-icon

3 posts, 0 answers
  1. Seth Morecraft
    Seth Morecraft avatar
    7 posts
    Member since:
    Mar 2010

    Posted 20 Jul 2012 Link to this post

    Hi guys,
      I am trying to change the data-icon in a simple ListView here on a mobile application.  I don't want to bind this listview to data if possible because I have controls like switches in here.  I have the following:

    <ul id="settings_listView" data-role="listview" data-style="inset">
                    <li id="settings_mainttrack" data-icon="trash"><a href="#tabstrip-mainttrack">Something1</a></li>
                    <li id="settings_burntrack"  data-icon="trash"><a href="#tabstrip-burntrack">Something2</a></li>
    </ul>

    and I would like to change the data-icon when this 'tab' loads, so I have a function like this:

    $("#settings_burntrack").attr("data-icon", "");
    $("#settings_mainttrack").attr("data-icon", "toprated");

    I was hoping that the mainttrack element would have the 'toprated' icon now, but it still has 'trash'.  I think it is because the list is already painted by this point.  Is there any way to refresh the listview in the mobile side?  I tried to call 'refresh' directly but that is not a method in the mobile side.  Any thoughts would be appreciated.  Thanks!
    Seth
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 24 Jul 2012 Link to this post

    Hello Seth,

    The data-icon attribute actually sets a couple of classes to the icon container, one is km-icon, the other - km-trash in your case. Since the icons have the same classes as attributes, you can just search for km-icon inside the LI element, remove the old class and add the new one you want. something like this:
    $("#settings_mainttrack").find(".km-icon").removeClass("km-trash").addClass("km-toprated");

    You can also refresh() the ListView instead, but this will recreate it.

    Greetings,
    Kamen Bundev
    the Telerik team
    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. Seth Morecraft
    Seth Morecraft avatar
    7 posts
    Member since:
    Mar 2010

    Posted 24 Jul 2012 Link to this post

    Thank you!  Works great.  I was not able to get refresh() to be called on a listview in the mobile ui, but the other solution you mentioned is exactly what I was looking for.  Thanks again!
Back to Top