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



EmployeeIDLastNameFirstNameTitleTitleOfCourtesyBirthDate
RadDatePicker
RadDatePicker
Open the calendar popup.
Data pager
Data pager
 Page 1 of 2, items 1 to 10 of 11.
      
      
      
      
      
      
      
      
      
      
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.
C# VB
Show code in new window Demo isolation steps
<%@ 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 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>Telerik ASP.NET Grid Programmatic DataBinding | RadGrid demo</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"]);

                // conditional formatting
                args.get_item().get_cell("TitleOfCourtesy").style.fontWeight = (args.get_dataItem()["TitleOfCourtesy"] == "Dr.") ? "bold" : "normal";
            }
            //]]>
        </script>
    </telerik:RadCodeBlock>
</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" />
    <asp:CheckBox ID="CheckBox1" Text="Allow multi column sorting" Checked="true" runat="server"
        onclick="toggleAllowMultiColumnSorting(this, event);"></asp:CheckBox>
    <br />
    <br />
    <telerik:RadGrid 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 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:GridBoundColumn DataField="TitleOfCourtesy" HeaderText="TitleOfCourtesy">
                </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>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    </form>
</body>
</html>
Telerik UI for ASP.NET AJAX Q3'14 Release is here