Consuming OData service in Telerik Rad Grid

Few days back I wrote an article on How to create an OData service using WCF DataService? Now in this article we’ll see how to consume the OData service with one of the client of OData service Telerik Rad Grid. It supports the JSON format as data source from the OData Service. Even you don’t have to write any code behind. It would only take pure declarative coding on aspx page.

Try the AJAX Rad Controls from Telerik today to work with this demo -

Now once you have Telerik controls setup installed you can start with creating a consumer application. Its just a quick set of steps.

Launch the visual studio and create new project. Select Asp.net website as your project template.

Add new WebForm to the web project or you can utilize default.aspx already added as default page in template.

Open the .aspx file in the designer by double clicking it. Go to the Toolbox and select “Telerik AJAX Data Components” –> RadGrid

Drag and drop it on the .aspx file.

Next add an script manager on the page.

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>

now design your grid based on the datasource items you are going to bind with. In this demo we’ll be using the same service that we created in earlier demo here.

So the Grid will look like this -

 

1. <telerik:RadGrid ID="RadGrid3" runat="server" AllowPaging="true" AllowSorting="true"
2.     AllowFilteringByColumn="true" PageSize="5">
3.     <MasterTableView ClientDataKeyNames="ProductID">
4.         <Columns>
5.                 <telerik:GridBoundColumn DataField="Id" HeaderText="Post ID"
6.                 UniqueName="Id" DataType="System.Int32" />
7.             <telerik:GridBoundColumn DataField="Title" HeaderText="Title"
8.                 UniqueName="Title" DataType="System.String" />
9.             <telerik:GridBoundColumn DataField="Body" HeaderText="Description"
10.                 UniqueName="Body" DataType="System.String"/>
11.             <telerik:GridNumericColumn DataField="ViewCount" HeaderText="View Count"
12.                 UniqueName="ViewCount" DataType="System.Int32" />
13.             <telerik:GridNumericColumn DataField="AnswerCount" HeaderText="Answer Count"
14.                 UniqueName="AnswerCount" DataType="System.Int32"/>
15.             <telerik:GridCheckBoxColumn DataField="CommentCount" HeaderText="Comment Count"
16.                 UniqueName="CommentCount" DataType="System.Int32"/>
17.                 <telerik:GridCheckBoxColumn DataField="CreationDate" HeaderText="Creation Date"
18.                 UniqueName="CreationDate" DataType="System.DateTime"/>
19.         </Columns>
20.     </MasterTableView>
21.     <ClientSettings>
22.         <DataBinding Location="http://localhost:64552/Service.svc/" ResponseType="JSONP">
23.             <DataService TableName="Posts" Type="OData" />
24.         </DataBinding>
25.     </ClientSettings>
26. </telerik:RadGrid>

So other than designing the grid what it takes to bind the Grid in above code is,

This setting enables the grid to have OData service as datasource.

now run the project and see the how the grid looks like:

.. and you’re done with creating a simple OData consumer application.