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

Content Template

Next database reset in 0 hours, 25 minutes, 41 seconds
Contact NameCompany NameAddressCountry
 Page 4 of 7, items 40 to 52 of 91.
Daniel ToniniLa corne d'abondance67, avenue de l'EuropeFrance
Annette RouletLa maison d'Asie1 rue Alsace-LorraineFrance
Yoshi TannamuriLaughing Bacchus Wine Cellars1900 Oak St.Canada
John SteelLazy K Kountry Store12 Orchestra TerraceUSA
Renate MessnerLehmanns MarktstandMagazinweg 7Germany
Jaime YorresLet's Stop N Shop87 Polk St. Suite 5USA
Carlos GonzálezLILA-SupermercadoCarrera 52 con Ave. Bolívar #65-98 Llano LargoVenezuela
Felipe IzquierdoLINO-DelicatesesAve. 5 de Mayo PorlamarVenezuela
Fran WilsonLonesome Pine Restaurant89 Chiaroscuro Rd.USA
Giovanni RovelliMagazzini Alimentari RiunitiVia Ludovico il Moro 22Italy
Catherine DeweyMaison DeweyRue Joseph-Bens 532Belgium
Jean FresnièreMère Paillarde43 rue St. LaurentCanada
Alexander FeuerMorgenstern GesundkostHeerstr. 22Germany

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