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

[Benjamin Lin]

Hi

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>
           ${name}
       </a>
       #= renderWordDefinitionsTemplate(data) #
   </script>

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.


Cheers

[Alexander Valchev]

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:

• http://jsbin.com/ixuhet/2/edit

Regards,
Alexander Valchev
Telerik