Category / Section
How to customize the Column Header to load image and hide border?
1 min read
In GridTreeControl, the column header displays the header text and sort icon when you sort the column. You can customize the column header like adding the image by using QueryCellInfo event.
You can load image or any content in column header by handling QueryCellInfo event and changing the CellType to DataBoundTemplate. Using DataBoundTemplate cell type, you can load any content by assigning template to CellTemplate or CellTemplateKey property.
XAML
<!-- Add the image in DataTemplate -->
<Application.Resources>
<DataTemplate x:Key="titleimage">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=CellBoundValue}" Margin="2,0"></TextBlock>
<Image Source="/Assets/Epic.jpg" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="EmployeeIdimage">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=CellBoundValue}" Margin="2,0"></TextBlock>
<Image Source="/Assets/Hercules.jpg" />
</StackPanel>
</DataTemplate>
</Application.Resources>
C#
void treeGrid_ModelLoaded(object sender, EventArgs e)
{
this.treeGrid.Model.QueryCellInfo += Model_QueryCellInfo;
}
private void Model_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)
{
//to hide the border of the header
if (e.Cell.RowIndex != 0)
return;
if (e.Style.CellValue == null)
return;
var cellvalue = e.Style.CellValue.ToString();
// Load the image to all header columns
if (cellvalue == "Title")
{
e.Style.CellType = "DataBoundTemplate";
e.Style.CellItemTemplateKey = "titleimage";
}
else if (cellvalue == "Employee ID")
{
e.Style.CellType = "DataBoundTemplate";
e.Style.CellItemTemplateKey = "EmployeeIdimage";
}
}
You can also hide the border of the header by handling QueryCellInfo event as below,
C#
void treeGrid_ModelLoaded(object sender, EventArgs e)
{
this.treeGrid.Model.QueryCellInfo += Model_QueryCellInfo;
}
private void Model_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)
{
//to hide the border of the header
if (e.Cell.RowIndex != 0)
return;
var lightpen = new Pen(e.Style.Background, 2);
e.Style.Borders.Right = lightpen;
e.Style.Borders.Left = lightpen;
}
