aspnet-115515-components-card-view-examples-how-to-display-detail-data-within-a-popup-window.md
This example illustrates the Customers grid with a hyperlink column. When an end user clicks on a hyperlink, it opens a popup window that displays detail data - orders - for a given customer. The client-side SetContentUrl method is used to display each order on a separate web page embedded in the ASPxPopupControl.
For more information on how to display master-detail data with two controls, see the following help topics:
<%@ 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>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Orders : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) {
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) {
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Orders.aspx.cs" Inherits="Orders" %>
<%@ 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>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" KeyFieldName="OrderID">
<Columns>
<dx:CardViewTextColumn FieldName="OrderID" ReadOnly="True" Visible="False">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="CustomerID" VisibleIndex="0">
</dx:CardViewTextColumn>
<dx:CardViewDateColumn FieldName="OrderDate" VisibleIndex="1">
</dx:CardViewDateColumn>
</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 [OrderID], [CustomerID], [OrderDate], [ShipCity] FROM [Orders]"
FilterExpression="CustomerID='{0}'">
<FilterParameters>
<asp:QueryStringParameter Name="CustomerID" QueryStringField="id" />
</FilterParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
End Class
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Orders.aspx.vb" Inherits="Orders" %>
<%@ 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>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" KeyFieldName="OrderID">
<Columns>
<dx:CardViewTextColumn FieldName="OrderID" ReadOnly="True" Visible="False">
</dx:CardViewTextColumn>
<dx:CardViewTextColumn FieldName="CustomerID" VisibleIndex="0">
</dx:CardViewTextColumn>
<dx:CardViewDateColumn FieldName="OrderDate" VisibleIndex="1">
</dx:CardViewDateColumn>
</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 [OrderID], [CustomerID], [OrderDate], [ShipCity] FROM [Orders]"
FilterExpression="CustomerID='{0}'">
<FilterParameters>
<asp:QueryStringParameter Name="CustomerID" QueryStringField="id" />
</FilterParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Partial Public Class Orders
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
End Class
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" 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>