visualize row selection

4 posts, 0 answers
  1. axel
    axel avatar
    51 posts
    Member since:
    Jan 2010

    Posted 20 Jan 2013 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 22 Jan 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. axel
    axel avatar
    51 posts
    Member since:
    Jan 2010

    Posted 22 Jan 2013 Link to this post

    Works well.

    Many thanks, Alexander
  5. axel
    axel avatar
    51 posts
    Member since:
    Jan 2010

    Posted 23 Jan 2013 Link to this post

    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


Back to Top
Kendo UI is VS 2017 Ready