This is a migrated thread and some comments may be shown as answers.

Mobile: change ListView data-icon

2 Answers 172 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Seth Morecraft
Top achievements
Rank 1
Seth Morecraft asked on 20 Jul 2012, 08:03 PM
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 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 24 Jul 2012, 12:08 PM
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!
0
Seth Morecraft
Top achievements
Rank 1
answered on 25 Jul 2012, 01:18 AM
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!
Tags
ListView (Mobile)
Asked by
Seth Morecraft
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Seth Morecraft
Top achievements
Rank 1
Share this question
or