Mobile: change ListView data-icon

[Seth Morecraft]

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

[Kamen Bundev]

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

[Seth Morecraft]

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!