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

Template Column show image

14 Answers 500 Views
GridView
This is a migrated thread and some comments may be shown as answers.
NS
Top achievements
Rank 1
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

Sort by
0
Nedyalko Nikolov
Telerik team
answered on 24 Nov 2008, 04:55 PM
Hi NS,

The solution is very easy just change Path property of the Binding object to "Content" instead of "Data.LOCKOUT".

Xaml should look like this:

<Image Height="16" Width="16" Source="{Binding Path=Content, Converter={StaticResource myADDisabled}}"/>

If you have further questions, please let me know.

Regards,
Nedyalko Nikolov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
NS
Top achievements
Rank 1
answered on 26 Nov 2008, 10:10 AM
Hi,
It still doesn't work. Actually the "Lockout" is a boolean field in my object that needs to be passed to the value-converter. The value converter returns an image.

If I run the application, the columns shows "true" or "false" instead of the image.

Is this because "Lockout" is been set as datamemberpath on the gridviewdatacolumn ?
Thanks,
Nicolas
0
Nedyalko Nikolov
Telerik team
answered on 26 Nov 2008, 01:48 PM
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.
0
NS
Top achievements
Rank 1
answered on 26 Nov 2008, 02:31 PM
Hi,
Can it be that your example doesn't work in SilverLight ? I'm getting errors while running this in silverlight on the TargetType={x:Type attributes.

Thanks
Nicolas
0
Nedyalko Nikolov
Telerik team
answered on 28 Nov 2008, 02:37 PM
Hello NS,

It's my mistake, I thought that you have problems with the RadGridView for WPF and the example is for WPF.

Unfortunately the functionality "set custom style for a column" is not available yet for the RadGridView for Silverlight, as its current version is an early CTP. For the first beta of the RadGridView, which is scheduled for the middle of December, this functionality will be included.

Sorry for the inconvenience caused.

Kind regards,
Nedyalko Nikolov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
NS
Top achievements
Rank 1
answered on 14 Jan 2009, 09:39 AM
Hi,
It has been a while when I looked into this problem.
I installed the futures build and tried to copy/paste the WPF code in Silverlight.
I get a syntax error on  The attachable property 'CellStyle' was not found in type 'GridViewColumn'. 

Does the futures build support this type of column ?

Thanks,
Nicolas
0
NS
Top achievements
Rank 1
answered on 14 Jan 2009, 09:48 AM
Never mind, just found the solution !
0
krishna kumar
Top achievements
Rank 1
answered on 21 Sep 2009, 08:25 PM
Can you provide me the way please ...

I am really held up with this.

Need to display image (online.png / offline.png / busy.png) based on string values 'online' / 'offline' / 'busy'.

i tried image converter to display the image inside the grid but keep getting the errors


0
Milan
Telerik team
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.
0
krishna kumar
Top achievements
Rank 1
answered on 22 Sep 2009, 02:05 PM
Hi Milan,

that looks really promising - will try it out.

Actually I found some other solution based on cell style - but this looks totally awesome and easy -

Thanks a lot for your pointer - will let you know the result once we have tried it

Cheers
Krish
0
Bryan
Top achievements
Rank 1
answered on 15 Sep 2010, 03:25 PM
would it be possible to put together a functioning example of the code above regarding the ' TextToImageUrlConverter '? 

I have the example however it does not seem to be working properly.  The images are still not displaying.  I am not receiving and error or anyting, the images just are not displaying.  I did convert this to vb not sure I missed something in the translation or not.

Thanks a million.

 
0
Yongjie
Top achievements
Rank 1
answered on 16 Sep 2010, 04:21 PM
Hi, Could you please attach your solution? Thanks!
0
Bryan
Top achievements
Rank 1
answered on 16 Sep 2010, 08:18 PM
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
0
Milan
Telerik team
answered on 17 Sep 2010, 07:41 AM
Hi Bryan,

You should also include the name of the folder when returning the path to an image. For example : 

Images/e.png


All the best,
Milan
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
Tags
GridView
Asked by
NS
Top achievements
Rank 1
Answers by
Nedyalko Nikolov
Telerik team
NS
Top achievements
Rank 1
krishna kumar
Top achievements
Rank 1
Milan
Telerik team
Bryan
Top achievements
Rank 1
Yongjie
Top achievements
Rank 1
Share this question
or