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

Integration with RadGrid

First NameLast NameExtensionHome Phone
27SERGIOasfsfsdfs () -
37Billy0000fBobfpfdfdfffffffffff  
41HHH  
84ad  
95asdasddasda  
116JoeTester  
125tgiuhuhuhoi (567) 879-8090
126asdasd  
127asdasd  
128asd2asd2  
130asdfasdafdasd  
134dsasad happy  
1421134_1 () -
144joshjosh  
145lllkkk (023) 648-6179
149ejemploejemplo  
1512222  
First Name:
Last Name:
Home Phone:
Extension:

RadDataForm was introduced in Q3 2014 and provides seamless integration with RadGrid. This demo illustrates how you can use DataForm as an external edit form of RadGrid.

The example demonstrates how SelectedIndexChanged event of RadGrid is used to bind the RadDataForm. After the control is data-bound you can switch the RadDataForm between edit and preview modes to update the data in the grid.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.DataFormExamples.ApplicationScenarios.RadGridIntegration.DefaultCS"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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>
    <link href="styles.css" rel="stylesheet" />
</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 size-custom">
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" CssClass="controlsWrapper">

            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server"
                DataSourceID="EntityDataSourceEmployees"
                AllowSorting="true" Width="420px"
                OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged">

                <MasterTableView DataSourceID="EntityDataSourceEmployees" AutoGenerateColumns="False"
                    DataKeyNames="EmployeeID">
                    <Columns>
                        <telerik:GridBoundColumn DataField="EmployeeID" HeaderText="EmployeeID" SortExpression="EmployeeID"
                            UniqueName="EmployeeID" Display="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" SortExpression="FirstName"
                            UniqueName="FirstName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name" SortExpression="LastName"
                            UniqueName="LastName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Extension" HeaderText="Extension" SortExpression="Extension"
                            UniqueName="Extension">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="HomePhone" HeaderText="Home Phone" SortExpression="HomePhone"
                            UniqueName="HomePhone">
                        </telerik:GridBoundColumn>
                    </Columns>
                    <EditFormSettings>
                        <EditColumn ButtonType="ImageButton" />
                    </EditFormSettings>
                </MasterTableView>
                <ClientSettings EnablePostBackOnRowClick="true" Selecting-AllowRowSelect="true">
                </ClientSettings>
            </telerik:RadGrid>



            <telerik:RadDataForm RenderMode="Lightweight" runat="server" ID="RadDataForm1" DataSourceID="EntityDataSource1" OnPreRender="RadDataForm1_PreRender" 
                OnItemUpdated="RadDataForm1_ItemUpdated"
                DataKeyNames="EmployeeID">
                <LayoutTemplate>
                    <div class="RadDataForm RadDataForm_<%# Container.Skin %> rdfLeftAligned rdfInlineBlock">
                        <div id="itemPlaceholder" runat="server" class="rdfLeftAligned"></div>
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <fieldset class="rdfFieldset rdfBorders">
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="FirstNameLabel2" CssClass="rdfLabel" Text="First Name:"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="FirstNameTextBox1" WrapperCssClass="rdfFieldValue" Text='<%# Eval("FirstName") %>' Enabled="false" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="LastNameLabel2" CssClass="rdfLabel" Text="Last Name:"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="LastNameTextBox1" WrapperCssClass="rdfFieldValue" Text='<%# Eval("LastName") %>' Enabled="false" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="HomePhoneLabel2" CssClass="rdfLabel" Text="Home Phone:"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="HomePhoneTextBox1" WrapperCssClass="rdfFieldValue" Text='<%# Eval("HomePhone") %>' Enabled="false" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="ExtensionLabel2" CssClass="rdfLabel" Text="Extension:"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="ExtensionTextBox1" WrapperCssClass="rdfFieldValue" Text='<%# Eval("Extension") %>' Enabled="false" />
                        </div>
                        <div class="rdfRow">
                            <telerik:RadButton RenderMode="Lightweight" runat="server" ID="ButtonEdit" Text="Edit" CommandName="Edit" />
                        </div>
                    </fieldset>
                </ItemTemplate>
                <EditItemTemplate>
                    <fieldset class="rdfFieldset rdfBorders">
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="FirstNameLabel2" CssClass="rdfLabel rdfBlock" Text="First Name:"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="FirstNameTextBox2" WrapperCssClass="rdfFieldValue" Text='<%# Bind("FirstName") %>' MaxLength="10" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="LastNameLabel2" CssClass="rdfLabel rdfBlock" Text="Last Name:"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="LastNameTextBox2" WrapperCssClass="rdfFieldValue" Text='<%# Bind("LastName") %>' MaxLength="20" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="HomePhoneLabel2" CssClass="rdfLabel rdfBlock" Text="Home Phone:"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="HomePhoneTextBox2" WrapperCssClass="rdfFieldValue" Text='<%# Bind("HomePhone") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label runat="server" ID="ExtensionLabel2" CssClass="rdfLabel rdfBlock" Text="Extension:"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="ExtensionTextBox2" WrapperCssClass="rdfFieldValue" Text='<%# Bind("Extension") %>' />
                        </div>
                        <div class="rdfRow">
                            <telerik:RadButton RenderMode="Lightweight" ID="ButtonUpdate" Text="Update" runat="server" CommandName="Update" />
                            <telerik:RadButton RenderMode="Lightweight" ID="CancelButton" Text="Cancel" runat="server" CommandName="Cancel" />
                        </div>
                    </fieldset>
                </EditItemTemplate>
            </telerik:RadDataForm>

            <telerik:RadInputManager RenderMode="Lightweight" runat="server" ID="RadInputManager1">
                <telerik:TextBoxSetting BehaviorID="TextBehavior1">
                    <TargetControls>
                        <telerik:TargetInput ControlID="FirstNameTextBox2" />
                        <telerik:TargetInput ControlID="LastNameTextBox2" />
                    </TargetControls>
                </telerik:TextBoxSetting>
                <telerik:MaskedTextBoxSetting BehaviorID="MaskedSetting1" Mask="(###) ###-####">
                    <TargetControls>
                        <telerik:TargetInput ControlID="HomePhoneTextBox2" />
                    </TargetControls>
                </telerik:MaskedTextBoxSetting>
                <telerik:NumericTextBoxSetting BehaviorID="NumericSetting1" MaxValue="9999" MinValue="0" DecimalDigits="0" GroupSeparator="">
                    <TargetControls>
                        <telerik:TargetInput ControlID="ExtensionTextBox2" />
                    </TargetControls>
                </telerik:NumericTextBoxSetting>
            </telerik:RadInputManager>
        </telerik:RadAjaxPanel>
    </div>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    <asp:EntityDataSource runat="server" ID="EntityDataSourceEmployees" ConnectionString="name=NorthwindReadWriteEntities"
        DefaultContainerName="NorthwindReadWriteEntities" EntitySetName="Employees" OrderBy="it.[EmployeeID]" EnableFlattening="False" EntityTypeFilter="Employee" Select="it.[EmployeeID], it.[LastName], it.[FirstName], it.[HomePhone], it.[Extension]">
    </asp:EntityDataSource>
    <asp:EntityDataSource runat="server" ID="EntityDataSource1" ConnectionString="name=NorthwindReadWriteEntities"
        DefaultContainerName="NorthwindReadWriteEntities"
        EntitySetName="Employees"
        Where="it.[EmployeeID]=@EmployeeID"
        OrderBy="it.[EmployeeID]"
        EnableFlattening="false" EnableUpdate="true">
        <WhereParameters>
            <asp:ControlParameter ControlID="RadGrid1" Name="EmployeeID" PropertyName="SelectedValue" Type="Int32" />
        </WhereParameters>
        <UpdateParameters>
            <asp:Parameter Name="FirstName" Type="String" />
            <asp:Parameter Name="LastName" Type="String" />
            <asp:Parameter Name="HomePhone" Type="String" />
            <asp:Parameter Name="Extension" Type="String" />
        </UpdateParameters>
    </asp:EntityDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance