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 / Programmatic Binding



EmployeeIDLastNameFirstNameTitleTitleOfCourtesyBirthDate
 Page 1 of 2, items 1 to 10 of 11.
      
      
      
      
      
      
      
      
      
      


Events:

  • RadGrid for ASP.NET AJAX supports client-side binding to web services or page methods as demonstrated in this online demo of the product. In order to assign data source for the grid and refresh its state on the client, utilize the set_dataSource(dataSource) and dataBind() methods from its client-side API. Keep in mind that the data source passed as an argument to the set_dataSource method should have JSON signature which can be serialized by a web service or a page method.

    All grid commands will raise the OnCommand client grid event which can be intercepted in order to cancel the default operation and perform a custom action client-side.

    The demo also illustrates how to:
    • extract information about the current page index/virtual item count or set them on the client
    • customize the appearance of the grid items based on their column cell values (intercepting the OnRowDataBound client event of the grid)
    • obtain the values of the sort expressions/filter expressions applied to the control.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Client.DataBinding.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>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

            <script type="text/javascript">
            <!--
            function pageLoad(sender, eventArgs)
            {
               $get("<%= Panel1.ClientID %>").innerHTML = "";

               var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

               $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");

               PageMethods.GetData(0, tableView.get_pageSize(),
                    tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toList(),
                        updateGrid);
                        
               PageMethods.GetCount(tableView.get_filterExpressions().toList(), updateVirtualItemCount);
           }
            
            function RadGrid1_Command(sender, args)
            {
                $get("<%= Panel1.ClientID %>").innerHTML = String.format("<b>RadGrid1_Command</b><br />CommandName : {0}, CommandArgument : {1} <br /><br />", args.get_commandName(), args.get_commandArgument());
            
                args.set_cancel(true);
                            
                var pageSize = sender.get_masterTableView().get_pageSize();

                var sortExpressions = sender.get_masterTableView().get_sortExpressions();
                var filterExpressions = sender.get_masterTableView().get_filterExpressions();
                
                var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();
                   
                if (args.get_commandName() == "Filter")
                    currentPageIndex = 0;


                var sortExpressionsAsSQL = sortExpressions.toString();
                var filterExpressionsAsSQL = filterExpressions.toString();

                $find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");

                PageMethods.GetData(currentPageIndex * pageSize, pageSize, sortExpressionsAsSQL, filterExpressions.toList(), updateGrid);
                
                if(args.get_commandName() == "Filter")
                {
                    PageMethods.GetCount(filterExpressions.toList(), updateVirtualItemCount);
                }
            }

            function updateGrid(result)
            {
               var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
               tableView.set_dataSource(result);
               tableView.dataBind();
               
               $find("<%= RadAjaxLoadingPanel1.ClientID %>").hide("<%= RadGrid1.ClientID %>");
            }
            
            function updateVirtualItemCount(result)
            {
               var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
               tableView.set_virtualItemCount(result);
            }

            function toggleAllowMultiColumnSorting(sender, e)
            {
               var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
               tableView.set_allowMultiColumnSorting(sender.checked);
            }
            
            function RadGrid1_RowDataBound(sender, args)
            {
                var radTextBox1 = args.get_item().findControl("LastName"); // find control
                radTextBox1.set_value(args.get_dataItem()["LastName"]);

                // conditional formatting
                args.get_item().get_cell("TitleOfCourtesy").style.fontWeight = (args.get_dataItem()["TitleOfCourtesy"] == "Dr.")? "bold" : "normal";

                var sb = new Sys.StringBuilder();
                
                sb.appendLine("<b>RadGrid1_RowDataBound</b><br />");
                
                for(var item in args.get_dataItem())
                {
                    sb.appendLine(String.format("{0} : {1}<br />", item, args.get_dataItem()[item]));
                }
                
                sb.appendLine("<br />");
                sb.appendLine("<br />");

                $get("<%= Panel1.ClientID %>").innerHTML += sb.toString();
            }
            -->
            </script>

        </telerik:RadCodeBlock>
    </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 -->
    <asp:CheckBox ID="CheckBox1" Text="Allow multi column sorting" Checked="true" runat="server"
    onclick="toggleAllowMultiColumnSorting(this, event);" />
            <br />
            <br />
            <telerik:RadGrid ID="RadGrid1" EnableViewState="false" runat="server"
                AllowPaging="true" AllowSorting="True" AllowFilteringByColumn="true" GridLines="None">
                <ItemStyle Wrap="false" />
                <MasterTableView AllowMultiColumnSorting="true" TableLayout="Fixed">
                    <Columns>
                        <telerik:GridNumericColumn DataField="EmployeeID" HeaderText="EmployeeID" HeaderStyle-Width="100px" FilterControlWidth="50px" />
                        <telerik:GridTemplateColumn SortExpression="LastName" DataField="LastName" HeaderText="LastName">
                            <ItemTemplate>
                                <telerik:RadTextBox ID="LastName" runat="server" Width="80px" />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" />
                        <telerik:GridBoundColumn DataField="Title" HeaderText="Title" />
                        <telerik:GridBoundColumn DataField="TitleOfCourtesy" HeaderText="TitleOfCourtesy" />
                        <telerik:GridDateTimeColumn DataField="BirthDate" DataFormatString="{0:MM/dd/yyyy}"
                            HeaderText="BirthDate" />
                    </Columns>
                </MasterTableView>
                <PagerStyle AlwaysVisible="true" Mode="NumericPages"/>
                <ClientSettings>
                    <ClientEvents OnCommand="RadGrid1_Command" OnRowDataBound="RadGrid1_RowDataBound" />
                </ClientSettings>
            </telerik:RadGrid>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />


            <br />
            <br />
            Events:
    <asp:Panel ID="Panel1" Style="height: 200px; overflow: auto; padding: 15px;" CssClass="module"
    runat="server">
            </asp:Panel>
            <!-- 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