Grid View for ASP.NET Web Forms - How to show a popup when a user clicks a hyperlink in a grid column's DataItemTemplate

This example shows how to create a grid that contains hyperlinks in one of its column's DataItemTemplate. When a user clicks a hyperlink, a popup dialog (ASPxPopupControl) is shown.

Hyperlink Item Popup

Implementation Details

In this example, the Popup Control's ContentUrl property value is calculated in the ASPxHyperLink's Init event handler based on a data row's field value and the base URL value stored in the session.

The handler builds a JavaScript function that assigns the calculated ContentUrl value to the Popup Control on the client when a user clicks the link:

C#
protected void hyperLink_Init(object sender, EventArgs e) {  
    ASPxHyperLink link = (ASPxHyperLink)sender;  

    GridViewDataItemTemplateContainer templateContainer = (GridViewDataItemTemplateContainer)link.NamingContainer;  

    int rowVisibleIndex = templateContainer.VisibleIndex;  
    string ean13 = templateContainer.Grid.GetRowValues(rowVisibleIndex, "EAN13").ToString();  
    string contentUrl = string.Format("{0}?EAN13={1}", Session["baseURL"], ean13);  

    link.NavigateUrl = "javascript:void(0);";  
    link.Text = string.Format("More Info: EAN13 - {0}", ean13);  
    link.ClientSideEvents.Click = string.Format("function(s, e) {{ OnMoreInfoClick('{0}'); }}", contentUrl);  
}

Documentation

Popup Control

More Examples

Example Code

