How to: Show Hyperlinks in Grid Cells

• Jun 07, 2019
• 3 minutes to read

This example demonstrates how to show hyperlinks in a grid. To accomplish this task, it is necessary to create a new DataTemplate with a Hyperlink, and assign it to the ColumnBase.CellTemplate property.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-use-hyperlinks-in-gridcontrol-cells-e1379.

MainWindow.xaml

<dx:DXWindow x:Class="fGrid11.MainWindow" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:local="clr-namespace:fGrid11" 
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" 
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 
        xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
        Title="HyperlinkEdit Example" Height="400" Width="500"
        DataContext="{dxmvvm:ViewModelSource Type=local:MyViewModel}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <dxe:HyperlinkEdit VerticalAlignment="Center" HorizontalAlignment="Center" EditValue="https://www.devexpress.com/" AllowAutoNavigate="True"/>
        <dxg:GridControl Name="gridControl1" DataSource="{Binding Items}" Grid.Row="1">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="ID" Width="80" />
                <dxg:GridColumn FieldName="HelpLink">
                    <dxg:GridColumn.CellTemplate>
                        <DataTemplate>
                            <dxe:HyperlinkEdit Name="PART_Editor" AllowAutoNavigate="True" Text="{Binding RowData.Row.Name}" />
                        </DataTemplate>
                    </dxg:GridColumn.CellTemplate>
                </dxg:GridColumn>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView AutoWidth="True"/>
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</dx:DXWindow>

MainWindow.xaml.cs

using System.Windows;

namespace fGrid11 {
    public partial class MainWindow : DXWindow {
        public MainWindow() {
            InitializeComponent();
        }
    }
}

ViewModel.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;

namespace fGrid11 {
    public class MyViewModel {
        public MyViewModel() {
            CreateList();
        }
        public ObservableCollection<Item> Items { get; set; }
        void CreateList() {
            Items = new ObservableCollection<Item>();
            Items.Add(new Item() { ID = 1, Name = "HyperlinkEdit", HelpLink = "https://documentation.devexpress.com/#WPF/CustomDocument117458" });
            Items.Add(new Item() { ID = 2, Name = "GridControl", HelpLink = "https://documentation.devexpress.com/#WPF/clsDevExpressXpfGridGridControltopic" });
            Items.Add(new Item() { ID = 3, Name = "DiagramControl", HelpLink = "https://documentation.devexpress.com/#WPF/CustomDocument115046" });
            Items.Add(new Item() { ID = 4, Name = "TextEdit", HelpLink = "https://documentation.devexpress.com/#WPF/clsDevExpressXpfEditorsTextEdittopic" });
            Items.Add(new Item() { ID = 5, Name = "DockLayoutManager", HelpLink = "https://documentation.devexpress.com/#WPF/CustomDocument6820" });
            Items.Add(new Item() { ID = 6, Name = "RibbonControl", HelpLink = "https://documentation.devexpress.com/#WPF/CustomDocument7954" });
            Items.Add(new Item() { ID = 7, Name = "PropertyGridControl", HelpLink = "https://documentation.devexpress.com/#WPF/CustomDocument15640" });
        }
    }

    public class Item {
        public int ID {
            get;
            set;
        }
        public string Name {
            get;
            set;
        }
        public string HelpLink {
            get;
            set;
        }
    }
}

Application.xaml

<Application x:Class="fGrid11.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

MainWindow.xaml.vb

Imports System.Windows

Namespace fGrid11
    Partial Public Class MainWindow
        Inherits DXWindow

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace

Application.xaml.vb

Imports System.Windows

Namespace fGrid11
    Partial Public Class App
        Inherits Application

    End Class
End Namespace

ViewModel.vb

Imports System
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports System.Linq
Imports System.Text

Namespace fGrid11
    Public Class MyViewModel
        Public Sub New()
            CreateList()
        End Sub
        Public Property Items() As ObservableCollection(Of Item)
        Private Sub CreateList()
            Items = New ObservableCollection(Of Item)()
            Items.Add(New Item() With {.ID = 1, .Name = "HyperlinkEdit", .HelpLink = "https://documentation.devexpress.com/#WPF/CustomDocument117458"})
            Items.Add(New Item() With {.ID = 2, .Name = "GridControl", .HelpLink = "https://documentation.devexpress.com/#WPF/clsDevExpressXpfGridGridControltopic"})
            Items.Add(New Item() With {.ID = 3, .Name = "DiagramControl", .HelpLink = "https://documentation.devexpress.com/#WPF/CustomDocument115046"})
            Items.Add(New Item() With {.ID = 4, .Name = "TextEdit", .HelpLink = "https://documentation.devexpress.com/#WPF/clsDevExpressXpfEditorsTextEdittopic"})
            Items.Add(New Item() With {.ID = 5, .Name = "DockLayoutManager", .HelpLink = "https://documentation.devexpress.com/#WPF/CustomDocument6820"})
            Items.Add(New Item() With {.ID = 6, .Name = "RibbonControl", .HelpLink = "https://documentation.devexpress.com/#WPF/CustomDocument7954"})
            Items.Add(New Item() With {.ID = 7, .Name = "PropertyGridControl", .HelpLink = "https://documentation.devexpress.com/#WPF/CustomDocument15640"})
        End Sub
    End Class

    Public Class Item
        Public Property ID() As Integer
        Public Property Name() As String
        Public Property HelpLink() As String
    End Class
End Namespace