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

RadDataForm bound to RadClientDataSource

Insert New Customer
Company Name:
Contact Name:
Contact Title:
Edit Customer
Customer ID:
Company Name:
Contact Name:
Contact Title:
Customers
Customer ID:
Company Name:
Contact Name:
Contact Title:
About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application
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.
<%@ Page Language="VB"  %>

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

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support