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 / Automatic Operations

Next database reset in 0 hours, 50 minutes, 23 seconds
Configurator
Switch the edit modes:
Edit indexes:
Add new recordRefresh
 ProductNameCategoryUnits In StockDiscontinuedUnitPrice 
Add new recordRefresh
1234567
Page size:
select
 65 items in 7 pages
Chef Anton's GumboCondiments0 $21.35
Grandma's Boysenberry SpreadCondiments120 $25.00
Uncle Bob's Organic Dried PearsProduce15 $30.00
IkuraSeafood31 $31.00
Queso Manchego La PastoraDairy Products86 $38.00
KonbuSeafood24 $6.00
TofuProduce35 $23.25
Genen ShouyuCondiments39 $15.50
PavlovaConfections29 $17.45
Carnarvon TigersSeafood42 $62.50


  • To test the automatic editing capabilities on this demo:
    • Edit/Update/Insert/Delete records by pressing the corresponding buttons in the grid

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Grid.Examples.DataEditing.AllEditableColumns.DefaultVB" %>

    <%@ 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="Headtag2"></telerik:HeadTag>
        <!-- custom head section -->
        <style type="text/css">
            .MyImageButton
            {
                cursor: hand;
            }
            .EditFormHeader td
            {
                font-size: 14px;
                padding: 4px !important;
                color: #0066cc;
            }
        </style>
        <!-- end of custom head section -->
    </head>
    <body class="BODY">
        <form id="mainForm" runat="server">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB" ShowDbResetTimer="true"></telerik:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <!-- content start -->
        <telerik:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
            Expanded="true">
            Switch the edit modes:<br />
            <div style="float: left; margin-left: 30px;">
    <asp:RadioButton ID="RadioButton1" AutoPostBack="True" Text="In-forms editing mode"
    runat="server" Checked="True"></asp:RadioButton>
            </div>
            <div style="float: left;">
    <asp:RadioButton ID="RadioButton2" AutoPostBack="True" Text="In-line editing mode"
    runat="server"></asp:RadioButton>
            </div>
            <div style="float: left; margin-left: 20px;">
    <asp:CheckBox ID="CheckBox1" Text="Allow multi-row edit" AutoPostBack="True" runat="server"
    OnCheckedChanged="CheckboxCheckedChanged"></asp:CheckBox>
            </div>
        </telerik:ConfiguratorPanel>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                <!--
                function RowDblClick(sender, eventArgs)
                {
                    sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
                }

                function gridCreated(sender, args)
                {
                    if (sender.get_editIndexes && sender.get_editIndexes().length > 0)
                    {
                        document.getElementById("OutPut").innerHTML = sender.get_editIndexes().join();
                    }
                    else
                    {
                        document.getElementById("OutPut").innerHTML = "";
                    }
                }
                -->
            </script>
        </telerik:RadCodeBlock>
        <div class="module" style="height: 20px; width: 350px;">
            <span style="font-weight: bold;">Edit indexes: </span><span id="OutPut" style="font-weight: bold;
                color: navy;"></span>
        </div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadioButton1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadioButton2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadioButton2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadioButton1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="CheckBox1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
        <telerik:RadGrid ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True"
            AllowAutomaticInserts="True" PageSize="10" AllowAutomaticUpdates="True" AllowPaging="True"
            AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
            <PagerStyle Mode="NextPrevAndNumeric" />
            <MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="ProductID"
                DataSourceID="SqlDataSource1" HorizontalAlign="NotSet" AutoGenerateColumns="False">
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
                        <ItemStyle CssClass="MyImageButton" />
                    </telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName"
                        UniqueName="ProductName" ColumnEditorID="GridTextBoxColumnEditor1">
                    </telerik:GridBoundColumn>
                    <telerik:GridDropDownColumn DataField="CategoryID" DataSourceID="SqlDataSource2"
                        HeaderText="Category" ListTextField="CategoryName" ListValueField="CategoryID"
                        UniqueName="CategoryID" ColumnEditorID="GridDropDownColumnEditor1">
                    </telerik:GridDropDownColumn>
                    <telerik:GridNumericColumn DataField="UnitsInStock" HeaderText="Units In Stock" SortExpression="UnitsInStock"
                        UniqueName="UnitsInStock" ColumnEditorID="GridNumericColumnEditor1">
                    </telerik:GridNumericColumn>
                    <telerik:GridBoundColumn DataField="QuantityPerUnit" HeaderText="Quantity Per Unit"
                        SortExpression="QuantityPerUnit" UniqueName="QuantityPerUnit" Visible="false"
                        EditFormColumnIndex="1" ColumnEditorID="GridTextBoxColumnEditor2">
                    </telerik:GridBoundColumn>
                    <telerik:GridCheckBoxColumn DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued"
                        UniqueName="Discontinued" EditFormColumnIndex="1">
                    </telerik:GridCheckBoxColumn>
                    <telerik:GridTemplateColumn HeaderText="UnitPrice" SortExpression="UnitPrice" UniqueName="TemplateColumn"
                        EditFormColumnIndex="1">
                        <ItemTemplate>
                            <asp:Label runat="server" ID="lblUnitPrice" Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:Label>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <span>
                                <telerik:RadNumericTextBox runat="server" ID="tbUnitPrice" Width="40px" DbValue='<%# Bind("UnitPrice") %>'>
    </telerik:RadNumericTextBox><span style="color: Red"><asp:RequiredFieldValidator
    ID="RequiredFieldValidator1" ControlToValidate="tbUnitPrice" ErrorMessage="*"
    runat="server">
                                </asp:RequiredFieldValidator></span>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
                        ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
                        UniqueName="DeleteColumn">
                        <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                    </telerik:GridButtonColumn>
                </Columns>
                <EditFormSettings ColumnNumber="2" CaptionDataField="ProductName" CaptionFormatString="Edit properties of Product {0}"
                    InsertCaption="New Product">
                    <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                    <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                    <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" BackColor="White"
                        Width="100%" />
                    <FormTableStyle CellSpacing="0" CellPadding="2" Height="110px" BackColor="White" />
                    <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                    <EditColumn ButtonType="ImageButton" InsertText="Insert Order" UpdateText="Update record"
                        UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                    </EditColumn>
                    <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
                </EditFormSettings>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowDblClick="RowDblClick" OnGridCreated="gridCreated" />
            </ClientSettings>
        </telerik:RadGrid>
        <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="200px" />
        <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor2" runat="server" TextBoxStyle-Width="150px" />
        <telerik:GridDropDownListColumnEditor ID="GridDropDownColumnEditor1" runat="server"
            DropDownStyle-Width="110px" />
        <telerik:GridNumericColumnEditor ID="GridNumericColumnEditor1" runat="server" NumericTextBox-Width="40px" />
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
        </telerik:RadWindowManager>
        <br />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = @ProductID"
            InsertCommand="INSERT INTO [Products] ([ProductName], [CategoryID], [UnitPrice], [Discontinued], [QuantityPerUnit], [UnitsInStock]) VALUES (@ProductName, @CategoryID, @UnitPrice, @Discontinued, @QuantityPerUnit, @UnitsInStock)"
            SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice], [Discontinued], [QuantityPerUnit], [UnitsInStock] FROM [Products]"
            UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [CategoryID] = @CategoryID, [UnitPrice] = @UnitPrice, [Discontinued] = @Discontinued, [QuantityPerUnit] = @QuantityPerUnit, [UnitsInStock] = @UnitsInStock WHERE [ProductID] = @ProductID">
            <DeleteParameters>
                <asp:Parameter Name="ProductID" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="ProductName" Type="String" />
                <asp:Parameter Name="CategoryID" Type="Int32" />
                <asp:Parameter Name="UnitPrice" Type="Decimal" />
                <asp:Parameter Name="Discontinued" Type="Boolean" />
                <asp:Parameter Name="QuantityPerUnit" Type="String" />
                <asp:Parameter Name="UnitsInStock" Type="Int16" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="ProductName" Type="String" />
                <asp:Parameter Name="CategoryID" Type="Int32" />
                <asp:Parameter Name="UnitPrice" Type="Decimal" />
                <asp:Parameter Name="Discontinued" Type="Boolean" />
                <asp:Parameter Name="QuantityPerUnit" Type="String" />
                <asp:Parameter Name="UnitsInStock" Type="Int16" />
                <asp:Parameter Name="ProductID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]">
        </asp:SqlDataSource>
        <!-- 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