This example demonstrates how to configure a grid column's data item template to display a hyperlink based on several cell values.
For an example on how to implement a similar functionality based on an unbound GridViewDataHyperLinkColumn, refer to the following example: Grid View for ASP.NET Web Forms - How to create a HyperLink column whose URL depends on several column values
Implementation Details
The example application illustrates a common use case scenario when values from several data fields are used to generate the URL and/or display text of a hyperlink displayed within a grid cell.
Two equivalent techniques are demonstrated:
- Based on the ASPxHyperLink control. The control's NavigateUrl property value includes the processed row's KeyValue property value.
- Based on the
<a>
HTML element. The serverGetRowValue
method calculates thehref
parameter's value.
Files to Review
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
More Examples
- Grid View for ASP.NET Web Forms - How to create a HyperLink column whose URL depends on several column values
- Grid View for ASP.NET Web Forms - Create a DataItemTemplate for a column at Runtime
- Grid View for ASP.NET Web Forms - Create a DataItemTemplate for a column at Runtime
Example Code
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>How to display a hyperlink based on several cell values</title>
</head>
<body>
<form id="form1" runat="server">
<dx:aspxgridview id="grid" clientinstancename="grid" runat="server" datasourceid="AccessDataSource2" keyfieldname="CategoryID" previewfieldname="Notes" autogeneratecolumns="False" enablerowscache="False">
<columns>
<dx:gridviewdatatextcolumn fieldname="CategoryID" readonly="True">
<editformsettings visible="False" />
</dx:gridviewdatatextcolumn>
<dx:gridviewdatatextcolumn fieldname="CategoryName">
</dx:gridviewdatatextcolumn>
<dx:gridviewdatatextcolumn fieldname="Description">
</dx:gridviewdatatextcolumn>
<dx:gridviewdatatextcolumn caption="ASPxHyperlink in DataItemTemplate">
<dataitemtemplate>
<dx:aspxhyperlink runat="server" id="keyFieldLink" oninit="keyFieldLink_Init"></dx:aspxhyperlink>
</dataitemtemplate>
</dx:gridviewdatatextcolumn>
<dx:gridviewdatatextcolumn caption="The 'a' tag in DataItemTemplate">
<dataitemtemplate>
<a id="clickElement" target="_blank" href="Default2.aspx?category=<%# GetRowValue(Container)%>"><%# "Show New Form, CategoryName = " + Eval("CategoryName").ToString()%></a>
</dataitemtemplate>
</dx:gridviewdatatextcolumn>
</columns>
</dx:aspxgridview>
<asp:AccessDataSource ID="AccessDataSource2" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT * FROM [Categories]"></asp:AccessDataSource>
</form>
</body>
</html>
C#using DevExpress.Web;
using System;
namespace Solution {
public partial class Default : System.Web.UI.Page {
protected string GetRowValue(GridViewDataItemTemplateContainer container) {
return container.Grid.GetRowValuesByKeyValue(container.KeyValue, "CategoryName").ToString();
}
protected void keyFieldLink_Init(object sender, EventArgs e) {
ASPxHyperLink link = sender as ASPxHyperLink;
GridViewDataItemTemplateContainer container = link.NamingContainer as GridViewDataItemTemplateContainer;
link.Text = "Show New Form, Key Field = " + container.KeyValue;
link.Target = "_blank";
link.NavigateUrl = "Default2.aspx?id=" + container.KeyValue;
}
}
}