Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
select

Grid / .NET 3.5 Client-Side Binding


  • 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 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://services.odata.org/Northwind/Northwind.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.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" %>

    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1">
        </telerik:RadScriptManager>
        <div>
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="C#"></qsf:Header>
            
            <br />
            <br />
            <strong>RadGrid bound to WCF Web Service</strong>
            
            <telerik:RadGrid runat="server" ID="RadGrid1" AllowPaging="true" AllowSorting="true"
                AllowFilteringByColumn="true" PageSize="5">
                <MasterTableView DataKeyNames="ProductID" ClientDataKeyNames="ProductID">
                    <PagerStyle Mode="NextPrevAndNumeric" />
                    <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>
                    <PagerStyle Mode="NumericPages" />
                </MasterTableView>
                <ClientSettings>
                    <DataBinding SelectMethod="GetDataAndCount" Location="GridWcfService.svc"
                        SortParameterType="Linq" FilterParameterType="Linq">
                    </DataBinding>
                </ClientSettings>
            </telerik:RadGrid>
            <br />
            <br />
            
            <strong>RadGrid bound to ADO.NET Data Service</strong>
            
            <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>
                    <PagerStyle Mode="NumericPages" />
                </MasterTableView>
                <ClientSettings>
                    <DataBinding Location="GridAdoNetDataService.svc" SelectCountMethod="GetCount">
                        <DataService TableName="Products" />
                    </DataBinding>
                </ClientSettings>
            </telerik:RadGrid>
            <br />
            <br />

            <strong>RadGrid bound to remote OData service (<a href="http://services.odata.org/Northwind/Northwind.svc"
                target="_blank">Sample OData service</a> exposing the Northwind database at <a href="http://www.odata.org/"
                target="_blank">OData.org</a>)</strong>

            <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://services.odata.org/Northwind/Northwind.svc" ResponseType="JSONP">
                        <DataService TableName="Products" Type="OData" />
                    </DataBinding>
                </ClientSettings>
            </telerik:RadGrid>
            
            <qsf:Footer ID="Footer1" runat="server"></qsf:Footer>
        </div>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451