We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Hyperlinks in autogenerated column of data grid

Hello Syncfusion,

Please could you help me with a task I am trying to complete. I am using the latest version of syncfusion tools in WPF, using the sfdatagrid to display a set of items from a datasource.

What I would like to do is make one of the columns of my grid hyperlinks so that the cursor would change appropriately when moving over the cells in that column and a method would fire on clicking each hyperlink.

I have modified an existing syncfusion demo project to show a little bit more what I need.
Please could you give me some pointers on how to do this?
Please could it be as MVVM as possible, ideally I'd like the cells to fire a bound command on click (but I'm not sure if that requires MVVMLight:eventtocommand and I've not had much success with that in the past.)

Thankyou very much for your help in advance,
Anya Hope

Attachment: WPF1691503399_fd73c749.zip

5 Replies

SV Srinivasan Vasu Syncfusion Team June 1, 2017 05:42 PM UTC

Hi Anya, 
Thanks for contacting Sycfusion support. 
We have analyzed your query and we have modified your sample as per your requirement. In sample, we have changed the GridTextColumn text shown as HyperLink text by setting cellstyle.  
Also, we have triggered the SfDataGrid.CellTapped event while clicking the text to shown a messagebox, which will be achieved by MVVM pattern using ICommand. 
Please refer the code example. 
        <Style TargetType="syncfusion:GridCell" x:Key="style1">  
            <Setter Property="TextBlock.Foreground" Value="#FF2A6DCD"/>             
  if (e.Column.MappingName == "EmployeeArea") 
                e.Column.AllowFocus = true; 
                (e.Column as GridTextColumn).TextDecorations = TextDecorations.Underline; 
                e.Column.CellStyle = Application.Current.FindResource("style1") as Style; 
Please download the sample from the below location. 

UN Unknown Syncfusion Team June 2, 2017 07:55 AM UTC

Thank you very much for your really quick reply.

That's excellent and has done exactly what I wanted, thank you. I will have a quick look to see if I can change the cursor in those cells but the functionality I need is there.

Thanks again,

BR Balamurugan Rajaraman Syncfusion Team June 5, 2017 12:35 PM UTC

Hi Anya 
We are sorry for the inconvenience 
We have checked your query “How to get the cell text while mouse cursor hover on that cell”. You can able to achieve you requirement by raising the MouseMove event of the SfDataGrid. In that event you can able to achieve your requirement as like the below provided code sample. 
Code example 
var visualcontainer = this.AssociatedObject.GetVisualContainer(); 
// get the row and column index based on the pointer position  
var rowColumnIndex = visualcontainer.PointToCellRowColumnIndex(e.GetPosition(visualcontainer)); 
if (rowColumnIndex.IsEmpty) 
var columnName = AssociatedObject.Columns[rowColumnIndex.ColumnIndex].MappingName; 
if (columnName==null|| columnName != "EmployeeArea") 
var colindex = this.AssociatedObject.ResolveToGridVisibleColumnIndex(rowColumnIndex.ColumnIndex); 
if (colindex < 0 || colindex >= this.AssociatedObject.Columns.Count) 
var recordindex = this.AssociatedObject.ResolveToRecordIndex(rowColumnIndex.RowIndex); 
if (recordindex < 0) 
var recordentry = this.AssociatedObject.View.GroupDescriptions.Count == 0 ? this.AssociatedObject.View.Records[recordindex] : this.AssociatedObject.View.TopLevelGroup.DisplayElements[recordindex]; 
//Returns if caption summary or group summary row encountered. 
if (!recordentry.IsRecords) 
var record = (recordentry as RecordEntry).Data; 
var value = record.GetType().GetProperty(AssociatedObject.Columns[colindex].MappingName).GetValue(record) ?? string.Empty; 
MessageBox.Show("Cell Value : " + value); 
We have modified the provided sample as like mentioned above achieve your requirement and attached that sample for reference, you can able to get It from the below link 
Please refer the below links for getting the record based upon the Mouse events 
Balamurugan R 

UN Unknown Syncfusion Team June 5, 2017 01:23 PM UTC

Hi Both,

Thank you very much for your reply, I hadn't expected you to look further into this so thank you very much, that was very kind of you. In the meantime however I did find a simpler way of doing this that may interest you.
I found this by studying the sfdatagrid documentation on the syncfusion website.
All I needed to do was replace the column type during column autogeneration. This displayed my text the way I wanted it and also changed the cursor in the right place automatically! The only code snippet needed was:

            if (e.Column.MappingName == "EmployeeArea")
                if (!(e.Column is GridHyperlinkColumn))
                    e.Column = new GridHyperlinkColumn() { MappingName = "EmployeeArea", HeaderText = "Employee Area" };

I have updated the demo project just for your interest. Hopefully this solution can help someone else in future.
As always thank you very much for your time and effort, it is greatly appreciated.


Attachment: WPF925338025_7bd7846e.zip

SV Srinivasan Vasu Syncfusion Team June 6, 2017 06:08 AM UTC

Hi Anya, 
We are glad that you issue has been fixed and thank you for sharing us your solution. 

Live Chat Icon For mobile
Up arrow icon