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

Content Template

Next database reset in 1 hours, 5 minutes, 44 seconds
Contact NameCompany NameAddressCountry
 Page 6 of 7, items 66 to 78 of 91.
Maurizio MoroniReggiani CaseificiStrada Provinciale 124Italy
Janete LimeiraRicardo AdocicadosAv. Copacabana, 267Brazil
Michael HolzRichter SupermarktGrenzacherweg 237Switzerland
Alejandra CaminoRomero y tomilloGran Vía, 1Spain
Jonas BergulfsenSanté GourmetErling Skakkes gate 78Norway
Jose PavarottiSave-a-lot Markets187 Suffolk Ln.USA
Hari KumarSeven Seas Imports90 Wadhurst Rd.UK
Jytte PetersenSimons bistroVinbæltet 34Denmark
Dominique PerrierSpécialités du monde25, rue LauristonFrance
Art BraunschweigerSplit Rail Beer & AleP.O. Box 555USA
Pascale CartrainSuprêmes délicesBoulevard Tirou, 255Belgium
Liz NixonThe Big Cheese89 Jefferson Way Suite 2USA
Liu WongThe Cracker Box55 Grizzly Peak Rd.USA

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