javascriptjquerykendo-mobilekendo-listview

kendo mobile listview change filter onclick


I need to filter a listview when i click on 1 of this buttons

<ul id="blabla" data-role="buttongroup" data-select="onSelect" data-index="0">
    <li><a onclick="filterActivities('gte');">Upcoming</a></li>
    <li>Past</li>
    <li>Favorites</li>
</ul>

It triggers filterActivities with the operator paramater

<script type="text/javascript">
    var filterableListview = $("#filterable-listview").kendoMobileListView;
    function filterActivities(op) {
        filterableListview.dataSource.filter({
            field: "starttime",
            type: "Date",
            operator: op,
        });
    }
</script>

But i get this error : Cannot read property 'dataSource' of null at index.html#components/home/myactivities.html

I'm new into mobile programming and i work on an existing project


Solution

  • I found how to retrieve the listview and ofcourse the datasource by the way, here is the answer :

    //Filter on date
    var filterableListview = $("#filterable-listview").data('kendoMobileListView');
    var date = new Date();
    date = kendo.toString(kendo.parseDate(date, "yyyy-MM-dd HH:mm:ss"), "yyyy-MM-dd HH:mm:ss");
    //First filter(upcoming) when the page is rendered
    filterableListview.dataSource.filter({
        field: "starttime",
        operator: "gte",
        value: date,
    });
    

    For the buttons i just created functions that will filter as explained above and i wrote some ids on the buttons so that the functions will be triggered on click