In Kendo UI Mobile kendoMobileListView, clear the filterable input field after selecting an item in list

Question

How do I clear(empty) the filterable input field after selecting an item in a kendoMobileListView list while refreshing the data in the list?

I have tried manually emptying the input field and refreshing the list view data after the click event as such:

$myListView.kendoMobileListView({
    dataSource: new kendo.data.DataSource({
    // my data source
    }),
    filterable: {
        field: 'SearchField',
        operator: 'contains'
    },
    click: function (e) {
        // do some stuff with 'e'

        // Clear the input search input box
        $('#the-filterable-input-field').val('');
        $myListView.data('kendoMobileListView').refresh();
    }
});

This empties the filterable input field, but fails to refresh the data in the list. I am looking for the same effect that clicking the "X" has after typing something in the filterable input field.

Any help would be appreciated!

ANSWER:

There is an "X" that shows up when you start typing in the filterable input field. When you click this "X" element it clears the filterable input field and also refreshes the associated list of items. So the answer to my question is this: simply create a trigger that clicks that "X" element:

($the-x-element).trigger('click');

Answer 1

Try this instead of refresh listview. Hope this will help you.

 var listview= $myListView.data('kendoMobileListView');
 listview.dataSource.filter({});