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

visualize row selection

3 Answers 42 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
axel
Top achievements
Rank 1
axel asked on 20 Jan 2013, 11:19 PM
Hi,

how can I change li background-color on item click to visualize that user has selected a row?
here is what i have:

...
                <ul id="lvDatabases">
        </ul> 
...

    <script type="text/x-kendo-tmpl" id="tmplDatabase">
<label >
<img style="float:left; padding-right: 0.5em" src="images/bullet.png" alt="bullet" />
${name}
</label>
    </script> 

       $("#lvDatabases").kendoMobileListView({
           dataSource: _dsDatabases,
           template: kendo.template($("#tmplDatabase").html()),
           style: "inset"
       });

Kind regards
Axel

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 22 Jan 2013, 02:04 PM
Hi Axel,

Mobile ListView does not provide selectable feature out of the box, however you can easily implement it by using the click event and toggleClass method of jQuery.
function onClick(e) {
    e.item.toggleClass("listview-selected");
}

For convenience I prepared a small example using this approach in action.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
axel
Top achievements
Rank 1
answered on 22 Jan 2013, 10:13 PM
Works well.

Many thanks, Alexander
0
axel
Top achievements
Rank 1
answered on 23 Jan 2013, 07:58 AM
For the sake of completeness.

function onClick(e) {
    e.item.toggleClass("listview-selected");
      e.preventDefault();
}

The preventDefault function is necessary to maintain the selection

axel


Tags
ListView (Mobile)
Asked by
axel
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
axel
Top achievements
Rank 1
Share this question
or