Content Template

Next database reset in 12 minutes, 38 seconds
Contact Name	Company Name	Address	Country
No records to display.
About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application
RadWindow as a Controls Container

Our ASP.NET Dialog Window can be used to hold internal content which is part of the same page in which it is declared. When used in this manner RadWindow acts as a standard container element and the content is declared between its <ContentTemplate> tags.

NOTES:
When used as a container the RadWindow is an INamingConatiner and behaves like such
You can dynamically add controls to the RadWindow from code-behind by adding them to its ContentContainer as shown below:

UserListDialog.ContentContainer.Controls.Add(new LiteralControl("Dynamic Control"));
To use the RadAjaxManager control in integration with a RadWindow as demonstrated in this example you should use a separate RadWindow control and not to wrap it in a RadWindowManager. As to using with the standard MS AJAX, it should be used as all other INamingContainers
Demo instructions

Select a row from the grid to see details in Telerik's ASP.NET Dialog Window and to edit them.
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Window.InternalContent.DefaultCS" %>
 
<!DOCTYPE html>
<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">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="DetailsView1" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="DetailsView1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="DetailsView1" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AllowPaging="True" Width="550" Height="555"
                         DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowAutomaticInserts="false">
            <PagerStyle Mode="NumericPages"></PagerStyle>
            <MasterTableView AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1"
                             Width="100%" Height="100%" PageSize="13">
                <Columns>
                    <telerik:GridBoundColumn DataField="CustomerID" ReadOnly="True" Visible="false" SortExpression="CustomerID"
                                             UniqueName="EmployeeID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ContactName" HeaderText="Contact Name" SortExpression="ContactName"
                                             UniqueName="ContactName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="CompanyName" HeaderText="Company Name" SortExpression="CompanyName"
                                             UniqueName="CompanyName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Address" HeaderText="Address" SortExpression="Address"
                                             UniqueName="CompanyName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Country" HeaderText="Country" SortExpression="Country"
                                             UniqueName="CompanyName">
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings EnablePostBackOnRowClick="true">
                <Selecting AllowRowSelect="true"></Selecting>
                <Scrolling AllowScroll="true" />
            </ClientSettings>
        </telerik:RadGrid>
        <telerik:RadWindow RenderMode="Lightweight" ID="UserListDialog" runat="server" Title="Editing record" Width="270"
                           Height="565" VisibleOnPageLoad="true" Behaviors="Minimize, Move, Resize, Maximize"
                           Left="590" EnableShadow="true">
            <ContentTemplate>
                <div style="text-align: center;">
                    <asp:DetailsView ID="DetailsView1" DataKeyNames="CustomerID" runat="server" AutoGenerateRows="False"
                                     DataSourceID="SqlDataSource2" Width="220px" Height="465px" BorderWidth="0"
                                     CellPadding="0" CellSpacing="7" GridLines="None" OnItemUpdated="DetailsView1_ItemUpdated">
                        <Fields>
                            <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <div style="border: 1px solid #999999; width: 180px; height: 150px; background-position: center;
                                         background-repeat: no-repeat; background-image: url('<%# Eval("CustomerID", "../../../Img/Northwind/Customers/{0}.jpg") %>');">
                                    </div>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <span class="title">Contact Name: </span>
                                    <asp:Label CssClass="info" ID="Name" runat="server" Text='<%# Eval("ContactName") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <span class="title">Contact Name: </span>
                                    <asp:TextBox ID="Name" runat="server" Text='<%# Bind("ContactName") %>'></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <span class="title">Company Name: </span>
                                    <asp:Label CssClass="info" ID="CompName" runat="server" Text='<%# Eval("CompanyName") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <span class="title">Company Name: </span>
                                    <asp:TextBox ID="CompName" runat="server" Text='<%# Bind("CompanyName") %>'></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <span class="title">Contact Title: </span>
                                    <asp:Label CssClass="info" ID="ContName" runat="server" Text='<%# Eval("ContactTitle") %>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <span class="title">Address: </span>
                                    <asp:Label CssClass="info" ID="Address" runat="server" Text='<%# Eval("Address") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <span class="title">Address: </span>
                                    <asp:TextBox ID="Address" runat="server" Text='<%# Bind("Address") %>'></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <span class="title">Country: </span>
                                    <asp:Label CssClass="info" ID="Country" runat="server" Text='<%# Eval("Country") %>'></asp:Label>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <span class="title">Country: </span>
                                    <asp:TextBox ID="Country" runat="server" Text='<%# Bind("Country") %>'></asp:TextBox>
                                </EditItemTemplate>
                            </asp:TemplateField>
                            <asp:CommandField ShowEditButton="true" ButtonType="Button" ItemStyle-HorizontalAlign="Center">
                            </asp:CommandField>
                        </Fields>
                    </asp:DetailsView>
                </div>
            </ContentTemplate>
        </telerik:RadWindow>
    </div>
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All"
                              EnableRoundedCorners="false" ControlsToSkip="GridFormDetailsViews, Zone"></telerik:RadFormDecorator>
    <asp:SqlDataSource ID="SqlDataSource1"
                       runat="server" SelectCommand="SELECT CustomerID, ContactName, CompanyName, ContactTitle, Address, Country FROM [Customers]"
                       ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>">
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server"
                       SelectCommand="SELECT CustomerID, ContactName, CompanyName, ContactTitle, Address, Country FROM [Customers] WHERE CustomerID = @CustomerID"
                       UpdateCommand="UPDATE [Customers] SET [ContactName] = @ContactName, [CompanyName] = @CompanyName, [ContactTitle] = @ContactTitle, [Address] = @Address,[Country] = @Country WHERE ([CustomerID] = @CustomerID)"
                       ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>">
        <UpdateParameters>
            <asp:Parameter Name="ContactName" Type="String"></asp:Parameter>
            <asp:Parameter Name="CompanyName" Type="String"></asp:Parameter>
            <asp:Parameter Name="ContactTitle" Type="String"></asp:Parameter>
            <asp:Parameter Name="Address" Type="String"></asp:Parameter>
            <asp:Parameter Name="Country" Type="String"></asp:Parameter>
            <asp:Parameter Name="CustomerID" Type="String"></asp:Parameter>
        </UpdateParameters>
        <SelectParameters>
            <asp:ControlParameter Name="CustomerID" ControlID="RadGrid1" PropertyName="SelectedValue"
                                  Type="String"></asp:ControlParameter>
        </SelectParameters>
    </asp:SqlDataSource>
    </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
Content Template

RadWindow as a Controls Container

Demo instructions

Related Resources

Support & Learning Resources

Find Assistance
