Filter JSON datasource with Kendo UI

Question

I need to populate Kendo drop-down box automatically from the following JSON:

var products=
[
    {
        id: 1,
        title: "Item-1",
        active: true
    },
    {
        id: 2,
        title: "Item-2",
        active: false
    }
];

So I use the following code to do this, which works fine:

$("#productList").kendoDropDownList({
    dataSource: products,
    dataTextField: "title",
    dataValueField: "id"
});

The problem is, I want to see only items for which 'active' is true.

How to implement that with Kendo?

Answer 1

Sample Jsfiddle

For Filter, can only be filter on dataSoruce that why creating kendo.data.DataSource and apply filter in filter section.

filter:{fieled:"active",operator:"eq",value:true}

HTML

<div>
    <input id="productList" style="width:250px"/>
</div>

Javascript

var products=
[
    {
        id: 1,
        title: "Item-1",
        active: true
    },
    {
        id: 2,
        title: "Item-2",
        active: undefined
    },
    {
        id:3,
        title:"Item-3",
        active:false
    },
    {
        id:3,
        title:"Item-4",
        active:undefined
    }
];
var dataSource=new kendo.data.DataSource({
    data:products,
   filter:{
       logic:'or',
       filters:[
           {field:"active",operator:"eq",value:true},
           {field:"active",operator:"eq",value:undefined}
       ]}
});

$("#productList").kendoDropDownList({
    dataSource: dataSource,
    dataTextField: "title",
    dataValueField: "id"
});