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 Q1 2012 released 04/11/2012
select

Grid / Client-Side Insert/Update/Delete

Employee IDLast NameFirst NameTitleTitle Of CourtesyBirth Date
2FullerAndrewVice President, SalesDr.02/19/1952
3LeverlingJanetSales RepresentativeMs.08/30/1963
4PeacockMargaretSales RepresentativeMrs.09/19/1937
5BuchananStevenSales ManagerMr.03/04/1955
6SuyamaMichaelSales RepresentativeMr.07/02/1963
7KingRobertSales RepresentativeMr.05/29/1960
8CallahanLauraInside Sales CoordinatorMs.01/09/1958
9DodsworthAnneSales RepresentativeMs.01/27/1966
Employee ID: 2
Last name:
First name:
Title:
Title of courtesy:
select
Birth date:
Notes:
   
 
 
 
 
   

  • 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.

    The demo illustrates how to:
    • Extract information about the selected data item on the client
    • Insert/ update/delete grid records client-side using external form
    • Bind the grid on the client

    The source for the grid is generated via web service (MyWebService.asmx).

Source Code

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

    <%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
    <%@ 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">
        <style type="text/css">
            .body
            {
                margin: 0px;
                padding: 0px;
                height: 100%;
                width: 100%;
                background-color: #FFFFE0;
            }
            .grid td
            {
                cursor: pointer;
            }
            .grid
            {
                height: 300px;
            }
            .button
            {
                background: transparent url(http://www.telerik.com/DEMOS/ASPNET/Prometheus/TabStrip/Examples/ApplicationScenarios/Wizard/images/button.gif) no-repeat scroll left top;
                border: medium none;
                height: 28px;
                width: 90px;
            }
            
        </style>
        <telerik:HeadTag runat="server" ID="Headtag1"></telerik:HeadTag>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

            <script type="text/javascript">
                var employeeID, currentEmployee, currentRowIndex = null;

                var employee =
                {
                    EmployeeID : null,
                    FirstName : null,
                    LastName : null,
                    Title : null,
                    TitleOfCourtesy : null,
                    BirthDate : null,
                    Notes : null,
                    
                    create : function()
                    {
                        var obj = new Object();

                        obj.EmployeeID = "";
                        obj.FirstName = "";
                        obj.LastName = "";
                        obj.Title = "";
                        obj.TitleOfCourtesy = "";
                        obj.BirthDate = "";
                        obj.Notes = "";

                        return obj;
                    }
                };
                
                function getDataItemKeyValue(radGrid, item)
                {
                    return parseInt(radGrid.get_masterTableView().getCellByColumnUniqueName(item,"EmployeeID").innerHTML);
                }
                
                function pageLoad(sender, args)
                {
                    //employeeID = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems()[0].getDataKeyValue("EmployeeID");
                    employeeID = getDataItemKeyValue($find("<%= RadGrid1.ClientID %>"),$find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems()[0]);
                    $find("<%= LastName.ClientID %>").focus();
                    currentRowIndex = 0;
                }
                
                function rowSelected(sender, args)
                {
                    //employeeID = args.getDataKeyValue("EmployeeID");
                    employeeID = getDataItemKeyValue(sender,args.get_gridDataItem());
                    
                    currentRowIndex = args.get_gridDataItem().get_element().rowIndex;

                    $find("<%= RadTabStrip1.ClientID %>").set_selectedIndex(0);
                    
                    MyWebService.GetEmployeeByEmployeeID(employeeID, setValues)
                }
                
                function setValues(employee)
                {
                    $get("<%= EmployeeID.ClientID %>").innerHTML = employee.EmployeeID;

                    $find("<%= LastName.ClientID %>").set_value(employee.LastName);
                    $find("<%= FirstName.ClientID %>").set_value(employee.FirstName);
                    $find("<%= Title.ClientID %>").set_value(employee.Title);
                    $find("<%= TitleOfCourtesy.ClientID %>").findItemByText(employee.TitleOfCourtesy).select();
                    $find("<%= BirthDate.ClientID %>").set_selectedDate(employee.BirthDate);
                    $find("<%= Notes.ClientID %>").set_html(employee.Notes);

                    $find("<%= LastName.ClientID %>").focus();
                }

                function getValues()
                {
                    employee.EmployeeID = $get("<%= EmployeeID.ClientID %>").innerHTML;

                    employee.LastName = $find("<%= LastName.ClientID %>").get_value();
                    employee.FirstName = $find("<%= FirstName.ClientID %>").get_value();
                    employee.Title = $find("<%= Title.ClientID %>").get_value();
                    employee.TitleOfCourtesy = $find("<%= TitleOfCourtesy.ClientID %>").get_value();
                    employee.BirthDate = $find("<%= BirthDate.ClientID %>").get_selectedDate();
                    employee.Notes = $find("<%= Notes.ClientID %>").get_html();

                    return employee;
                }

                function updateChanges()
                {
                    MyWebService.UpdateEmployeeByEmployee(getValues(), updateGrid);
                }
                
                function updateGrid(result)
                {
                    var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                    tableView.set_dataSource(result);
                    tableView.dataBind();
                    
                    var grid = $find("<%= RadGrid1.ClientID %>");
                    grid.repaint();
                }
                
                function tabSelected(sender, args)
                {
                    if(currentEmployee == null)
                    {
                        currentEmployee = getValues();
                    }
                                    
                    switch(args.get_tab().get_index())
                    {
                        case 1:
                        {
                            var gridItems = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems();
                            //var newID = parseInt(gridItems[gridItems.length - 1].getDataKeyValue("EmployeeID")) + 1;
                            var newID = getDataItemKeyValue($find("<%= RadGrid1.ClientID %>"),gridItems[gridItems.length - 1]) + 1;

                            var newEmployee = employee.create();
                            newEmployee.EmployeeID = newID;
                            setValues(newEmployee);
                            
                            $get("<%= SaveChanges.ClientID %>").value = "Add";
                            $get("<%= Delete.ClientID %>").style.display = "none";
                            
                            break;
                        }
                        default:
                        {
                            setValues(currentEmployee);
                            currentEmployee = null;

                            $get("<%= SaveChanges.ClientID %>").value = "Save";
                            $get("<%= Delete.ClientID %>").style.display = "";

                            break;
                        }
                    }
                }
                
                function deleteCurrent()
                {
                    var table = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_element();
                    var row = table.rows[currentRowIndex];
                    table.deleteRow(currentRowIndex);
                    
                    var dataItem = $find(row.id);
                    if (dataItem)
                    {
                        dataItem.dispose();
                        Array.remove($find("<%= RadGrid1.ClientID %>").get_masterTableView()._dataItems, dataItem);
                    }
                    
                    var gridItems = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_dataItems();

                    MyWebService.DeleteEmployeeByEmployeeID(employeeID, updateGrid);

                    gridItems[gridItems.length - 1].set_selected(true);
                }
                            
            </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" runat="server">
                <Services>
                    <asp:ServiceReference Path="MyWebService.asmx" />
                </Services>
            </telerik:RadScriptManager>
            <!-- content start -->
            <div style="height: 100%; padding: 10px">
                <telerik:RadGrid ID="RadGrid1" CssClass="grid" DataSourceID="SqlDataSource1" runat="server"
                    GridLines="None" OnDataBound="RadGrid1_DataBound" OnColumnCreated="RadGrid1_ColumnCreated"
                    Height="300px">
                    <MasterTableView TableLayout="Fixed" ClientDataKeyNames="EmployeeID" />
                    <ClientSettings>
                        <Selecting AllowRowSelect="true" />
                        <ClientEvents OnRowSelected="rowSelected" />
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                    </ClientSettings>
                </telerik:RadGrid>
    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConflictDetection="CompareAllValues"
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [Notes] FROM [Employees]">
                </asp:SqlDataSource>
                <telerik:RadTabStrip ID="RadTabStrip1" OnClientTabSelected="tabSelected" Style="margin-top: 10px;"
                    SelectedIndex="0" runat="server">
                    <Tabs>
                        <telerik:RadTab Text="Edit employee" />
                        <telerik:RadTab Text="Add new employee" />
                    </Tabs>
                </telerik:RadTabStrip>
                <div style="border: 1px solid threedshadow;">
                    <table border="0" style="margin-top: 20px; width: 100%;">
                        <tr>
                            <td>
                                Employee ID:
                            </td>
                            <td>
                                <asp:Label ID="EmployeeID" Style="float: left; font-weight: bold;" runat="server" />
    <asp:Button ID="SaveChanges" CssClass="button" Style="float: right; color: black;
    font-weight: bold;" OnClientClick="updateChanges(); return false;" Text="Save"
    runat="server" />
    <asp:Button ID="Delete" CssClass="button" Style="float: right; margin-right: 10px;
    color: black; font-weight: bold;" OnClientClick="if(!confirm('Are you sure you want to delete this employee?'))return false; deleteCurrent(); return false;"
    Text="Delete" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Last name:
                            </td>
                            <td>
                                <telerik:RadTextBox ID="LastName" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                First name:
                            </td>
                            <td>
                                <telerik:RadTextBox ID="FirstName" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Title:
                            </td>
                            <td>
                                <telerik:RadTextBox ID="Title" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Title of courtesy:
                            </td>
                            <td>
                                <telerik:RadComboBox ID="TitleOfCourtesy" runat="server">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="" Value="" />
                                        <telerik:RadComboBoxItem Text="Dr." Value="Dr." />
                                        <telerik:RadComboBoxItem Text="Mr." Value="Mr." />
                                        <telerik:RadComboBoxItem Text="Mrs." Value="Mrs." />
                                        <telerik:RadComboBoxItem Text="Ms." Value="Ms." />
                                    </Items>
                                </telerik:RadComboBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Birth date:
                            </td>
                            <td>
                                <telerik:RadDatePicker ID="BirthDate" MinDate="01/01/1900" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: top;">
                                Notes:
                            </td>
                            <td style="height: 500px">
                                <telerik:RadEditor ID="Notes" SkinID="BasicSetOfTools" Width="100%" runat="server"
                                    Height="400px">
                                </telerik:RadEditor>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <!-- 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-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451