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:
View Example
<%@ 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 >
<%@ 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 >
<%@ 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 >
<%@ 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 >