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.
Version Q2 2011 released 07/12/2011
select

Grid / Declarative Binding

Declarative client-side data-binding basics

IDNameUnit priceDateDiscontinued
Page size:
select
 11 items in 2 pages
    
    
    
    
    
    
    
    
    
    

Get data and total items count in a single request

IDNameUnit priceDateDiscontinued
Page size:
select
 11 items in 2 pages
    
    
    
    
    
    
    
    
    
    

  • This example demonstrates how to use declarative client-side data-binding.

    RadGrid declarative client-side data-binding is very similar to ObjectDataSource data-binding. You need to specify SelectMethod and SelectCountMethod (if needed) along with Location property and the grid will automatically invoke the specified method as PageMethod or WebService method:
    ...
    <ClientSettings>
        <DataBinding Location="~/Grid/Examples/Client/DeclarativeDataBinding/WebService.asmx"
            SelectMethod="GetData" SelectCountMethod="GetCount" />
    </ClientSettings>
    ...
    
    Important: These methods should be marked with WebMethod attribute! Example:
        [WebMethod(EnableSession=true)]
        public List<MyBusinessObject> GetData(int startRowIndex, int maximumRows, List<GridSortExpression> sortExpression, List<GridFilterExpression> filterExpression)
        {
            ...
        }
    
    In the ClientSettings.DataBinding section you can also specify the following properties:
    • StartRowIndexParameterName - default is "startRowIndex"
    • MaximumRowsIndexParameterName - default is "maximumRows"
    • SortParameterName - default is "sortExpression"
    • FilterParameterName - default is "filterExpression"
    Important: By default RadGrid will expect SelectMethod with four arguments with the following names and types:
    • int startRowIndex
    • int maximumRows
    • List<GridSortExpression> sortExpression
    • List<GridFilterExpression> filterExpression
    and SelectCountMethod with no arguments!

    To change values on the fly of any of the grid declarative client-side data-binding properties you can use the OnDataBinding client-side event:
    ...
    <ClientEvents OnDataBinding="RadGrid1_DataBinding" />
    ...
    
    Please refer to the JavaScript code in this demo for more info.

    To optimize even more the grid client-side data binding you can get both data and total items count in a single request. Example:
    ...
        [WebMethod(EnableSession = true)]
        public Dictionary<string, object> GetDataAndCount(int startRowIndex, int maximumRows, List<GridSortExpression> sortExpression, List<GridFilterExpression> filterExpression)
        {
            Dictionary<string, object> data = new Dictionary<string, object>();
    
            data.Add("Data", GetData(startRowIndex, maximumRows, sortExpression, filterExpression));
            data.Add("Count", (int)Session["Count"]);
    
            return data;
        }
    ...
    
    The grid will check automatically for "data" and "count" and will not execute a second request!

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Client.DeclarativeDataBinding.DefaultCS"
        CodeFile="DefaultCS.aspx.cs" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ 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">
        <telerik:HeadTag runat="server" ID="Headtag1"></telerik:HeadTag>

        <script type="text/javascript">
            function RadGrid1_DataBinding(sender, args)
            {
               // This event will be raised twice by default!
               // The first call will retrieve data and the second call will retrieve total items count.
               // If you want to cancel the event you can use:
               // args.set_cancel(true);
            
               // get data source location, method name and arguments
               var dataSourceLocation = args.get_location();
               var selectMethodName = args.get_methodName();
               var methodArguments = args.get_methodArguments();
               
               // set data source location and method name
               // args.set_location("url to your data source");
               // args.set_methodName("your method name");
               
               // The grid will always pass by default four arguments for the SelectMethod.
               // SelectCountMethod will be called with no arguments by default!
               
               // get names for select parameters
               var startRowIndexParameterName = sender.ClientSettings.DataBinding.StartRowIndexParameterName;
               // default is "startRowIndex".
               
               var maximumRowsParameterName = sender.ClientSettings.DataBinding.MaximumRowsParameterName;
               // default is "maximumRows"
               
               var sortParameterName = sender.ClientSettings.DataBinding.SortParameterName;
               // default is "sortExpression"
               
               var filterParameterName = sender.ClientSettings.DataBinding.FilterParameterName;
               // default is "filterExpression"
               
               // construct your own arguments
               // var myMethodArguments = new Object();
               // myMethodArguments.myArgumentName = "myArgumentValue";
               // args.set_methodArguments(myMethodArguments);
           }
        </script>

    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <telerik:Header runat="server" ID="Header1" NavigationLanguage="CS"></telerik:Header>
            <telerik:RadScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" />
            <!-- content start -->
            <h3 class="qsfSubtitle">Declarative client-side data-binding basics</h3>
            <telerik:RadGrid ID="RadGrid1" AllowSorting="true" AllowPaging="true" AllowFilteringByColumn="true"
                AutoGenerateColumns="false" runat="server">
                <MasterTableView>
                    <Columns>
                        <telerik:GridBoundColumn DataField="ID" HeaderText="ID" DataType="System.Int32" />
                        <telerik:GridBoundColumn DataField="Name" HeaderText="Name" />
                        <telerik:GridNumericColumn DataField="UnitPrice" HeaderText="Unit price" DataType="System.Decimal" />
                        <telerik:GridBoundColumn DataField="Date" DataFormatString="{0:d}" HeaderText="Date"
                            DataType="System.DateTime" />
                        <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" DataType="System.Boolean" />
                    </Columns>
                </MasterTableView>
                <PagerStyle AlwaysVisible="true" />
                <ClientSettings>
                    <DataBinding Location="WebService.asmx"
                        SelectMethod="GetData" SelectCountMethod="GetCount" />
                    <ClientEvents OnDataBinding="RadGrid1_DataBinding" />
                </ClientSettings>
            </telerik:RadGrid>
            <h3 class="qsfSubtitle">Get data and total items count in a single request</h3>
            <telerik:RadGrid ID="RadGrid2" AllowSorting="true" AllowPaging="true" AllowFilteringByColumn="true"
                AutoGenerateColumns="false" runat="server">
                <MasterTableView>
                    <Columns>
                        <telerik:GridBoundColumn DataField="ID" HeaderText="ID" DataType="System.Int32" />
                        <telerik:GridBoundColumn DataField="Name" HeaderText="Name" />
                        <telerik:GridNumericColumn DataField="UnitPrice" HeaderText="Unit price" DataType="System.Decimal" />
                        <telerik:GridBoundColumn DataField="Date" DataFormatString="{0:d}" HeaderText="Date"
                            DataType="System.DateTime" />
                        <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" DataType="System.Boolean" />
                    </Columns>
                </MasterTableView>
                <PagerStyle AlwaysVisible="true" />
                <ClientSettings>
                    <DataBinding Location="WebService.asmx"
                        SelectMethod="GetDataAndCount" />
                </ClientSettings>
            </telerik:RadGrid>
            <!-- content end -->
            <telerik:Footer runat="server" ID="Footer1"></telerik:Footer>
        </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