CODEWITHSUNDEEP
listviewkendo-uikendo-mobile
Matthias
Matthias

Reputation: 3553

Custom filter for Kendo UI Mobile listview?

Is it possible to apply a custom function to filter a Kendo UI Mobile listview? In particular I want to filter by two properties of my JS objects, not only by a single property.

My current code:

$("#myListView").kendoMobileListView({
    dataSource: 
        [
            { id: 1, firstName: 'Mike', lastName: 'Morris'},
            { id: 2, firstName: 'Steve', lastName: 'Bitner'}
        ], // faked data
    template: $("#myTemplate").html(),
    filterable: {
        field: "firstName", // should be firstName+lastName
        operator: "contains",
        placeholder: "Name...",
        ignoreCase: true
    }
});

In this particular example I want to filter by firstName and lastName, but the filterable.field option of the listview only allows one property and not two nor a custom filter function.

Upvotes: 1

Views: 3035

Answers (2)

Matthias
Matthias

Reputation: 3553

Thanks to @CodingWithSpike, I now have the following working solution:

$("#myListView").kendoMobileListView({
    dataSource: new kendo.data.DataSource({
        data:
        [
            { id: 1, firstName: 'Mike', lastName: 'Morris'},
            { id: 2, firstName: 'Steve', lastName: 'Bitner'}
        ] // faked data
    }),
    template: $("#myTemplate").html(),
    filterable: {
        field: "_",  // dummy field to get the filterable working
        placeholder: "Name..."
    }
});

$('[type="search"]').on("keyup", function () {
    var filterTerm = $(this).val();
    $("#myListView").data("kendoMobileListView").dataSource.filter({
        logic: "or",
        filters: [
            { field: "firstName", operator: "contains", value: filterTerm },
            { field: "lastName", operator: "contains", value: filterTerm }
        ]
    });
});

Upvotes: 1

CodingWithSpike
CodingWithSpike

Reputation: 43708

Instead of using the filterable option of the ListView, you can implement your own filter input box, and use DataSource.filter() to change the filter.

I haven't tested this code, but it could look something like:

<input type="text" id="search" placeholder="name" />
<ul id="myListView"></ul>

// ----------

var dataSource = new kendo.data.DataSource({
    data: [
        { id: 1, firstName: 'Mike', lastName: 'Morris'},
        { id: 2, firstName: 'Steve', lastName: 'Bitner'}
    ]
});

var applyFilter = function () {
    var toFind = $("#search").val();
    dataSource.filter({
        logic: "or",
        filters: [
            { field: "firstName", operator: "contains", value: toFind },
            { field: "lastName", operator: "contains", value: toFind }
        ]
    });
};

$("#myListView").kendoMobileListView({
    dataSource: dataSource
    template: $("#myTemplate").html()
});

$("#search").on("keyup", applyFilter);

The basic idea is that whenever someone types in the input box, you get the value, and call .filter() on the DataSource that is bound to the ListView.

Upvotes: 3

Related Questions