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

Integration with RadGrid

First NameLast NameExtensionHome Phone
15JimSmithEEE  
17zorroeeeezzz  
18ericemmanuel () -
20DanielLeguizamo () -
21pinotaglialatela  
22pippozzpluto  
23TakanaMidori (081) 124-5545
24dwadadsadasd  
26YamamotoTakagi (081) 123-9958
27elkljlwww () -
28ZZZZZZyyyyyy (059) 212-3615
31t443tgr4trt  
33tterterter  
34Amit Kumaryadav  
35jk goldenjk  
361xxxxxxxxxxxxxxxx  
37BillyBob  
41HHH  
42sdfgsdfg  
43qwqqwq  
45aa  
46bbbb  
47wrqewqweqwe  
48weqeqweqewqw  
49wrqewqsdadasdsadasdasdasds  
50HernanDario  
51JFGJ555FHJKJHF  
52HernanDario  
53123123  
54aaaadddd444  
55123123  
56TestMe  
57aa  
58PaBas  
59dddd  
60TestSmith  
62aa  
63TestTest  
645585  
681e2e21e  
6911  
70sofiayool  
72YG  
73ab  
74eecce  
75aaaaaaaa  
78testtest  
79testtest  
80pkpj  
8112  
8211  
83pk11  
84ad  
8511  
86jj  
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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.DataFormExamples.ApplicationScenarios.RadGridIntegration.DefaultVB"  %>

<%@ 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