How to show Glyph icon in RadGridView cell
Environment
| Product Version | Product | Author |
|---|---|---|
| 2022.2.622 | RadGridView for WinForms | Dinko Krastev |
Description
This article demonstrates how to show Glyph icon in RadGridView cell depending on text in other column cells.
Solution
Populate the RadGridView control with sample data. For the purpose of this example, we will use DataTable with one column. The cells inside will contain a string that will use to set our glyph. The grid will have two columns, one will hold our icon and the other will point to the DataTable cell. To set our icon we can use the CellFormatting event of the control which will be called for each data cell. In order to use glyph, the CustomFont property of the cell needs to be set to our TelerikWebUI font name. Otherwise, the cell won't recognize the glyph string.
Glyph in Cell
public RadForm1()
{
InitializeComponent();
DataTable dataTable = new DataTable("IconTable");
dataTable.Columns.Add(new DataColumn("Dirrection", typeof(string)));
var row = dataTable.NewRow();
row["Dirrection"] = "Up";
dataTable.Rows.Add(row);
row = dataTable.NewRow();
row["Dirrection"] = "Down";
dataTable.Rows.Add(row);
row = dataTable.NewRow();
row["Dirrection"] = "Left";
dataTable.Rows.Add(row);
row = dataTable.NewRow();
row["Dirrection"] = "Right";
dataTable.Rows.Add(row);
this.radGridView1.Columns.Add(new GridViewTextBoxColumn("Glyph Icon"));
this.radGridView1.Columns.Add(new GridViewTextBoxColumn("Dirrection", "Dirrection"));
this.radGridView1.CellFormatting += RadGridView1_CellFormatting;
this.radGridView1.DataSource = dataTable;
}
FontFamily font1 = ThemeResolutionService.GetCustomFont("TelerikWebUI");
private void RadGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
{
if (e.CellElement.ColumnIndex == 0)
{
var cellValue = e.Row.Cells[1].Value;
if(cellValue != null)
{
e.CellElement.CustomFont = font1.Name;
switch (cellValue.ToString())
{
case "Up":
e.CellElement.Text = TelerikWebUIFont.GlyphArrowUp;
break;
case "Down":
e.CellElement.Text = TelerikWebUIFont.GlyphArrowDown;
break;
case "Left":
e.CellElement.Text = TelerikWebUIFont.GlyphArrowLeft;
break;
case "Right":
e.CellElement.Text = TelerikWebUIFont.GlyphArrowRight;
break;
default:
e.CellElement.ResetValue(LightVisualElement.CustomFontProperty, Telerik.WinControls.ValueResetFlags.Local);
break;
}
}
}
else
{
e.CellElement.ResetValue(LightVisualElement.CustomFontProperty, Telerik.WinControls.ValueResetFlags.Local);
}
}
Public Sub New()
InitializeComponent()
Dim dataTable As DataTable = New DataTable("IconTable")
dataTable.Columns.Add(New DataColumn("Dirrection", GetType(String)))
Dim row = dataTable.NewRow()
row("Dirrection") = "Up"
dataTable.Rows.Add(row)
row = dataTable.NewRow()
row("Dirrection") = "Down"
dataTable.Rows.Add(row)
row = dataTable.NewRow()
row("Dirrection") = "Left"
dataTable.Rows.Add(row)
row = dataTable.NewRow()
row("Dirrection") = "Right"
dataTable.Rows.Add(row)
Me.radGridView1.Columns.Add(New GridViewTextBoxColumn("Glyph Icon"))
Me.radGridView1.Columns.Add(New GridViewTextBoxColumn("Dirrection", "Dirrection"))
AddHandler Me.radGridView1.CellFormatting, AddressOf RadGridView1_CellFormatting
Me.radGridView1.DataSource = dataTable
End Sub
Private font1 As FontFamily = ThemeResolutionService.GetCustomFont("TelerikWebUI")
Private Sub RadGridView1_CellFormatting(ByVal sender As Object, ByVal e As CellFormattingEventArgs)
If e.CellElement.ColumnIndex = 0 Then
Dim cellValue = e.Row.Cells(1).Value
If cellValue IsNot Nothing Then
e.CellElement.CustomFont = font1.Name
Select Case cellValue.ToString()
Case "Up"
e.CellElement.Text = TelerikWebUIFont.GlyphArrowUp
Case "Down"
e.CellElement.Text = TelerikWebUIFont.GlyphArrowDown
Case "Left"
e.CellElement.Text = TelerikWebUIFont.GlyphArrowLeft
Case "Right"
e.CellElement.Text = TelerikWebUIFont.GlyphArrowRight
Case Else
e.CellElement.ResetValue(LightVisualElement.CustomFontProperty, Telerik.WinControls.ValueResetFlags.Local)
End Select
End If
Else
e.CellElement.ResetValue(LightVisualElement.CustomFontProperty, Telerik.WinControls.ValueResetFlags.Local)
End If
End Sub