Kendo - Base Q3
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<input id="movies" />
JavaScript
var data = [ //will be used to simulate remote Ajax request
{text: "12 Angry Men", value:"1"},
{text: "Il buono, il brutto, il cattivo.", value:"2"},
{text: "Inception", value:"3"},
{text: "One Flew Over the Cuckoo's Nest", value:"4"},
{text: "Pulp Fiction", value:"5"},
{text: "Schindler's List", value:"6"},
{text: "The Dark Knight", value:"7"},
{text: "The Godfather", value:"8"},
{text: "The Godfather: Part II", value:"9"},
{text: "The Shawshank Redemption", value:"10"},
{text: "The Shawshank Redemption 2", value:"11"}
];
var dataSource = new kendo.data.DataSource({
transport: {
read: function(operation) {
var cashedData = localStorage.getItem("moviesData");
if(cashedData != null || cashedData != undefined) {
//if local data exists load from it
operation.success(JSON.parse(cashedData));
} else {
$.ajax({ //using jsfiddle's echo service to simulate remote data loading
url: 'http://theoriginaldrinkking.com/wp-json/wp/v2/posts/?json=get_category_posts&categories=13&count=10',
type: "GET",
dataType: "json",
data: {
json: JSON.stringify(data)
},
success: function(response) {
//store response
localStorage.setItem("moviesData", JSON.stringify(response));
//pass the pass response to the DataSource
operation.success(response);
}
});
}
}
}
});
$("#movies").kendoComboBox({
dataSource: dataSource
});