Telerik Extensions for ASP.NET MVC

Version Q2 2012, released 06/07/2012

Twitter Binding

Search

search
AuthorAvatarPost
No records to display.
Refresh

About this example ASPXRazor

This example shows how to bind Telerik Grid for ASP.NET MVC to external web service which returns JSON (Twitter in this case).

The example shows how to use the OnDataBinding and OnRowDataBound client-side events as well as the dataBind JavaScript method.

  1. In this example we are using the name of the fields returned by the Twitter service: 
    <%= Html.Telerik().Grid<TwitterItem>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Template(o => { }).Title("Author").Width(100); 
            columns.Template(o => { }).Title("Avatar").Width(80);  
            //A column bound to the "text" field defined by the anonymous type
            columns.Bound(o => o.text).Title("Post"); //
        })
%>
  2. The OnDataBinding event is raised every time the grid needs data - on initial load, and after paging, sorting or filtering. Here is how to subscribe to that event: 
    <%= Html.Telerik().Grid(new { text = "" })
        .ClientEvents(events => events.OnDataBinding("onDataBinding"))
%>
  3. The onDataBinding JavaScript method of this example handles the OnDataBinding event and requests the external service and data binds the grid with the result. Check the "View" tab for the implementation.
  4. The OnRowDataBound event is raised every time the grid populates a row from the data source. You can use this event to control the way data is presented - insert HTML for example. Here is how to subscribe to that event. 
    <%= Html.Telerik().Grid(new { text = "" })
        .ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
%>
  5. The onRowDataBound JavaScript method of this example handles the OnRowDataBound event and inserts the HTML required to show the avatar of the tweet author and a link to his twitter page. Check the "View" tab for the implementation.

Interested in HTML5 and mobile-powered ASP.NET MVC apps?

Experience the next generation UI and framework for ASP.NET MVC development by downloading trial evaluation copy of Kendo UI Complete for ASP.NET MVC. Jumpstart your development with the available learning resources.

The differences between Telerik MVC Extensions and Kendo UI Complete for ASP.NET MVC, and their licensing models are explained here and here.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Other Demos: