How to: Display Detail Data within a Popup Window

  • 3 min to read

This example contains a Customers grid with a hyperlink column. When the hyperlink is clicked, a popup window is opened to display detail data - orders - of a given customer. Orders is a separate web page embedded in the ASPxPopupControl via the client-side SetContentUrl method.See also:How to display master-detail data using two ASPxCardView controlsASPxCardView - How to display master-detail tables in two grids on separate tabs of a PageControl

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v15.2, Version=15.2.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function ShowDetailPopup(customerID) {
            popup.SetContentUrl('Orders.aspx?id=' + customerID);
            popup.Show();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" KeyFieldName="CustomerID">
            <Columns>
                <dx:CardViewTextColumn FieldName="CompanyName" VisibleIndex="2">
                </dx:CardViewTextColumn>
                <dx:CardViewTextColumn FieldName="ContactName" VisibleIndex="3">
                </dx:CardViewTextColumn>
                <dx:CardViewTextColumn FieldName="City" VisibleIndex="4">
                </dx:CardViewTextColumn>
                <dx:CardViewHyperLinkColumn FieldName="CustomerID" ReadOnly="True" VisibleIndex="0">
                    <PropertiesHyperLinkEdit NavigateUrlFormatString="javascript:ShowDetailPopup('{0}');"
                        Text="Show Orders">
                    </PropertiesHyperLinkEdit>
                </dx:CardViewHyperLinkColumn>
            </Columns>
        </dx:ASPxCardView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\nwind.mdb;Persist Security Info=True" ProviderName="System.Data.OleDb" SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [City] FROM [Customers]"></asp:SqlDataSource>
        <dx:ASPxPopupControl ID="ASPxPopupControl1" ClientInstanceName="popup" Width="800px" Height="400px" runat="server">
            <ContentCollection>
                <dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server"></dx:PopupControlContentControl>
            </ContentCollection>

        </dx:ASPxPopupControl>
    </div>
    </form>
</body>
</html>