Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

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)

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.

C# VB
Show code in new window Demo isolation steps
<%@ 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>Declarative client-side data-binding in AJAX DataGrid | RadGrid Demo</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <div>
        <br />
        <br />
        <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="ReadOnlyProducts" />
                </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">
                <Columns>
                    <telerik:GridBoundColumn DataField="ProductID" HeaderText="ProductID" UniqueName="ProductID"
                        DataType="System.Int32" />
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" UniqueName="ProductName"
                        DataType="System.String" />
                    <telerik:GridBoundColumn DataField="CategoryID" HeaderText="CategoryID" UniqueName="CategoryID"
                        DataType="System.Int32" />
                    <telerik:GridNumericColumn DataField="UnitPrice" HeaderText="UnitPrice" UniqueName="UnitPrice"
                        NumericType="Currency" DataType="System.Decimal" />
                    <telerik:GridNumericColumn DataField="UnitsInStock" HeaderText="UnitsInStock" UniqueName="UnitsInStock"
                        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>
Telerik UI for ASP.NET AJAX Q3'14 Release is here