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

Integration with RadGrid

First NameLast NameExtensionHome Phone
1chewyaawxwgranola1 xxxx12125467(206) 555-9857121
2tateFullerxxxxxxxxx3457(206) 555-9482
3JanetteLeverling3355(206) 555-3412
4MargaretcxPeacock H517677777777
5StevenBuchanan3453(71) 555-4848
6MichaelSuyama428(71) 555-7773
7RobertKing465(71) 555-5598
8LauraCallahan2344(206) 555-1189
9AnneDodsworth452(71) 555-4444
11DangoMango  
13詔欽  
14WhatEver  
15JimSmith  
16xwwxwxwxwxwx  
17zorrozz  
18ericemmanuel  
19jomo  
20DanielLeguizamo  
21pinotaglialatela  
22pippopluto  
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