Delete listview item using rowdelete detail button, and change the icon style when rowdelete button is clicked

2 posts, 0 answers
  1. Benjamin Lin
    Benjamin Lin avatar
    4 posts
    Member since:
    Oct 2009

    Posted 08 Jul 2013 Link to this post


    I would like to achieve similar UI behaviour as IPhone when delete a item from a list, and want to show different icon when rowdelete button is clicked, but not idea how to achieve this using kendo mobile.  could someone please assist me? thanks. 

     <script id="wordListEditTemplate" type="text/x-kendo-template">

           <a data-role="listview-link">
               <span><a data-role="detailbutton" id="wordRowDelete" data-style="rowdelete" data-bind="click:delete"></a></span>
           #= renderWordDefinitionsTemplate(data) #

    in the above code snippet, I have binded the click event to a delete function. In the delete function, I want to show different icon, and also show the "Delete" button on the right position.

  2. Alexander Valchev
    Alexander Valchev avatar
    2887 posts

    Posted 10 Jul 2013 Link to this post

    Hello Benjamin,

    I already replied in the support ticket that you submitted on the same subject. For convenience I will post my reply here as well.

    First of all I would like to remind you that templates are rendered multiple times so using IDs inside is not recommended. Instead id="wordRowDelete" please use class="wordRowDelete".

    Regarding your question, in order to change the icon of a detailbuton you should remove current icon class and add new one which corresponds to the new icon. For example:
    function onClick(e) {
        e.button.attr("data-style", "rowinsert"); //change data attr
        e.button.removeClass("km-rowdelete"); //remove old class
        e.button.addClass("km-rowinsert"); //add new class

    For your convenience I prepared a small sample:

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top