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

Content Template

Next database reset in 1 hours, 53 minutes, 51 seconds
Contact NameCompany NameAddressCountry
 Page 5 of 7, items 53 to 65 of 91.
Simon CrowtherNorth/SouthSouth House 300 QueensbridgeUK
Yvonne MoncadaOcéano Atlántico Ltda.Ing. Gustavo Moncada 8585 Piso 20-AArgentina
Rene PhillipsOld World Delicatessen2743 Bering St.USA
Henriette PfalzheimOttilies KäseladenMehrheimerstr. 369Germany
Marie BertrandParis spécialités265, boulevard CharonneFrance
Guillermo FernándezPericles Comidas clásicasCalle Dr. Jorge Cash 321Mexico
Georg PippsPiccolo und mehrGeislweg 14Austria
Isabel de CastroPrincesa Isabel VinhosEstrada da saúde n. 58Portugal
Bernardo BatistaQue DelíciaRua da Panificadora, 12Brazil
Lúcia CarvalhoQueen CozinhaAlameda dos Canàrios, 891Brazil
Horst KlossQUICK-StopTaucherstraße 10Germany
Sergio GutiérrezRancho grandeAv. del Libertador 900Argentina
Paula WilsonRattlesnake Canyon Grocery2817 Milton Dr.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