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.