$("#productsGrid").kendoGrid({ dataSource: dataSoucrce, columns: columns, scrollable: true, groupable: true, sortable: true, pageable: true, filterable: true, selectable: "multiple,row", //put query box in toolbar toolbar: "<input class='span3' type='text' id='productsQuery'/>", //init query box's autocomplete dataBound: function(){ if(typeof $("#productsQuery").data("kendoAutoComplete") == "undefined") { $("#productsQuery").kendoAutoComplete({ minLength: 1, dataTextField: "key", filter: 'contains', change: function(){ if($("#productsQuery").val() == "") { $("#productsGrid").data("kendoGrid").dataSource.filter({}); } }, placeholder: "Search product key...", //use the datasource of productsGrid dataSource: $("#productsGrid").data("kendoGrid").dataSource });} }});As you see, I put the query box in the toolbar of kendoGrid, and use kendoGrid's datasource for the kendoAutoComplete.
But I found that after I grouped by the kendoGrid, the autoComplete dropdown list became list of "undefined"s.