Delete ListView item by clicking on rowdelete detail button

1 posts, 0 answers
  1. Sherry
    Sherry avatar
    1 posts
    Member since:
    Jun 2012

    Posted 17 Jun 2012 Link to this post

    Hi,

    I am trying to create a ListView of items. I am trying to make it such that when a user clicks on the "rowdelete" detail button, that particular row gets updated or deleted in the dataSource, and the ListView gets synced to that.

    I declare my list view with a template like this:

    <ul id="flat-listview" style="font-size: .8em"></ul>
    <script type="text/x-kendo-template" id="customListViewTemplate">
    ${name}: ${qty}<a data-role="detailbutton" data-style="rowdelete" data-click="deleteItem"></a>
    </script>

    The functions to refresh the ListView and add items to it are as follows:
    <script>
    function reinitListView() {
    $("#flat-listview").kendoMobileListView({ 
    dataSource: kendo.data.DataSource.create({data: dataList}), 
    template: $("#customListViewTemplate").html(),
    });
    }

    function addToList(item) {
    for (var i = 0; i < dataList.length; i++) {

    if (dataList[i].name == item) {
    dataList[i].qty++;
    reinitListView();
    return;
    }
    }
    dr = new Object();
    dr.name = item;
    dr.qty = 1;
    dataList.push(dr);
    reinitListView();
    }
    </script>

    I tried writing a function called deleteItem (called when the button is clicked), but I don't know how to access the list view row from there. 
Back to Top