This is a migrated thread and some comments may be shown as answers.

How to display image in the Header Cell?

10 Answers 420 Views

GridView

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Abhishek Gairola asked on 12 Oct 2010, 06:29 PM

Hello guys

I am trying to display images in the header cell of a radgridview, but the code is throwing me an exception in IE8

<telerikGrid:GridViewDataColumn Width="30" >

<telerikGrid:GridViewDataColumn.HeaderCellStyle>

<Style TargetType="telerikGridView:GridViewCell">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerikGridView:GridViewCell">

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">

<Image Width="15" Name="imgAdd" Height="15" MouseLeftButtonUp="imgAdd_MouseLeftButtonUp" Tag="{Binding TableCompositeKey}" ToolTipService.ToolTip="Add" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Ceridian.HRO.WebUI.Portal;Component/Images/plus.png" />

<Image Width="15" Height="15" Name="imgSaveNew" MouseLeftButtonUp="imgSave_MouseLeftButtonUp" Tag="{Binding TableCompositeKey}" Visibility="Collapsed" ToolTipService.ToolTip="Save" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Ceridian.HRO.WebUI.Portal;Component/Images/plus.png" />

<Image Width="15" Height="15" Name="imgCancelNew" MouseLeftButtonUp="imgCancel_MouseLeftButtonUp" Tag="{Binding TableCompositeKey}" Visibility="Collapsed" ToolTipService.ToolTip="Cancel" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Ceridian.HRO.WebUI.Portal;Component/Images/minus.png" />

</StackPanel>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</telerikGrid:GridViewDataColumn.HeaderCellStyle>

<telerikGrid:GridViewDataColumn.CellStyle>

<Style TargetType="telerikGridView:GridViewCell">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerikGridView:GridViewCell">

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">

<Image Width="15" Height="15" Name="imgEdit" MouseLeftButtonUp="imgEdit_MouseLeftButtonUp" Tag="{Binding TableCompositeKey}" ToolTipService.ToolTip="Edit" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Ceridian.HRO.WebUI.CustomControls;Component/Images/edit.png" />

<Image Width="15" Height="15" Name="imgSave" MouseLeftButtonUp="imgSave_MouseLeftButtonUp" Tag="{Binding TableCompositeKey}" Visibility="Collapsed" ToolTipService.ToolTip="Save" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Ceridian.HRO.WebUI.Portal;Component/Images/plus.png" />

<Image Width="15" Height="15" Name="imgCancel" MouseLeftButtonUp="imgCancel_MouseLeftButtonUp" Tag="{Binding TableCompositeKey}" Visibility="Collapsed" ToolTipService.ToolTip="Cancel" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Ceridian.HRO.WebUI.Portal;Component/Images/minus.png" />

</StackPanel>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</telerikGrid:GridViewDataColumn.CellStyle>

</telerikGrid:GridViewDataColumn>

<telerikGrid:GridViewDataColumn.CellStyle> is working fine
but <telerikGrid:GridViewDataColumn.HeaderCellStyle> is NOT working

Please advice?

xmlns

:telerikGrid="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"

xmlns

:telerikGridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"

Thank you!

10 Answers, 1 is accepted

Accepted

answered on 13 Oct 2010, 02:56 PM

Hi Abhishek,

The HeaderCellStyle is not working, because you create a style that targets at GridViewCell, but the Target should be GridViewHeaderCell, change your style in this way:

<telerikGrid:GridViewDataColumn.HeaderCellStyle>

<Style TargetType="telerikGridView:GridViewHeaderCell">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="telerikGridView:GridViewHeaderCell">

.....

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</telerikGrid:GridViewDataColumn.HeaderCellStyle>

Change your markup and if you need any further assistance please let me know.

Greetings,
Vanya Pavlova
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 13 Oct 2010, 05:12 PM

grid.JPG

Hello Vanya

Your code helped me to put an image in the header, but the mouseleftbuttonup event is not being fired for this image.
Is it that images in the header do not have any events?

Do I need to put any additional code?

I have also attached the image with this post, the plus icon does not fire any event.

Please help

Thank you!

answered on 14 Oct 2010, 03:41 PM

silverlightapplication123.zip

Hello Abhishek,

In this case you should add the image as a Custom UserControl with its corresponding logic in GridViewHeaderCell's template.

Please check the attached project and let me know if you need any further assistance.

Kind regards,
Vanya Pavlova
the Telerik team

answered on 15 Jun 2012, 01:53 PM

Hi,

That's what I was doing first, but I had to bind the property text of an element of the header cell to another element so I followed that procedure.

http://www.telerik.com/help/silverlight/gridview-troubleshooting-elementname-binding.html

Here is what I need to do. I need the column header label to change as a property of my viewmodel change. Actually, the only way I succeded is by binding the text property to the DataContext.MyProperty of the GridView element. But when I do that following the procedure, I loose the Windows7 style for the columns for which I change the header.

Here is what I do:

<telerik:GridViewColumn.HeaderCellStyle>
<Style TargetType="telerik:GridViewHeaderCell">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<TextBlock HorizontalAlignment="Center" Text="{Binding ElementName=dg, Path=DataContext.PeriodName}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</telerik:GridViewColumn.HeaderCellStyle>

thanks

answered on 15 Jun 2012, 02:06 PM

Hi Jean,

You may try to base the style to Windows7 to achieve your goal:

<Style TargetType="telerik:GridViewHeaderCell" telerik:StyleManager.BasedOn="Windows7">

<Setter Property="ContentTemplate">

<Setter.Value>

<DataTemplate>

<StackPanel>

<TextBlock HorizontalAlignment="Center" Text="{Binding ElementName=dg, Path=DataContext.PeriodName}"/>

</StackPanel>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

Greetings,
Vanya Pavlova
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>