Hyperlinks in Unbound Flexgrid for Winforms

Popular for its flexibility in terms of customizing the appearance, C1Flexgrid for Winforms is heavily used by the developers around the world. C1Flexgrid can be customized to show various formats of data. This blog discusses the way to show Hyperlinks in the Unbound C1Flexgrid cells. We need to perform following steps to display hyperlinks :

1. Create a class for hyperlink cell data
2. Define Styles for Hyperlinks and Links visited
3. Handle Mouse Events for the cursor and Click
4. Change the style of links once they are visited

Class Definition for Cell Data

To start with we need to define a Class which maintains the data for each individual cell. Class Members for this class contain URL and the Visited status for the link.

public class HyperLinkData  
{  
  public bool Visited { get; set; }  
  public string url { get; set; }  
}  

Define Styles and Cell Data

Next we need to define styles for the links and visited links. We also need to add cell data to our C1FlexGrid. Here is the code for the same :

// Styles for Links which are yet to be visited  
CellStyle cs = _flex.Styles.Add("NewLink");  
cs.Font = new Font(_flex.Font, FontStyle.Underline);  
cs.ForeColor = Color.Blue;  
cs.TextAlign = TextAlignEnum.RightCenter;  

// Styles for Links which are visited  
cs = _flex.Styles.Add("OldLink");  
cs.Font = new Font(_flex.Font, FontStyle.Underline);  
cs.ForeColor = Color.Purple;  
cs.TextAlign = TextAlignEnum.RightCenter;  

C1FlexGrid grid = this._flex;  
grid.VisualStyle = VisualStyle.System;  
grid.Styles.Normal.WordWrap = true;  
grid.Cols.Count = 3;  
grid.Rows.Count = 4;  
grid.Rows.Fixed = 1;  
grid.Styles.Fixed.TextAlign = TextAlignEnum.CenterCenter;  

grid.MouseMove += new MouseEventHandler(\_flex\_MouseMove);  
grid.MouseDown += new MouseEventHandler(\_flex\_MouseDown);  
grid.DrawMode = DrawModeEnum.OwnerDraw;  
grid.OwnerDrawCell += new OwnerDrawCellEventHandler(\_flex\_OwnerDrawCell);  

CellRange rng;  
rng = grid.GetCellRange(0, 1);  
rng.Data = "Web Links";  

rng = grid.GetCellRange(1, 1);  
rng.UserData = new HyperLinkData() { Visited = false, url = "http://www.google.com"};  
rng.Data = "Google";  

rng = grid.GetCellRange(2, 1);  
rng.UserData = new HyperLinkData() { Visited = false, url = "http://msdn.microsoft.com/" };  
rng.Data = "MSDN";  

rng = grid.GetCellRange(3, 1);  
rng.UserData = new HyperLinkData() { Visited = false, url = "http://www.youtube.com" };  
rng.Data = "Youtube";

Events To Toggle Hyperlink Text Cursor and Open Cell Links

Now, once our links are created, we need to handle the mouse events for the hyperlink cells. Here we need to handle two events, MouseMove event to change the Cursor to Hand and MouseDown event open the hyperlinks :

private void \_flex\_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e)  
{  
   HitTestInfo ht = _flex.HitTest(e.X, e.Y);  
   bool hand = false;  
   if (ht.Type == HitTestTypeEnum.Cell && ht.Column == 1)  
   {  
     CellRange cr = _flex.GetCellRange(ht.Row, ht.Column);  
     if (cr.UserData.GetType() == typeof(HyperLinkData))  
     {  
        using (Graphics g = _flex.CreateGraphics())  
        {  
          Rectangle rc = _flex.GetCellRect(ht.Row, ht.Column, false);  
          int width = (int)g.MeasureString(cr.DataDisplay, _flex.Font).Width;  
          if (rc.Right - e.X <= width)  
           hand = true;  
        }  
     }  
   }  
   Cursor = (hand) ? Cursors.Hand : Cursors.Default;  
}  

private void \_flex\_MouseDown(object sender, System.Windows.Forms.MouseEventArgs e)  
{  
  if (Cursor == Cursors.Hand)  
  {  
     HitTestInfo ht = _flex.HitTest(e.X, e.Y);  
     if (ht.Type == HitTestTypeEnum.Cell && ht.Column == 1)  
     {  
        CellRange cr = _flex.GetCellRange(ht.Row, ht.Column);  
        if (cr.UserData.GetType() == typeof(HyperLinkData))  
        {  
           System.Diagnostics.Process.Start((cr.UserData as HyperLinkData).url);  
          (cr.UserData as HyperLinkData).Visited = true;  
        }  
     }  
  }  
}

Changing Styles for Visited Links

To change the style of the links visited, we simply need to handle the OwnerDrawCell event and change the style of the cells as shown in the code below:

private void \_flex\_OwnerDrawCell(object sender, C1.Win.C1FlexGrid.OwnerDrawCellEventArgs e)  
{  
   if (e.Col == 1 && e.Row >= _flex.Rows.Fixed)  
   {  
      CellRange cr = _flex.GetCellRange(e.Row, e.Col);  
      if (cr.UserData.GetType() == typeof(HyperLinkData))  
      {  
         if ((cr.UserData as HyperLinkData).Visited == true)  
           e.Style = _flex.Styles["OldLink"];  
         else  
           e.Style = _flex.Styles["NewLink"];  
      }  
   }  
}  

Refer to the attached samples for complete implementation. Download C# Sample Download VB Sample