Since all Telerik UI components for ASP.NET MVC are actually jQuery plugins one can use them without any server-side code (or ASP.NET MVC). In this blog post I will show how to use the grid and bind it to Twitter. Here are the required steps:
- Register the two CSS files to style the grid:
<head>
<link rel="stylesheet" type="text/css" href="telerik.common.min.css" />
<link rel="stylesheet" type="text/css" href="telerik.vista.min.css" />
</head>
- Then add the JavaScript files:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="telerik.common.min.js"></script>
<script type="text/javascript" src="telerik.grid.min.js"></script>
- Add the minimum HTML required by the grid:
<div id="Grid" class="t-widget t-grid">
<div class="t-grid-header">
<div class="t-grid-header-wrap">
<table cellspacing="0">
<colgroup>
<col style="width:100px;" />
<col style="width:80px;" />
<col />
</colgroup>
<tr>
<th class="t-header" scope="col">Author</th>
<th class="t-header" scope="col">Avatar</th>
<th class="t-header t-last-header" scope="col">Post</th>
</tr>
</table>
</div>
</div>
<div class="t-grid-content" style="height:400px;">
<table cellspacing="0">
<colgroup>
<col style="width:100px;" />
<col style="width:80px;" />
<col />
</colgroup>
<tbody>
<tr class="t-no-data">
<td colspan="3"></td>
</tr>
</tbody>
</table>
</div>
<div class="t-grid-footer">
<table cellspacing="0">
<colgroup>
<col style="width:100px;" />
<col style="width:80px;" />
<col />
</colgroup>
<tr>
<td class="t-footer" colspan="3">
<div class="t-status">
<a class="t-icon t-refresh" href="#"></a>
</div>
</td>
</tr>
</table>
</div>
</div>
- Initialize the jQuery plugin of the grid:
$(document).ready(function() {
$("#Grid").tGrid({
columns:
[
{"name":null,"type":""},
{"name":null,"type":""},
{"name":"text","type":"String"}
],
pageSize:0,
onDataBinding:onDataBinding,
onRowDataBound:onRowDataBound
});
}); - And finally bind it to the Twitter service:
function onRowDataBound(e) {
var row = e.row;
var dataItem = e.dataItem;
// update `Author` cell with template
row.cells[0].innerHTML = [
'<a class="t-link" href="http://www.twitter.com/', dataItem.from_user, '">',
dataItem.from_user,
'</a>'
].join('');
// update `Avatar` cell with template
row.cells[1].innerHTML = [
'<img width="48" height="48"',
' src="', dataItem.profile_image_url,
'" alt="', dataItem.from_user, '" />'
].join('');
}
function onDataBinding(e) {
var grid = $(this).data('tGrid');
$('.t-status .t-icon', grid.element).addClass('t-loading');
// call the twitter search api
$.ajax({
url: 'http://search.twitter.com/search.json',
contentType: 'application/json; charset=utf-8',
type: 'GET',
dataType: 'jsonp',
error: function(xhr, status) {
alert(status);
},
data: {
q: $('#searchText').val()
},
success: function(result) {
grid.dataBind(result.results);
$('.t-status .t-icon', grid.element).removeClass('t-loading');
}
});
} I have attached a zip file with a runnable demo. Check it out!