Kendo Grid inline dropdown
HTML
<link rel="stylesheet" href="http:////kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.flat.min.css">
<input id="searchBox">
<div id="grid"></div>
JavaScript
$("#grid").kendoGrid({
dataSource: {
batch: true,
data: [
{id: 1, statusId: 1, label: 'item1'},
{id: 2, statusId: 1, label: 'item2'},
{id: 3, statusId: 2, label: 'item3'},
{id: 4, statusId: null, label: 'item4'}
],
model: {
id: 'id',
fields: {
id: {type:'number', editable: false},
statusId: {type:'number', editable: true, nullable: true},
label: {type:'string', editable: true}
}
}
},
columns : [
{ field: 'statusId', values: [ {value:1, text:'Status1'}, {value:2, text:'Status2'} ] },
{ field: 'label'}
],
editable: true
}).data("kendoGrid");
$('#searchBox').keyup(function(e){
var val = $(this).val();
var conditions = { logic: "or", filters: [] };
conditions.filters.push( { field : "label", operator: "contains", value: val} );
// conditions.filters.push( { field : "statusId", operator: "contains", value: val} );
$("#grid").data("kendoGrid").dataSource.filter( conditions );
});