DataForm - Manual CRUD Operations

Product
Product ID: 1
Name: Chai
Quantity Per Unit: 10 boxes x 20 bags
Price: 18.00
Units: 39

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates RadDataForm capability for inserting new data, updating existing data and deleting data. The main points are to intercept ItemUpdating and ItemInserting events of the DataForm so that you insert and update records manually in your database.

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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">
    <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" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadDataForm RenderMode="Lightweight" runat="server" ID="RadDataForm1"
                DataKeyNames="ProductID"
                OnNeedDataSource="RadDataForm1_NeedDataSource"
                OnItemInserting="RadDataForm1_ItemInserting"
                OnItemUpdating="RadDataForm1_ItemUpdating"
                OnItemDeleting="RadDataForm1_ItemDeleting"
                OnPreRender="RadDataForm1_PreRender"
                Skin="Silk">
                <LayoutTemplate>
                    <div style="width: 531px" class="RadDataForm RadDataForm_<%# Container.Skin %> rdfRightAligned rdfNoFieldHint rdfNoFieldHint">
                        <div id="itemPlaceholder" runat="server">
                        </div>
                        <div class="rdfPager rdfPagerRight">
                            <span>
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" CommandArgument="First" CommandName="Page" CssClass="rdfActionButton rdfPageFirst"  Skin="Silk" ToolTip="First">
                                    <Icon PrimaryIconCssClass="rdfIcon rdfPageFirstIcon" />
                                </telerik:RadButton>
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" CommandArgument="Prev" CommandName="Page" CssClass="rdfActionButton rdfPagePrev"  Skin="Silk" ToolTip="Previous">
                                    <Icon PrimaryIconCssClass="rdfIcon rdfPagePrevIcon" />
                                </telerik:RadButton>
                            </span><span>
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton3" runat="server" CommandArgument="Next" CommandName="Page" CssClass="rdfActionButton rdfPageNext"  Skin="Silk" ToolTip="Next">
                                    <Icon PrimaryIconCssClass="rdfIcon rdfPageNextIcon" />
                                </telerik:RadButton>
                                <telerik:RadButton RenderMode="Lightweight" ID="RadButton4" runat="server" CommandArgument="Last" CommandName="Page" CssClass="rdfActionButton rdfPageLast"  Skin="Silk" ToolTip="Last">
                                    <Icon PrimaryIconCssClass="rdfIcon rdfPageLastIcon" />
                                </telerik:RadButton>
                            </span>
                        </div>
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <fieldset class="rdfFieldset rdfBorders">
                        <legend class="rdfLegend">Product</legend>
                        <div class="rdfRow">
                            <asp:Label ID="ProductIDLabel2" runat="server" CssClass="rdfLabel" Text="Product ID:"></asp:Label>
                            <asp:Label ID="ProductIDLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("ProductID") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="ProductNameLabel2" runat="server" CssClass="rdfLabel" Text="Name:"></asp:Label>
                            <asp:Label ID="ProductNameLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("ProductName") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="QuantityPerUnitLabel2" runat="server" CssClass="rdfLabel" Text="Quantity Per Unit:"></asp:Label>
                            <asp:Label ID="QuantityPerUnitLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("QuantityPerUnit") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="UnitPriceLabel2" runat="server" CssClass="rdfLabel" Text="Price:"></asp:Label>
                            <asp:Label ID="UnitPriceLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("UnitPrice") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="UnitsInStockLabel2" runat="server" CssClass="rdfLabel" Text="Units:"></asp:Label>
                            <asp:Label ID="UnitsInStockLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("UnitsInStock") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="DiscontinuedLabel2" runat="server" AssociatedControlID="DiscontinuedCheckBox" CssClass="rdfLabel" Text="Discontinued:"></asp:Label>
                            <asp:CheckBox ID="DiscontinuedCheckBox" runat="server" Checked='<%# Eval("Discontinued") %>' Enabled="false" />
                        </div>
                        <div class="rdfCommandButtons">
                            <hr class="rdfHr" />
                            <telerik:RadButton RenderMode="Lightweight" ID="InitInsertButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False" CommandName="InitInsert" Text="Insert" ToolTip="Insert" />
                            <telerik:RadButton RenderMode="Lightweight" ID="EditButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False" CommandName="Edit" Text="Edit" ToolTip="Edit" />
                            <telerik:RadButton RenderMode="Lightweight" ID="DeleteButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False"
                                CommandName="Delete" CommandArgument='<%#Eval("ProductID") %>'
                                OnClientClicking='function(sender, args){args.set_cancel(!window.confirm("Are you sure you want to delete this record?"));}'
                                Text="Delete" ToolTip="Delete" />
                        </div>
                    </fieldset>
                </ItemTemplate>
                <EditItemTemplate>
                    <fieldset class="rdfFieldset rdfBorders">
                        <legend class="rdfLegend">Edit Product</legend>
                        <div class="rdfRow">
                            <asp:Label ID="ProductIDLabel2" runat="server" CssClass="rdfLabel" Text="Product ID:"></asp:Label>
                            <asp:Label ID="ProductIDLabel1" runat="server" CssClass="rdfFieldValue" Text='<%# Eval("ProductID") %>' />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="ProductNameLabel2" runat="server" AssociatedControlID="ProductNameTextBox" CssClass="rdfLabel" Text="Name:"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="ProductNameTextBox" runat="server" Text='<%# Bind("ProductName") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="QuantityPerUnitLabel2" runat="server" AssociatedControlID="QuantityPerUnitTextBox" CssClass="rdfLabel" Text="Quantity Per Unit:"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="QuantityPerUnitTextBox" runat="server" Text='<%# Bind("QuantityPerUnit") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="UnitPriceLabel2" runat="server" AssociatedControlID="UnitPriceTextBox" CssClass="rdfLabel" Text="Price:"></asp:Label>
                            <telerik:RadNumericTextBox RenderMode="Lightweight" ID="UnitPriceTextBox" runat="server" DataType="Decimal" DbValue='<%# Bind("UnitPrice") %>' Skin="<%#Container.OwnerDataForm.Skin %>" WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="UnitsInStockLabel2" runat="server" AssociatedControlID="UnitsInStockTextBox" CssClass="rdfLabel" Text="Units:"></asp:Label>
                            <telerik:RadNumericTextBox RenderMode="Lightweight" ID="UnitsInStockTextBox" runat="server" DataType="Int16" DbValue='<%# Bind("UnitsInStock") %>' NumberFormat-DecimalDigits="0" Skin="<%#Container.OwnerDataForm.Skin %>" WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="DiscontinuedLabel2" runat="server" AssociatedControlID="DiscontinuedCheckBox" CssClass="rdfLabel" Text="Discontinued:"></asp:Label>
                            <asp:CheckBox ID="DiscontinuedCheckBox" runat="server" Checked='<%# Bind("Discontinued") %>' />
                        </div>
                        <div class="rdfCommandButtons">
                            <hr class="rdfHr" />
                            <telerik:RadButton RenderMode="Lightweight" ID="UpdateButton" runat="server" ButtonType="SkinnedButton" CommandName="Update" Text="Update" ToolTip="Update" />
                            <telerik:RadButton RenderMode="Lightweight" ID="CancelButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False" CommandName="Cancel" Text="Cancel" ToolTip="Cancel" />
                        </div>
                    </fieldset>
                </EditItemTemplate>
                <InsertItemTemplate>
                    <fieldset class="rdfFieldset rdfBorders">
                        <legend class="rdfLegend">Insert New Product</legend>
                        <div class="rdfRow">
                            <asp:Label ID="ProductNameLabel2" runat="server" AssociatedControlID="ProductNameTextBox" CssClass="rdfLabel" Text="Name:"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="ProductNameTextBox" runat="server" Text='<%# Bind("ProductName") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="QuantityPerUnitLabel2" runat="server" AssociatedControlID="QuantityPerUnitTextBox" CssClass="rdfLabel" Text="Quantity Per Unit:"></asp:Label>
                            <telerik:RadTextBox RenderMode="Lightweight" ID="QuantityPerUnitTextBox" runat="server" Text='<%# Bind("QuantityPerUnit") %>' WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="UnitPriceLabel2" runat="server" AssociatedControlID="UnitPriceTextBox" CssClass="rdfLabel" Text="Price:"></asp:Label>
                            <telerik:RadNumericTextBox RenderMode="Lightweight" ID="UnitPriceTextBox" runat="server" DataType="Decimal" DbValue='<%# Bind("UnitPrice") %>' Skin="<%#Container.OwnerDataForm.Skin %>" WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="UnitsInStockLabel2" runat="server" AssociatedControlID="UnitsInStockTextBox" CssClass="rdfLabel" Text="Units:"></asp:Label>
                            <telerik:RadNumericTextBox RenderMode="Lightweight" ID="UnitsInStockTextBox" runat="server" DataType="Int16" DbValue='<%# Bind("UnitsInStock") %>' NumberFormat-DecimalDigits="0" Skin="<%#Container.OwnerDataForm.Skin %>" WrapperCssClass="rdfInput" />
                        </div>
                        <div class="rdfRow">
                            <asp:Label ID="DiscontinuedLabel2" runat="server" AssociatedControlID="DiscontinuedCheckBox" CssClass="rdfLabel" Text="Discontinued:"></asp:Label>
                            <asp:CheckBox ID="DiscontinuedCheckBox" runat="server" Checked='<%# Bind("Discontinued") %>' />
                        </div>
                        <div class="rdfCommandButtons">
                            <hr class="rdfHr" />
                            <telerik:RadButton RenderMode="Lightweight" ID="PerformInsertButton" runat="server" ButtonType="SkinnedButton" CommandName="PerformInsert" Text="Insert" ToolTip="Insert" />
                            <telerik:RadButton RenderMode="Lightweight" ID="CancelButton" runat="server" ButtonType="SkinnedButton" CausesValidation="False" CommandName="Cancel" Text="Cancel" ToolTip="Cancel" />
                        </div>
                    </fieldset>
                </InsertItemTemplate>
                <EmptyDataTemplate>
                    <div class="RadDataForm RadDataForm_<%# Container.Skin %>">
                        <div class="rdfEmpty">
                            There are no items to be displayed.
                        </div>
                    </div>
                </EmptyDataTemplate>
            </telerik:RadDataForm>
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?