New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Programmatic Binding



EmployeeIDLastNameFirstNameTitleBirthDate
 Page 1 of 2, items 1 to 10 of 11.
     
     
     
     
     
     
     
     
     
     
  • NoFilter
  • Contains
  • DoesNotContain
  • StartsWith
  • EndsWith
  • EqualTo
  • NotEqualTo
  • GreaterThan
  • LessThan
  • GreaterThanOrEqualTo
  • LessThanOrEqualTo
  • Between
  • NotBetween
  • IsEmpty
  • NotIsEmpty
  • IsNull
  • NotIsNull
  • Custom

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 Telerik's ASP.NET 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.

This RadGrid 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.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Grid.DataBinding.ClientSide.Programmatic.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            //<![CDATA[
            function pageLoad(sender, eventArgs) {
                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) {
                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();

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

Support & Learning Resources

Find Assistance