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

Template Column show image

14 Answers 569 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.

NS asked on 21 Nov 2008, 07:37 AM

Hi,
I want to display an image in a GridView column based on a ValueConverter.
I do the following:

    
            ...  
        
             <UserControl.Resources> 
        
                    <ADToolHelper:AccountDisabledConverter x:Name="myADDisabled" /> 
        
                            <ControlTemplate x:Key="LockoutTemplate" TargetType="telerikGridView:GridViewCell">  
        
                        <Image Height="16" Width="16" Source="{Binding Path=Data.LOCKOUT, Converter={StaticResource myADDisabled}}"/>  
        
                    </ControlTemplate> 
        
                       </UserControl.Resources> 
        
            ...

    
            ...  
        
            <telerikGridView:GridViewDataColumn Width="25"  HeaderText="Enabled" DataMemberPath="LOCKOUT" UniqueName="LOCKOUT" > 
        
                                <telerikGridView:GridViewDataColumn.CellStyle> 
        
                                    <Style TargetType="telerikGridView:GridViewCell">  
        
                                        <Setter Property="Template" Value="{StaticResource LockoutTemplate}"/>  
        
                                    </Style> 
        
                                </telerikGridView:GridViewDataColumn.CellStyle> 
        
                            </telerikGridView:GridViewDataColumn> 
        
            ...

If I run this, the image is not displayed, instead the contents of the LOCKOUT field is displayed as a String. Removing the DataMemberPath from the GridViewDataColumn results in a empty column.

Any help on this ?
Thanks,
Nicolas

14 Answers, 1 is accepted

answered on 26 Nov 2008, 01:48 PM

ImageColumn.zip

Hi NS,

I'm attaching an example how to display an image according to boolean value via ValueConverter.

P.S. In my previous post I forgot to paste RelativeSource property of the Binding object. Sorry for the inconvenience caused. Xaml to display image in a GridViewColumn should look like this:

    
            <telerik:GridViewDataColumn DataType="{x:Null}" UniqueName="Picture"> 
        
                                <telerik:GridViewColumn.CellStyle> 
        
                                    <Style TargetType="{x:Type telerik:GridViewCell}"> 
        
                                        <Setter Property="Template"> 
        
                                            <Setter.Value> 
        
                                                <ControlTemplate TargetType="{x:Type telerik:GridViewCell}"> 
        
                                                    <Image Stretch="UniformToFill" Width="50" Height="50" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, Converter = {StaticResource boolToImageConverter}}" /> 
        
                                                </ControlTemplate> 
        
                                            </Setter.Value> 
        
                                        </Setter> 
        
                                    </Style> 
        
                                </telerik:GridViewColumn.CellStyle> 
        
                            </telerik:GridViewDataColumn>

Regards,
Nedyalko Nikolov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

answered on 22 Sep 2009, 01:57 PM

Hi krishna kumar,

Recently we have introduced a new column type called GridViewImageColumn which makes it really easy to show images in RadGridView. Unfortunately you will have to upgrade to the latest version of the grid and download our latest internal build to be able to utilize this new column.

If that is not a problem for you just have to define your column in XAML and provide a simple converter which can convert the text (offline, busy, etc) to a image address (offline.png, busy.png, etc)

    
            <Grid x:Name="LayoutRoot">  
        
                <Grid.Resources> 
        
                    <local:TextToImageUrlConverter x:Key="Converter"/>  
        
                </Grid.Resources> 
        
                <telerikGrid:RadGridView x:Name="gridvView" AutoGenerateColumns="False">  
        
                    <telerikGrid:RadGridView.Columns> 
        
                        <telerikGrid:GridViewImageColumn   
        
                            DataMemberBinding="{Binding Path=Sender, Converter={StaticResource Converter}}" /> 
        
                    </telerikGrid:RadGridView.Columns> 
        
                </telerikGrid:RadGridView> 
        
            </Grid>

    
            public class TextToImageUrlConverter : IValueConverter  
        
            {  
        
                public object Convert(object value, System.Type targetType, object parameter, CultureInfo culture)  
        
                {  
        
                    string text = value.ToString();  
        
                    // assuming that the images are added as a resource  
        
                    if (text == "offline")  
        
                        return "offline.png";  
        
                    if (text == "online")  
        
                        return "online.png";  
        
                    return string.Empty;  
        
                }  
        
                public object ConvertBack(object value, System.Type targetType, object parameter, CultureInfo culture)  
        
                {  
        
                    throw new System.NotImplementedException();  
        
                }  
        
            }

Best wishes,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 16 Sep 2010, 08:18 PM

missingimage.jpg

Hello, thank-you for the quick response, the solution I have is extremely large, however I can post the pieces I have added if that would help?

Page: Worklist > MainPage.xaml

-------------------------------

xmlns:local="clr-namespace:WorkList"

<UserControl.Resources>

<local:TextToImageUrlConverter x:Key="Converter"/>

</UserControl.Resources>

<telerikGrid:RadGridView

x:Name="gridWorklistProgress"

Width="800"

Canvas.Top="400"

Canvas.Left="10"

Height="200"

AutoGenerateColumns="False"

IsReadOnly="True"

ShowGroupPanel="False">

<telerikGrid:RadGridView.Columns>

<telerikGrid:GridViewDataColumn

DataMemberBinding="{Binding AdmUrn}"

IsVisible="False" IsReadOnly="True"/>

<telerikGrid:GridViewImageColumn

DataMemberBinding="{Binding Path=Sender, Converter={StaticResource Converter}}" />

<telerikGrid:GridViewDataColumn

DataMemberBinding="{Binding MriUrn}"

Header="MriUrn"/>

<telerikGrid:GridViewDataColumn

DataMemberBinding="{Binding NameVal}"

Header="Name"/>

<telerikGrid:GridViewDataColumn

DataMemberBinding="{Binding Activity}"

Header="Activity"/>

<telerikGrid:GridViewDataColumn Width="150"

DataMemberBinding="{Binding DateVal}"

Header="Date"/>

</telerikGrid:RadGridView.Columns>

</telerikGrid:RadGridView>

And Here is the Code Behind:

Page: Worklist > MainPage.xaml.vb

---------------------------------

Public Class TextToImageUrlConverter

Implements IValueConverter

Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert

Dim text As String = value.ToString()

If text = "pending" Then

Return "e.png"

End If

If text = "complete" Then

Return "o.png"

End If

If text = "error" Then

Return "x.png"

End If

Return String.Empty

End Function

Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack

Throw New System.NotImplementedException()

End Function

End Class

I have the images in a folder named Images within the Worklist project, and the DB Query is returning the values of either (complete,error or pending) . The data does show up within the grid ok as you can see by the attachment, however the image does not?

Thanks for helping me, I do appreciate it.
Bryan