Consuming OData Service in Telerik Rad Grid

A few days back I wrote the article 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 clients of the OData service Telerik Rad Grid. It supports the JSON format as a datasource from the OData Service. You even don't have to write any code behind. It only requires pure declarative coding in the aspx page.

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



Now once you have the Telerik controls installed you can start creating a consumer application. It's just a quick set of steps.

Launch Visual Studio and create a new project. Select an ASP.Net website as your project template.



Add a cnew WebForm to the web project or you can use the default.aspx already added as the default page from the 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 onto the .aspx file.

Next add a 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 the 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 is required to bind the Grid in the above code is:



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

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



And you're done with creating a simple OData consumer application.

Thanks.