Grid - Declarative Binding

RadGrid bound to WCF Web Service



RadGrid bound to ADO.NET Data Service



RadGrid bound to remote OData service (Sample OData service exposing the Northwind database at OData.org)

Isolate this demo as a stand-alone application

This example demonstrates declarative client-side data-binding of RadGrid for ASP.NET AJAX to WCF Web Service and ADO.NET Data Service. All RadGrids have enabled paging/sorting/filtering.

The first RadGrid component is bound to WCF Web Service. You need to point the control to an existing web service and method with following signiture:

<ClientSettings>
   <DataBinding SelectMethod="GetDataAndCount" Location="GridWcfService.svc"
      SortParameterType="Linq"  FilterParameterType="Linq">
   </DataBinding>
  </ClientSettings>

[OperationContract]
public ResultData GetDataAndCount(int startRowIndex, int maximumRows, string sortExpression, string filterExpression)

where ResultData is custom class that holds data returned from the service to client:

public class ResultData
{
 public int Count { get; set; }
 public List<Product> Data { get; set; }
}

The second RadGrid is bound to ADO.NET Data Service. You need to point the control to an existing data service and set the following settings:

<ClientSettings>
  <DataBinding Location="GridAdoNetDataService.svc" SelectCountMethod="GetCount">
    <DataService TableName="Products" />
  </DataBinding>
</ClientSettings>

and GetCount method:

[WebGet]
public int GetCount(string where)
{
   return String.IsNullOrEmpty(where) ? CurrentDataSource.Products.Count() : CurrentDataSource.Products.Where(where).Count();
}

The third RadGrid is bound to a remote OData service at Odata.org. The setup for OData binding is similar to the above example of ADO.NET Data Service binding:

<ClientSettings>
  <DataBinding Location="http://demos.telerik.com/aspnet-ajax/Services/NorthwindWcfService.svc" ResponseType="JSONP">
    <DataService TableName="Products" Type="OData" />
  </DataBinding>
</ClientSettings>

To have RadGrid setup remote service binding, the ResponseType="JSONP" property is used to indicate RadGrid will initiate JSONP requests instead of regular JSON requests.

Additionally, to indicate binding to OData services, the DataService.Type property is set to OData. This is to differentiate between services using the OData protocol versus the ADO.NET Data Services API prior ot .NET 4.0 (in .NET 4.0 the ADO.NET Data Services conform to the OData protocol). You can find more info on the topic in the RadGrid for ASP.NET AJAX client-side databinding to OData services blog post.

<%@ Page Language="C#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <h3>RadGrid bound to WCF Web Service</h3>
        <telerik:RadGrid runat="server" ID="RadGrid1" AllowPaging="true" AllowSorting="true"
            AllowFilteringByColumn="true" PageSize="5">
            <MasterTableView DataKeyNames="ProductID" ClientDataKeyNames="ProductID">
                <PagerStyle Mode="NumericPages" />
                <Columns>
                    <telerik:GridBoundColumn DataField="ProductID" HeaderText="ProductID" DataType="System.Int32">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" DataType="System.String">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="UnitPrice" HeaderText="UnitPrice" DataType="System.Decimal"
                        DataFormatString="{0:C}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ReorderLevel" HeaderText="ReorderLevel" DataType="System.Int32">
                    </telerik:GridBoundColumn>
                    <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" DataType="System.Boolean">
                    </telerik:GridCheckBoxColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <DataBinding SelectMethod="GetDataAndCount" Location="GridWcfService.svc" SortParameterType="Linq"
                    FilterParameterType="Linq">
                </DataBinding>
            </ClientSettings>
        </telerik:RadGrid>
        <br />
        <br />
        <h3>RadGrid bound to ADO.NET Data Service</h3>
        <telerik:RadGrid runat="server" ID="RadGrid2" AllowPaging="true" AllowSorting="true"
            AllowFilteringByColumn="true" PageSize="5">
            <MasterTableView DataKeyNames="ProductID" ClientDataKeyNames="ProductID">
                <PagerStyle Mode="NumericPages" />
                <Columns>
                    <telerik:GridBoundColumn DataField="ProductID" HeaderText="ProductID" DataType="System.Int32">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" DataType="System.String">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="UnitPrice" HeaderText="UnitPrice" DataType="System.Decimal"
                        DataFormatString="{0:C}">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ReorderLevel" HeaderText="ReorderLevel" DataType="System.Int32">
                    </telerik:GridBoundColumn>
                    <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" DataType="System.Boolean">
                    </telerik:GridCheckBoxColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <DataBinding Location="GridAdoNetDataService.svc" SelectCountMethod="GetCount">
                    <DataService TableName="Products" />
                </DataBinding>
            </ClientSettings>
        </telerik:RadGrid>
        <br />
        <br />
        <h3>RadGrid bound to remote OData service (<a href="http://demos.telerik.com/aspnet-ajax/Services/NorthwindWcfService.svc">Sample
            OData service</a> exposing the Northwind database at <a href="http://www.odata.org/">
                OData.org</a>)</h3>
        <telerik:RadGrid ID="RadGrid3" runat="server" AllowPaging="true" AllowSorting="true"
            AllowFilteringByColumn="true" PageSize="5">
            <MasterTableView ClientDataKeyNames="ProductID" TableLayout="Fixed">
                <Columns>
                    <telerik:GridBoundColumn DataField="ProductID" HeaderText="ProductID" UniqueName="ProductID"
                        DataType="System.Int32" />
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" UniqueName="ProductName"
                        DataType="System.String" />
                    <telerik:GridNumericColumn DataField="UnitPrice" HeaderText="UnitPrice" UniqueName="UnitPrice" FilterControlWidth="70px"
                        NumericType="Currency" DataType="System.Decimal" />
                    <telerik:GridNumericColumn DataField="UnitsInStock" HeaderText="UnitsInStock" UniqueName="UnitsInStock" FilterControlWidth="70px"
                        DataType="System.Int16" />
                    <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" UniqueName="Discontinued"
                        DataType="System.Boolean" />
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <DataBinding Location="http://demos.telerik.com/aspnet-ajax/Services/NorthwindWcfService.svc" ResponseType="JSONP">
                    <DataService TableName="Products" Type="OData" />
                </DataBinding>
            </ClientSettings>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?