This example shows how to create a grid that contains hyperlinks in one of its columns. When a user clicks a hyperlink, a separate popup dialog (ASPxPopupControl) is shown.
Call the client-side SetContentUrl method to embed a web page to be displayed in the popup.
ASPxfunction ShowDetailPopup(customerID) {
popup.SetContentUrl('Orders.aspx?id=' + customerID);
popup.Show();
}
<dx:GridViewDataHyperLinkColumn FieldName="CustomerID"
ReadOnly="True"
VisibleIndex="0">
<PropertiesHyperLinkEdit NavigateUrlFormatString="javascript:ShowDetailPopup('{0}');"
Text="Show Orders">
</PropertiesHyperLinkEdit>
</dx:GridViewDataHyperLinkColumn>
Files to Look At
- Default.aspx (VB: Default.aspx)
- Orders.aspx (VB: Orders.aspx)
Documentation
More Examples
- How to show popup by clicking a hyperlink in grid column's DataItemTemplate
- How to show detail information in a separate ASPxGridView
- How to display master-detail tables in two grids on separate tabs of a PageControl
- Popup Control for ASP.NET Web Forms - How to show a pop-up window
- How to display detail data within a popup window using ASPxPopupControl content elements
- GridView - How to open popup on a hyperlink click (MVC)
- How to display detail data within a popup window using ContentUrl (MVC)
Example Code
ShowDetailInPopup/Default.aspx
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>How to display detail data within a popup window</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:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" KeyFieldName="CustomerID">
<Columns>
<dx:GridViewDataHyperLinkColumn FieldName="CustomerID" ReadOnly="True" VisibleIndex="0">
<PropertiesHyperLinkEdit NavigateUrlFormatString="javascript:ShowDetailPopup('{0}');"
Text="Show Orders">
</PropertiesHyperLinkEdit>
</dx:GridViewDataHyperLinkColumn>
<dx:GridViewDataTextColumn FieldName="CompanyName" VisibleIndex="1">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ContactName" VisibleIndex="2">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ContactTitle" VisibleIndex="3">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Address" VisibleIndex="4">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Country" VisibleIndex="5">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="City" VisibleIndex="6">
</dx:GridViewDataTextColumn>
</Columns>
</dx:ASPxGridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [Country], [City] FROM [Customers]">
</asp:SqlDataSource>
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" ClientInstanceName="popup" Width="800px" Height="400px">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server">
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>
</div>
</form>
</body>
</html>
ShowDetailInPopup/Orders.aspx
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Orders.aspx.cs" Inherits="Orders" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1" KeyFieldName="OrderID" Width="100%">
<Columns>
<dx:GridViewDataTextColumn FieldName="OrderID" ReadOnly="True" VisibleIndex="0">
<EditFormSettings Visible="False" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="CustomerID" VisibleIndex="1">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Freight" VisibleIndex="2">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ShipName" VisibleIndex="3">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ShipAddress" VisibleIndex="4">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ShipCity" VisibleIndex="5">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ShipCountry" VisibleIndex="6">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="ShipPostalCode" VisibleIndex="7">
</dx:GridViewDataTextColumn>
<dx:GridViewDataDateColumn FieldName="ShippedDate" VisibleIndex="8">
</dx:GridViewDataDateColumn>
</Columns>
</dx:ASPxGridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
FilterExpression="CustomerID='{0}'" SelectCommand="SELECT [OrderID], [CustomerID], [Freight], [ShipName], [ShipAddress], [ShipCity], [ShipCountry], [ShipPostalCode], [ShippedDate] FROM [Orders]">
<FilterParameters>
<asp:QueryStringParameter Name="CustomerID" QueryStringField="id" />
</FilterParameters>
</asp:SqlDataSource>
</div>
</form>
</body>
</html>