Solution/Default.aspx

ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Solution.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Grid View for ASP.NET Web Forms - How to show a popup when a user clicks a hyperlink in a grid column's DataItemTemplate</title>
    <script type="text/javascript" language="javascript">
        function OnMoreInfoClick(contentUrl) {
            clientPopupControl.SetContentUrl(contentUrl);
            clientPopupControl.Show();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <dx:ASPxGridView ID="grid" runat="server" AutoGenerateColumns="False" DataSourceID="ds"
                KeyFieldName="ProductID">
                <Columns>
                    <dx:GridViewDataTextColumn FieldName="ProductID" ReadOnly="True" VisibleIndex="0">
                        <EditFormSettings Visible="False" />
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="1">
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="QuantityPerUnit" VisibleIndex="2">
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="3">
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataCheckColumn FieldName="Discontinued" VisibleIndex="4">
                    </dx:GridViewDataCheckColumn>
                    <dx:GridViewDataTextColumn FieldName="EAN13" VisibleIndex="5">
                    </dx:GridViewDataTextColumn>
                    <dx:GridViewDataTextColumn Caption="More Info" UnboundType="String" VisibleIndex="6">
                        <DataItemTemplate>
                            <dx:ASPxHyperLink ID="hyperLink" runat="server" OnInit="hyperLink_Init">
                            </dx:ASPxHyperLink>
                        </DataItemTemplate>
                    </dx:GridViewDataTextColumn>
                </Columns>
            </dx:ASPxGridView>
        </div>
        <dx:ASPxPopupControl ID="popupControl" runat="server" ClientInstanceName="clientPopupControl" CloseAction="CloseButton" Height="250px" Modal="True" Width="1000px" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" HeaderText="Product Details">
            <ContentCollection>
                <dx:PopupControlContentControl runat="server">
                </dx:PopupControlContentControl>
            </ContentCollection>
        </dx:ASPxPopupControl>
        <asp:AccessDataSource ID="ds" runat="server" DataFile="~/App_Data/nwind.mdb"
            SelectCommand="SELECT [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [Discontinued], [EAN13] FROM [Products]">
        </asp:AccessDataSource>
    </form>
</body>
</html>

Solution/Default.aspx.cs(vb)

C#
VB.NET

C#
using DevExpress.Web;
using System;

namespace Solution {
    public partial class Default : System.Web.UI.Page {
        protected void Page_Init(object sender, EventArgs e) { 
            if (Session["baseURL"] == null)
                Session["baseURL"] = "Products.aspx";
        }
        protected void hyperLink_Init(object sender, EventArgs e) {
            ASPxHyperLink link = (ASPxHyperLink)sender;

            GridViewDataItemTemplateContainer templateContainer = (GridViewDataItemTemplateContainer)link.NamingContainer;

            int rowVisibleIndex = templateContainer.VisibleIndex;
            string ean13 = templateContainer.Grid.GetRowValues(rowVisibleIndex, "EAN13").ToString();
            string contentUrl = string.Format("{0}?EAN13={1}", Session["baseURL"], ean13);

            link.NavigateUrl = "javascript:void(0);";
            link.Text = string.Format("More Info: EAN13 - {0}", ean13);
            link.ClientSideEvents.Click = string.Format("function(s, e) {{ OnMoreInfoClick('{0}'); }}", contentUrl);
        }
    }
}

Visual Basic
Imports DevExpress.Web
Imports System

Namespace Solution

    Public Partial Class [Default]
        Inherits Web.UI.Page

        Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
            If Session("baseURL") Is Nothing Then Session("baseURL") = "Products.aspx"
        End Sub

        Protected Sub hyperLink_Init(ByVal sender As Object, ByVal e As EventArgs)
            Dim link As ASPxHyperLink = CType(sender, ASPxHyperLink)
            Dim templateContainer As GridViewDataItemTemplateContainer = CType(link.NamingContainer, GridViewDataItemTemplateContainer)
            Dim rowVisibleIndex As Integer = templateContainer.VisibleIndex
            Dim ean13 As String = templateContainer.Grid.GetRowValues(rowVisibleIndex, "EAN13").ToString()
            Dim contentUrl As String = String.Format("{0}?EAN13={1}", Session("baseURL"), ean13)
            link.NavigateUrl = "javascript:void(0);"
            link.Text = String.Format("More Info: EAN13 - {0}", ean13)
            link.ClientSideEvents.Click = String.Format("function(s, e) {{ OnMoreInfoClick('{0}'); }}", contentUrl)
        End Sub
    End Class
End Namespace

Solution/Products.aspx

ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Products.aspx.cs" Inherits="Solution.Products" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxGridView ID="grid" runat="server" AutoGenerateColumns="False" DataSourceID="ds" KeyFieldName="ProductID">
            <Columns>
                <dx:GridViewDataTextColumn FieldName="ProductID" ReadOnly="True" VisibleIndex="0">
                    <EditFormSettings Visible="False" />
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="1">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="SupplierID" VisibleIndex="2">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="CategoryID" VisibleIndex="3">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="QuantityPerUnit" VisibleIndex="4">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="5">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="UnitsInStock" VisibleIndex="6">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="UnitsOnOrder" VisibleIndex="7">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="ReorderLevel" VisibleIndex="8">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataCheckColumn FieldName="Discontinued" VisibleIndex="9">
                </dx:GridViewDataCheckColumn>
                <dx:GridViewDataTextColumn FieldName="EAN13" VisibleIndex="10">
                </dx:GridViewDataTextColumn>
            </Columns>
        </dx:ASPxGridView>
    </div>
        <asp:AccessDataSource ID="ds" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT [ProductID], [ProductName], [SupplierID], [CategoryID], [QuantityPerUnit], [UnitPrice], [UnitsInStock], [UnitsOnOrder], [ReorderLevel], [Discontinued], [EAN13] FROM [Products] WHERE ([EAN13] = ?)">
            <SelectParameters>
                <asp:QueryStringParameter Name="EAN13" QueryStringField="EAN13" Type="String" />
            </SelectParameters>
        </asp:AccessDataSource>
    </form>
</body>
</html>

Solution/Products.aspx.cs(vb)

C#
VB.NET

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Solution {
    public partial class Products : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {

        }
    }
}

Visual Basic
Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls

Namespace Solution

    Public Partial Class Products
        Inherits Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        End Sub
    End Class
End Namespace

Mike (DevExpress)

last modified 7 years ago

Modified: April 16, 2018 10:55 AM

Platform: ASP.NET Web Forms

Product: ASPxGridView

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.