Kendo UI DataSource & Knockout

by mrrodd

HTML

<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://demos.kendoui.com/content/web/integration/knockout-1.2.1.js"></script>
<h3>Demo Steps</h3>
<ol>
    <li>Type 'P' in to the AutoComplete to see original suggested options</li>
    <li>Clear your entry</li>
    <li>Click the "Modify" button to change the data source</li>
    <li>Type 'P' again to see the AutoComplete list change in response</li>
</ol>
<input id="myAc" />

<button id="modify">Modify Observable Collection</button>

CSS

body{
 font:normal 1em/1.1em Arial,sans-serif;   
 padding:20px;
}

ol{
 list-style:decimal outside none;
  margin:5px 30px;  
}

h3{
 font-size:1.25em;
  font-weight:bold;  
}

JavaScript

var fruit;
var ds;

$(function(){
    fruit = ["Apple","Banana","Fruit","Pear","Prune","Pesto"];
    
    //Create observable KO array
    ko.observableArray(fruit);
    
    //Kendo UI widgets can respond to changes in the Kendo 
    //DataSource. We'll use the DS to hold our observable
    //KO array. When changes are made, our UI will update.
    ds = new kendo.data.DataSource({data:fruit});
    
    //Intialize Kendo UI widget and bind to data source
    $("#myAc").kendoAutoComplete({
        dataSource:ds  
    });  
    
    $("#modify").bind("click",modifyObservable);
});

function modifyObservable(){
    //Modify the observable collection
    fruit.push("Pizza");
    fruit.push("Pepperoni");
    fruit.push("Pie");
}