We have just made a nice demo application showing how to bind Telerik Grid for ASP.NET MVC to OData using Telerik TV as OData producer. The grid supports paging, sorting and filtering using OData’s query options.


To do that we implemented a helper JavaScript routine (defined in an external JavaScript file which is included in the sample project) which is used to bind the grid. Here is how the code looks like:

.Columns(columns =>
columns.Bound(v => v.ImageUrl).Sortable(false).Filterable(false).Width(200).HtmlAttributes(new { style="text-align:center" });
columns.Bound(v => v.Description);
columns.Bound(v => v.DatePublish).Format("{0:d}").Width(200);
.Scrollable(scrolling => scrolling.Height(600))
.ClientEvents(events => events.OnDataBinding("Grid_onDataBinding").OnRowDataBound("Grid_onRowDataBound"))

<script type="text/javascript">

function Grid_onRowDataBound(e) {
e.row.cells[0].innerHTML = '<a href="' + e.dataItem.Url +'"><img src="' + e.dataItem.ImageUrl + '" /></a>';

function Grid_onDataBinding(e) {
var grid = $(this).data('tGrid');
// the bindGrid function is defined in telerik.grid.odata.js which is located in the ~/Scripts folder
$.odata.bindGrid(grid, 'http://tv.telerik.com/services/odata.svc/Videos');

//Include the helper JavaScript file
Html.Telerik().ScriptRegistrar().DefaultGroup(g => g.Add("telerik.grid.odata.js"));

We will provide native (read ‘codeless’) OData binding support in a future release.

About the Author

Atanas Korchev

 is Team Leader in Kendo UI Team


Comments are disabled in preview mode.