JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://dl.dropbox.com/u/40036711/Scripts/kendo.all.min.js"></script>
<h3>Live demo for Kendo Datasource:</h3>
<p>Enter any text or a username to search on twitter:</p>
<input id="twitter-search-text" type="text" value="chaudharyp"/>
<button id="btnSearch">Click Me to Search Twitter</button>
<hr/>
<div id="tweets"></div>
CSS
body{padding:10px; font-family: Sans-Serif; font-size:13px; line-height:1.5em;}
h3{font-weight:bold;margin:5px 0;}
.tweet{ border-bottom: solid 1px #ccc;padding:10px 0; display:block;overflow:hidden;text-decoration:none; color:#333;}
.tweet:hover{background:#ffc;}
.weak{color:#999;}
JavaScript
//Setting up Kendo templates
var templates = {
tweet: kendo.template(
'<a class="tweet" href="https://twitter.com/\\#!/#= from_user #/status/#= id_str #" target="_blank">'+
'#= text #<br/>' +
'<label class="weak">#= from_user # |' +
'#= kendo.toString(new Date(Date.parse(created_at)), "dd MMM HH:mm") #</label>' +
'</a>'
)
};
//Using Kendo Datasource to request Twitter API
var ds = new kendo.data.DataSource({
transport: {
read: {
url: "https://twitter.com/search?q=q",
dataType: "jsonp",
data: {
q: function () {
return $('#twitter-search-text').val();
}
}
}
},
schema: {
data: "results"
},
change: function () {
$('#tweets').html(kendo.render(templates.tweet, this.view()));
}
});
//Reading Kendo datasource on button click.
$('#btnSearch').click(function () {
ds.read();
});