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

Server-side Binding

Using declarative data source

Company Name: Gourmet Lanchonetes
Name: André Fonseca
Title: Sales Associate
City: Campinas
Country: Brazil
Phone: (11) 555-9482

Using NeedDataSource event handler

Company Name: Rattlesnake Canyon Grocery
Name: Paula Wilson
Title: Assistant Sales Representative
City: Albuquerque
Country: USA
Phone: (505) 555-5939
The demo shows the two ways of server-side binding of RadDataForm:
  • Using declarative DataSource control by setting DataSourceID property - you can bind a DataForm to various data source controls such as SqlDataSource, ObjectDataSource, XmlDataSource, etc.
  • Using the NeedDataSource event in the code-behind where the DataSource is specified - The key to the dynamic data binding of Telerik RadDataForm is handling correctly the NeedDataSource event. That's why we chose this exact name. 'Need' in this case actually means that if at an exact moment the data source property does not point to a valid data source object, the control will not behave correctly.
The advantages of using NeedDataSource event are that the developer does not need to write any code in order to handle the logic about when and how the data-binding should be processed. In the code of the NeedDataSource handler you should prepare the data source or custom list of objects for Telerik RadDataForm and assign it to the controls's DataSource property.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.DataFormExamples.DataBinding.ServerSide.DefaultCS"  %>

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <style type="text/css">
        .background-bootstrap .rdpPagerLabel {
            margin: 7px 2px 0 5px;
        }
    </style>
    <div class="demo-containers">
        <div class="demo-container">
            <h3>Using declarative data source</h3>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="521px">
                <telerik:RadDataForm RenderMode="Lightweight" runat="server" ID="RadDataForm1" OnPreRender="RadDataForm1_PreRender" DataSourceID="EntityDataSourceCustomers">
                    <LayoutTemplate>
                        <div class="RadDataForm RadDataForm_<%# Container.Skin %> rdfLeftAligned rdfNoFieldHint">
                            <div id="itemPlaceholder" runat="server"></div>
                            <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadDataForm1">
                                <Fields>
                                    <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                    <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                    <telerik:RadDataPagerTemplatePageField>
                                        <PagerTemplate>
                                            <div class="rdpPagerLabel">
                                                <label>Contact <strong><%#Container.Owner.StartRowIndex+1%></strong> of <strong><%# Container.Owner.TotalRowCount%></strong></label>
                                            </div>
                                        </PagerTemplate>
                                    </telerik:RadDataPagerTemplatePageField>
                                </Fields>
                            </telerik:RadDataPager>
                        </div>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <fieldset class="rdfFieldset rdfBorders">
                            <legend class="rdfLegend">Company Name: <%#Eval("CompanyName")%></legend>
                            <div class="rdfRow">
                                <asp:Label runat="server" ID="ProductIDLabel2" CssClass="rdfLabel rdfBlock" Text="Name:"></asp:Label>
                                <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("ContactName") %>' runat="server" ID="ProductIDLabel1" />
                            </div>
                            <div class="rdfRow">
                                <asp:Label runat="server" ID="SupplierIDLabel2" CssClass="rdfLabel rdfBlock" Text="Title:"></asp:Label>
                                <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("ContactTitle") %>' runat="server" ID="SupplierIDLabel1" />
                            </div>
                            <div class="rdfRow">
                                <asp:Label runat="server" ID="CategoryIDLabel2" CssClass="rdfLabel rdfBlock" Text="City:"></asp:Label>
                                <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("City") %>' runat="server" ID="CategoryIDLabel1" />
                            </div>
                            <div class="rdfRow">
                                <asp:Label runat="server" ID="UnitPriceLabel2" CssClass="rdfLabel rdfBlock" Text="Country:"></asp:Label>
                                <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("Country") %>' runat="server" ID="UnitPriceLabel1" />
                            </div>
                            <div class="rdfRow">
                                <asp:Label runat="server" ID="ReorderLevelLabel2" CssClass="rdfLabel rdfBlock" Text="Phone:"></asp:Label>
                                <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("Phone") %>' runat="server" ID="ReorderLevelLabel1" />
                            </div>
                        </fieldset>
                    </ItemTemplate>
                </telerik:RadDataForm>
            </telerik:RadAjaxPanel>
        </div>
        <div class="demo-container size-custom">
            <h3>Using NeedDataSource event handler</h3>

            <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" Width="521px">
                <telerik:RadDataForm RenderMode="Lightweight" runat="server" ID="RadDataForm2" OnPreRender="RadDataForm2_PreRender" OnNeedDataSource="RadDataForm2_NeedDataSource">
                    <LayoutTemplate>
                        <div class="RadDataForm RadDataForm_<%# Container.Skin %> rdfLeftAligned rdfNoFieldHint">
                            <div id="itemPlaceholder" runat="server"></div>
                            <telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager2" runat="server" PagedControlID="RadDataForm2">
                                <Fields>
                                    <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                    <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                    <telerik:RadDataPagerTemplatePageField>
                                        <PagerTemplate>
                                            <div class="rdpPagerLabel">
                                                <label>Contact <strong><%#Container.Owner.StartRowIndex+1%></strong> of <strong><%# Container.Owner.TotalRowCount%></strong></label>
                                            </div>
                                        </PagerTemplate>
                                    </telerik:RadDataPagerTemplatePageField>
                                </Fields>
                            </telerik:RadDataPager>
                        </div>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <fieldset class="rdfFieldset rdfBorders">
                            <legend class="rdfLegend">Company Name: <%#Eval("CompanyName")%></legend>
                            <div class="rdfRow">
                                <asp:Label runat="server" ID="ProductIDLabel2" CssClass="rdfLabel rdfBlock" Text="Name:"></asp:Label>
                                <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("ContactName") %>' runat="server" ID="ProductIDLabel1" />
                            </div>
                            <div class="rdfRow">
                                <asp:Label runat="server" ID="SupplierIDLabel2" CssClass="rdfLabel rdfBlock" Text="Title:"></asp:Label>
                                <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("ContactTitle") %>' runat="server" ID="SupplierIDLabel1" />
                            </div>
                            <div class="rdfRow">
                                <asp:Label runat="server" ID="CategoryIDLabel2" CssClass="rdfLabel rdfBlock" Text="City:"></asp:Label>
                                <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("City") %>' runat="server" ID="CategoryIDLabel1" />
                            </div>
                            <div class="rdfRow">
                                <asp:Label runat="server" ID="UnitPriceLabel2" CssClass="rdfLabel rdfBlock" Text="Country:"></asp:Label>
                                <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("Country") %>' runat="server" ID="UnitPriceLabel1" />
                            </div>
                            <div class="rdfRow">
                                <asp:Label runat="server" ID="ReorderLevelLabel2" CssClass="rdfLabel rdfBlock" Text="Phone:"></asp:Label>
                                <asp:Label CssClass="rdfFieldValue" Text='<%# Eval("Phone") %>' runat="server" ID="ReorderLevelLabel1" />
                            </div>
                        </fieldset>
                    </ItemTemplate>
                </telerik:RadDataForm>
            </telerik:RadAjaxPanel>
        </div>
    </div>
    <asp:EntityDataSource ID="EntityDataSourceCustomers" runat="server" ConnectionString="name=TelerikReadOnlyEntities"
        DefaultContainerName="TelerikReadOnlyEntities" EntitySetName="CustomerPhotos"
        EntityTypeFilter="CustomerPhoto">
    </asp:EntityDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance