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

Content Template

Next database reset in 1 hours, 52 minutes, 4 seconds
Contact NameCompany NameAddressCountry
huh?aa  

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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Window.InternalContent.DefaultVB" %>

<!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