FormDecorator - Decorate GridView, FormView and DetailsView

DetailsView

CustomerIDALFKI
CompanyNameAlfreds Futterkiste
AddressObere Str. 57
CityBerlin
PostalCode12209
CountryGermany
12345678910...

FormView

OrderID: 10643
CustomerID: ALFKI
EmployeeID: 6
OrderDate: 8/25/1997 12:00:00 AM
123456

GridView

SelectOrderIDProductIDDiscountQuantityUnitPrice
Select10643280.251545.60
Select10643390.252118.00
12
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

You can easily configure up the RadFormDecorator to decorate GridView, FormView and DetailsView controls. Simply set the DecoratedControls property to GridFormDetailsViews and the controls will be decorated. Changing the FormDecorator's Skin property to any of the built-in skins will also change the look of the controls.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FormDecorator.DecorateGridFormDetailsViews.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ 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-containers demo-container">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="GridFormDetailsViews"
                DecorationZoneID="rfd-demo-zone"></telerik:RadFormDecorator>
            <div id="rfd-demo-zone">
                <div class="demo-container no-bg">
                    <h3>DetailsView</h3>
                    <asp:DetailsView ID="DetailsView1" DataSourceID="DetailsViewDataSource" DataKeyNames="CustomerID"
                        AutoGenerateInsertButton="false" AutoGenerateRows="true" AllowPaging="true" runat="server"
                        Width="300" Style="float: left; margin-right: 30px;">
                    </asp:DetailsView>

                    <asp:SqlDataSource runat="server" ID="DetailsViewDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                        ProviderName="System.Data.SqlClient" SelectCommand="Select [CustomerID], [CompanyName], [Address], [City], [PostalCode], [Country] From [Customers]"
                        OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues" />
                </div>
                <div class="demo-container no-bg">
                    <h3>FormView</h3>
                    <asp:FormView ID="FormView1" runat="server" AllowPaging="True" DataKeyNames="OrderID" DefaultMode="ReadOnly"
                        DataSourceID="FormViewDataSource" Width="300" Style="float: left;">
                        <ItemTemplate>
                            OrderID:
                    <asp:Label ID="OrderIDLabel" runat="server" Text='<%# Eval("OrderID") %>'></asp:Label><br />
                            CustomerID:
                    <asp:Label ID="CustomerIDLabel" runat="server" Text='<%# Bind("CustomerID") %>'>
                    </asp:Label><br />
                            EmployeeID:
                    <asp:Label ID="EmployeeIDLabel" runat="server" Text='<%# Bind("EmployeeID") %>'>
                    </asp:Label><br />
                            OrderDate:
                    <asp:Label ID="OrderDateLabel" runat="server" Text='<%# Bind("OrderDate") %>'></asp:Label><br />
                        </ItemTemplate>
                    </asp:FormView>

                    <asp:SqlDataSource runat="server" ID="FormViewDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID],[OrderDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)"
                        OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues">
                        <SelectParameters>
                            <asp:ControlParameter ControlID="DetailsView1" Name="CustomerID" PropertyName="SelectedValue"
                                Type="String"></asp:ControlParameter>
                        </SelectParameters>
                    </asp:SqlDataSource>

                </div>
                <div class="demo-container no-bg">
                    <h3>GridView</h3>
                    <asp:GridView ID="GridView1" runat="server" DataKeyNames="OrderID,ProductID" DataSourceID="GridViewDataSource"
                        AllowPaging="true" PageSize="2" Width="400">
                        <Columns>
                            <asp:CommandField ShowEditButton="false" ShowSelectButton="True" HeaderText="Select"></asp:CommandField>
                        </Columns>
                    </asp:GridView>

                    <asp:SqlDataSource runat="server" ID="GridViewDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [OrderID], [ProductID], [Discount],[Quantity], [UnitPrice] FROM [Order Details] WHERE ([OrderID] = @OrderID)"
                        OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues">
                        <SelectParameters>
                            <asp:ControlParameter ControlID="FormView1" Name="OrderID" PropertyName="SelectedValue"
                                Type="Int32"></asp:ControlParameter>
                        </SelectParameters>
                    </asp:SqlDataSource>
                </div>
            </div>
        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?