DataForm - Binding to Telerik ClientDataSource

RadDataForm bound to RadClientDataSource

Insert New Customer

Edit Customer
Customer ID:

Customers
Customer ID:
Company Name:
Contact Name:
Contact Title:

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

This demo demonstrates binding of RadDataForm to RadClientDataSource. It supports Insert, Update and Delete operations as well as paging.

In order to bind the DataForm to ClientDataSource, the ClientDataSourceID property of the DataForm should be set. To populate the values from the current DataItem to the fields in your template, you need to handle the OnSetValues and OnGetValues events.

  • DefaultVB.aspx
<%@ Page Language="VB"  %>

<%@ 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>
    <style>
        .size-custom {
            max-width: 531px;
        }
    </style>

    <script type="text/javascript">
        //<![CDATA[
        function ParameterMap(sender, args) {
            if (args.get_type() != "read" && args.get_data()) {
                args.set_parameterFormat({ customersJSON: kendo.stringify(args.get_data().models) });
            }
        }
        function Parse(sender, args) {
            var response = args.get_response().d;
            if (response) {
                args.set_parsedData(response.Data);
            }
        }

        function dataFormCreated(sender, args) {
            window.dataform1 = sender;
        }

        function dataFormSetValues(sender, args) {
            var dataItem = args;
            if (dataItem.CustomerID == undefined) {
                setTimeout(function () {
                    sender.rebind();
                }, 20)
            }
            $telerik.findElement(document, "ViewCustomerIDLabel1").innerHTML = dataItem.CustomerID;
            $telerik.findElement(document, "ViewCompanyNameLabel1").innerHTML = dataItem.CompanyName;
            $telerik.findElement(document, "ViewContactNameLabel1").innerHTML = dataItem.ContactName;
            $telerik.findElement(document, "ViewContactTitleLabel1").innerHTML = dataItem.ContactTitle;
            $telerik.findElement(document, "EditCustomerIDLabel1").innerHTML = dataItem.CustomerID;
            $telerik.findControl(document, "EditCompanyName").set_value(dataItem.CompanyName);
            $telerik.findControl(document, "EditContactName").set_value(dataItem.ContactName);
            $telerik.findControl(document, "EditContactTitle").set_value(dataItem.ContactTitle);
        }

        function dataFormGetValues(sender, args) {
            if (args.get_commandName() == "PerformInsert") {
                var dataItem = {};
                dataItem.CompanyName = $telerik.findControl(document, "InsertCompanyName").get_value();
                dataItem.ContactName = $telerik.findControl(document, "InsertContactName").get_value();
                dataItem.ContactTitle = $telerik.findControl(document, "InsertContactTitle").get_value();
                args.set_dataItem(dataItem);
                $telerik.findControl(document, "InsertCompanyName").set_value("");
                $telerik.findControl(document, "InsertContactName").set_value("");
                $telerik.findControl(document, "InsertContactTitle").set_value("");
            }
            else if (args.get_commandName() == "Update") {
                var dataItem = {};
                dataItem.CompanyName = $telerik.findControl(document, "EditCompanyName").get_value();
                dataItem.ContactName = $telerik.findControl(document, "EditContactName").get_value();
                dataItem.ContactTitle = $telerik.findControl(document, "EditContactTitle").get_value();
                args.set_dataItem(dataItem);
            }
        }

        function dataFormCommand(sender, args) {
            if (args.get_commandName() == "InitInsert") {
                $telerik.$(sender.get_element()).find(".rdfPager").hide();
            }
            else {
                $telerik.$(sender.get_element()).find(".rdfPager").show();
            }
        }
        //]]>
    </script>
</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">

        <h4>RadDataForm bound to RadClientDataSource</h4>
        <telerik:RadDataForm RenderMode="Lightweight" runat="server" ID="RadDataForm1"
            DataKeyNames="CustomerID" RenderWrapper="true" class="rdfRightAligned rdfNoFieldHint rdfNoFieldHint" ClientDataSourceID="RadClientDataSource1">
            <ClientSettings>
                <ClientEvents OnCommand="dataFormCommand" OnSetValues="dataFormSetValues" OnGetValues="dataFormGetValues" OnDataFormCreated="dataFormCreated" />
            </ClientSettings>
            <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" OnClientClicked="function(){dataform1.page('First');}" CommandArgument="First" CommandName="Page" 
                                CssClass="rdfActionButton rdfPageFirst"  Skin="Silk" ToolTip="First" AutoPostBack="false">
                                <Icon PrimaryIconCssClass="rdfIcon rdfPageFirstIcon" />
                            </telerik:RadButton>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton2" runat="server" OnClientClicked="function(){dataform1.page('Prev');}" CommandArgument="Prev" CommandName="Page" 
                                CssClass="rdfActionButton rdfPagePrev"  Skin="Silk" ToolTip="Previous" AutoPostBack="false">
                                <Icon PrimaryIconCssClass="rdfIcon rdfPagePrevIcon" />
                            </telerik:RadButton>
                        </span><span>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton3" runat="server" OnClientClicked="function(){dataform1.page('Next');}" CommandArgument="Next" CommandName="Page" 
                                CssClass="rdfActionButton rdfPageNext"  Skin="Silk" ToolTip="Next" AutoPostBack="false">
                                <Icon PrimaryIconCssClass="rdfIcon rdfPageNextIcon" />
                            </telerik:RadButton>
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton4" runat="server" OnClientClicked="function(){dataform1.page('Last');}" CommandArgument="Last" CommandName="Page" 
                                CssClass="rdfActionButton rdfPageLast"  Skin="Silk" ToolTip="Last" AutoPostBack="false">
                                <Icon PrimaryIconCssClass="rdfIcon rdfPageLastIcon" />
                            </telerik:RadButton>
                        </span>
                    </div>
                </div>
            </LayoutTemplate>
            <ItemTemplate>
                <fieldset id="View" class="rdfFieldset rdfBorders">
                    <legend class="rdfLegend">Customers</legend>
                    <div class="rdfRow">
                        <asp:Label ID="ViewCustomerIDLabel2" runat="server" CssClass="rdfLabel" Text="Customer ID:"></asp:Label>
                        <asp:Label ID="ViewCustomerIDLabel1" runat="server" CssClass="rdfFieldValue" Text='' />
                    </div>
                    <div class="rdfRow">
                        <asp:Label ID="ViewCompanyNameLabel2" runat="server" CssClass="rdfLabel" Text="Company Name:"></asp:Label>
                        <asp:Label ID="ViewCompanyNameLabel1" runat="server" CssClass="rdfFieldValue" Text='' />
                    </div>
                    <div class="rdfRow">
                        <asp:Label ID="ViewContactNameLabel2" runat="server" CssClass="rdfLabel" Text="Contact Name:"></asp:Label>
                        <asp:Label ID="ViewContactNameLabel1" runat="server" CssClass="rdfFieldValue" Text='' />
                    </div>
                    <div class="rdfRow">
                        <asp:Label ID="ViewContactTitleLabel2" runat="server" CssClass="rdfLabel" Text="Contact Title:"></asp:Label>
                        <asp:Label ID="ViewContactTitleLabel1" runat="server" CssClass="rdfFieldValue" Text='' />
                    </div>

                    <div class="rdfCommandButtons">
                        <hr class="rdfHr" />
                        <telerik:RadButton RenderMode="Lightweight" ID="InitInsertButton" runat="server" ButtonType="SkinnedButton" OnClientClicked="function(){dataform1.showInsertItem();}" AutoPostBack="false" Text="Insert" ToolTip="Insert" />
                        <telerik:RadButton RenderMode="Lightweight" ID="EditButton" runat="server" ButtonType="SkinnedButton" OnClientClicked="function(){dataform1.editItem();}" AutoPostBack="false" Text="Edit" ToolTip="Edit" />
                        <telerik:RadButton RenderMode="Lightweight" ID="DeleteButton" runat="server" ButtonType="SkinnedButton"
                            OnClientClicking='function(sender, args){if(window.confirm("Are you sure you want to delete this record?"))dataform1.deleteItem();}' AutoPostBack="false"
                            Text="Delete" ToolTip="Delete" />
                    </div>
                </fieldset>
            </ItemTemplate>
            <EditItemTemplate>
                <fieldset id="Edit" class="rdfFieldset rdfBorders">
                    <legend class="rdfLegend">Edit Customer</legend>
                    <div class="rdfRow">
                        <asp:Label ID="EditCustomerIDLabel2" runat="server" CssClass="rdfLabel" Text="Customer ID:"></asp:Label>
                        <asp:Label ID="EditCustomerIDLabel1" runat="server" CssClass="rdfFieldValue" />
                    </div>

                    <div class="rdfRow">
                        <asp:Label ID="EditCompanyNameLabel" runat="server" AssociatedControlID="EditCompanyName" CssClass="rdfLabel" Text="Company Name:"></asp:Label>
                        <telerik:RadTextBox RenderMode="Lightweight" ID="EditCompanyName" runat="server" Text='' WrapperCssClass="rdfInput" />
                    </div>
                    <div class="rdfRow">
                        <asp:Label ID="EditContactNameLabel" runat="server" AssociatedControlID="EditContactName" CssClass="rdfLabel" Text="Contact Name:"></asp:Label>
                        <telerik:RadTextBox RenderMode="Lightweight" ID="EditContactName" runat="server" WrapperCssClass="rdfInput" />
                    </div>
                    <div class="rdfRow">
                        <asp:Label ID="EditContactTitlelabel" runat="server" AssociatedControlID="EditContactTitle" CssClass="rdfLabel" Text="Contact Title:"></asp:Label>
                        <telerik:RadTextBox RenderMode="Lightweight" ID="EditContactTitle" runat="server" WrapperCssClass="rdfInput" />
                    </div>

                    <div class="rdfCommandButtons">
                        <hr class="rdfHr" />
                        <telerik:RadButton RenderMode="Lightweight" ID="UpdateButton" runat="server" ButtonType="SkinnedButton" OnClientClicked="function(){dataform1.updateItem();}" AutoPostBack="false" Text="Update" ToolTip="Update" />
                        <telerik:RadButton RenderMode="Lightweight" ID="CancelButton" runat="server" ButtonType="SkinnedButton" OnClientClicked="function(){dataform1.cancelUpdate();}" AutoPostBack="false" Text="Cancel" ToolTip="Cancel" />
                    </div>
                </fieldset>
            </EditItemTemplate>
            <InsertItemTemplate>
                <fieldset id="Insert" class="rdfFieldset rdfBorders">
                    <legend class="rdfLegend">Insert New Customer</legend>
                    <div class="rdfRow">
                        <asp:Label ID="CustomerLabel2" runat="server" AssociatedControlID="InsertCompanyName" CssClass="rdfLabel" Text="Company Name:"></asp:Label>
                        <telerik:RadTextBox RenderMode="Lightweight" ID="InsertCompanyName" runat="server" Text='' WrapperCssClass="rdfInput" />
                    </div>
                    <div class="rdfRow">
                        <asp:Label ID="Label1" runat="server" AssociatedControlID="InsertContactName" CssClass="rdfLabel" Text="Contact Name:"></asp:Label>
                        <telerik:RadTextBox RenderMode="Lightweight" ID="InsertContactName" runat="server" WrapperCssClass="rdfInput" />
                    </div>
                    <div class="rdfRow">
                        <asp:Label ID="Label2" runat="server" AssociatedControlID="InsertContactTitle" CssClass="rdfLabel" Text="Contact Title:"></asp:Label>
                        <telerik:RadTextBox RenderMode="Lightweight" ID="InsertContactTitle" runat="server" WrapperCssClass="rdfInput" />
                    </div>

                    <div class="rdfCommandButtons">
                        <hr class="rdfHr" />
                        <telerik:RadButton RenderMode="Lightweight" ID="PerformInsertButton" runat="server" ButtonType="SkinnedButton" OnClientClicked="function(){dataform1.insertItem();}" AutoPostBack="false" Text="Insert" ToolTip="Insert" />
                        <telerik:RadButton RenderMode="Lightweight" ID="CancelButton" runat="server" ButtonType="SkinnedButton" OnClientClicked="function(){dataform1.cancelInsert();}" AutoPostBack="false" Text="Cancel" ToolTip="Cancel" />
                    </div>
                </fieldset>
            </InsertItemTemplate>
        </telerik:RadDataForm>

        <telerik:RadClientDataSource ID="RadClientDataSource1" runat="server" AllowBatchOperations="true">
            <ClientEvents OnCustomParameter="ParameterMap" OnDataParse="Parse" />
            <DataSource>
                <WebServiceDataSourceSettings BaseUrl="EditingWcfService.svc/">
                    <Select Url="GetCustomers" DataType="JSON" />
                    <Update Url="UpdateCustomers" DataType="JSON" />
                    <Insert Url="InsertCustomers" DataType="JSON" />
                    <Delete Url="DeleteCustomers" DataType="JSON" />
                </WebServiceDataSourceSettings>
            </DataSource>
            <Schema>
                <Model ID="CustomerID">
                    <telerik:ClientDataSourceModelField FieldName="CustomerID" DataType="String" />
                    <telerik:ClientDataSourceModelField FieldName="CompanyName" DataType="String" />
                    <telerik:ClientDataSourceModelField FieldName="ContactName" DataType="String" />
                    <telerik:ClientDataSourceModelField FieldName="ContactTitle" DataType="String" />
                </Model>
            </Schema>
        </telerik:RadClientDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?