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

Integration with RadGrid

First NameLast NameExtensionHome Phone
24Jim5Check out the design 1234568985
27elkljlwww12 () -
33tterterter  
34Am3 Kumaryadav  
35jk goldentttttttttt  
361xxxxxxxxxxxxxxxx  
37BillyBob  
41HHH  
42sdfgsdfg  
43qwqqwqAA  
45aa  
46bbbbG  
47wrqewqweqwe  
48weqeqweqewqw  
49wrqewqsdadasdsadasdasdasds  
50HernanDario  
51JFGJ555FHJKJHF  
52HernanDario  
53123123  
54aaaadddd444  
55123123  
56TestaMe  
57aa  
58PaBas  
59dddd  
60TestSmith  
62aa  
63TestTest  
645585  
681e2e21e  
69341  
70sofiayool  
72YG  
73ab  
75aaaaaaaa  
78testtest  
79testtest  
80pkpj  
8211  
83pk11  
84ad  
8511  
86jj  
87aaaaccccc  
88222222  
89FDSGDSFGSDFGSDFGFD  
90BillyBob  
91thTest  
92ggghhh () -
9311  
94asdassasdasda  
95asdasddasda  
96dasdadasd  
97tttt  
98Cm n en jNo nbv  
99sfádas  
1022323 () -
1032323  
104523121  
105121212  
106miguel111  
107asdasd  
108asda asda  
109aa  
110daniginanjar  
111aaaaabbbbb  
112xxxx  
113jamesedward  
114MyName 365
116JoeTester  
11813231231fff gg
119lr  
120ffhghgfhfhg
121eqwhkheqjkehjqw  
122EdSmith  
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