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 / Using Server-side API

Example Configuration



Add new recordRefresh
 OrderIDDate orderedShip countryShip name
Shipping details
Ship Region Postal Code
 
Add new recordRefresh
12345678910...
 Page 1 of 119, items 1 to 7 of 830.
102487/4/1996 12:00:00 AMFranceVins et alcools Chevalier
51100
102497/5/1996 12:00:00 AMGermanyToms Spezialitäten
44087
Edit details for order with ID 10249
  



 
102507/8/1996 12:00:00 AMBrazilHanari Carnes
RJ 05454-876
102517/8/1996 12:00:00 AMFranceVictuailles en stock
69004
102527/9/1996 12:00:00 AMBelgiumSuprêmes délices
B-6000
102537/10/1996 12:00:00 AMBrazilHanari Carnes
RJ 05454-876
102547/11/1996 12:00:00 AMSwitzerlandChop-suey Chinese
3012


  • This demo allows to:
    • Edit/Update/Insert/Delete records by pressing the corresponding buttons at the top, left and right or double-clicking a record
    • Switch the edit modes using the first option ("Edit mode in forms")
    • Switch to multi-row editing and open two records for edition at the same time

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.DataEditing.ExtractValues.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" %>
    <%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
    <!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="Headtag2"></telerik:HeadTag>
        <style type="text/css">
            .EditFormHeader td
            {
                background: #dadec8;
                padding: 5px 0px;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="CS"></telerik:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Expanded="true">
            <div style="width: 730px;">
            
                <div class="module" style="height: 50px">
    <asp:CheckBox ID="CheckBox1" AutoPostBack="True" Checked="True" Text="Edit mode in forms"
    runat="server" OnCheckedChanged="CheckBox1_CheckedChanged"></asp:CheckBox>
                    <br />
                    <br />
    <asp:CheckBox ID="CheckBox2" runat="server" Text="Allow multi-row editing" AutoPostBack="True"
    OnCheckedChanged="CheckBox2_CheckedChanged"></asp:CheckBox>
                </div>
            </div>
            </telerik:ConfiguratorPanel>
            <br />
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
                    function RowDblClick(sender, eventArgs) {
                        sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
                    }
                </script>
            </telerik:RadCodeBlock>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadGrid1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="CheckBox1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="CheckBox2">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" PageSize="7"
                AllowSorting="True" AllowPaging="True" ShowStatusBar="true" GridLines="None"
                AllowMultiRowSelection="False" OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand"
                OnInsertCommand="RadGrid1_InsertCommand" OnCreateColumnEditor="RadGrid1_CreateColumnEditor"
                OnPreRender="RadGrid1_PreRender" OnDeleteCommand="RadGrid1_DeleteCommand">
                <PagerStyle CssClass="RadGridPager" Mode="NumericPages"></PagerStyle>
                <MasterTableView DataKeyNames="OrderID" Width="100%" GridLines="None" AllowMultiColumnSorting="True"
                    CommandItemDisplay="TopAndBottom" TableLayout="Auto">
                    <Columns>
                        <telerik:GridButtonColumn UniqueName="DeleteColumn" ButtonType="ImageButton" CommandName="Delete" />
                        <telerik:GridBoundColumn ReadOnly="True" HeaderText="OrderID" DataField="OrderID"
                            SortExpression="OrderID" UniqueName="OrderID">
                            <HeaderStyle ForeColor="DimGray" />
                            <ItemStyle ForeColor="Silver" />
                        </telerik:GridBoundColumn>
                        <telerik:GridDropDownColumn ListTextField="Freight" UniqueName="Freight" ListDataMember="Orders"
                            Visible="false" SortExpression="Freight" DropDownControlType="DropDownList" ListValueField="Freight"
                            HeaderText="Freight" DataField="Freight">
                        </telerik:GridDropDownColumn>
                        <telerik:GridBoundColumn UniqueName="OrderDate" SortExpression="OrderDate" HeaderText="Date ordered"
                            DataField="OrderDate" />
                        <telerik:GridDropDownColumn ListTextField="ShipCountry" UniqueName="ShipCountry"
                            ListDataMember="Orders" SortExpression="ShipCountry" DropDownControlType="DropDownList"
                            ListValueField="ShipCountry" HeaderText="Ship country" DataField="ShipCountry">
                        </telerik:GridDropDownColumn>
                        <telerik:GridBoundColumn Visible="False" UniqueName="ShipAddress" SortExpression="ShipAddress"
                            HeaderText="Shipping Address" DataField="ShipAddress">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn ColumnEditorID="TextEditor1" DataField="ShipName" EditFormHeaderTextFormat="{0}&nbsp;- Customized text editor"
                            HeaderText="Ship name" UniqueName="ShipName">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn UniqueName="TemplateColumn" InitializeTemplatesFirst="false" EditFormHeaderTextFormat="Ship Region<br/><br/>Postal Code">
                            <HeaderTemplate>
                                <table id="Table1" cellspacing="0" width="100%">
                                    <tr>
                                        <td colspan="2" align="center">
                                            <b>Shipping details</b>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 50%">
    <asp:LinkButton CssClass="Button" ID="btnShipRegion" Text="Ship Region" ToolTip="Sort by Ship Region"
    CommandName='Sort' CommandArgument='ShipRegion' runat="server" />
                                        </td>
                                        <td style="width: 50%">
    <asp:LinkButton CssClass="Button" ID="btnPostalCode" Text="Postal Code" ToolTip="Sort by Postal Code"
    CommandName='Sort' CommandArgument='ShipPostalCode' runat="server" />
                                        </td>
                                    </tr>
                                </table>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <table cellspacing="0" width="100%">
                                    <tr>
                                        <td style="width: 50%; border: 0px;">
                                            <%# Eval("ShipRegion") %>
                                        </td>
                                        <td style="width: 50%">
                                            <%# Eval("ShipPostalCode") %>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <span style="color: green;">
                                    <br />
                                    <asp:TextBox ID="tbShipRegion" runat="server" Text='<%# Bind("ShipRegion") %>'
                                        ToolTip="Template column that will be updated with two-way binding"></asp:TextBox>
                                    <br />
                                    <br />
                                    <asp:TextBox ID="tbShipPostalCode" runat="server" Text='<%# Bind("ShipPostalCode") %>'
                                        ToolTip="Template column that will be updated with two-way binding"></asp:TextBox>
                                </span>
                            </EditItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn" />
                    </Columns>
                    <EditItemStyle ForeColor="Gray"></EditItemStyle>
                    <EditFormSettings CaptionFormatString="Edit details for order with ID {0}" CaptionDataField="OrderID">
                        <FormTableItemStyle Wrap="False" Width="100%"></FormTableItemStyle>
                        <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                        <FormMainTableStyle GridLines="Horizontal" CellSpacing="0" CellPadding="3" BackColor="White"
                            Width="100%" />
                        <FormTableStyle GridLines="None" CellSpacing="0" CellPadding="2" CssClass="module"
                            Height="110px" BackColor="White" Width="100%" />
                        <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                        <FormStyle Width="100%"></FormStyle>
                        <EditColumn ButtonType="ImageButton" InsertText="Insert Order" UpdateText="Update record"
                            UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                        </EditColumn>
                        <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
                    </EditFormSettings>
                    <ExpandCollapseColumn ButtonType="ImageButton" Visible="False" UniqueName="ExpandColumn">
                        <HeaderStyle Width="19px"></HeaderStyle>
                    </ExpandCollapseColumn>
                </MasterTableView>
                <ClientSettings>
                    <ClientEvents OnRowDblClick="RowDblClick" />
                </ClientSettings>
            </telerik:RadGrid><br />
            <telerik:GridTextBoxColumnEditor ID="TextEditor1" runat="server">
                <TextBoxStyle BackColor="#edffc3" BorderColor="#ecbb0d" BorderStyle="Solid" ForeColor="#7fa822" />
            </telerik:GridTextBoxColumnEditor>
        <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