Template Column show image

15 posts, 0 answers
  1. NS
    NS avatar
    179 posts
    Member since:
    Jan 2007

    Posted 21 Nov 2008 Link to this post

    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
  2. Nedyalko Nikolov
    Admin
    Nedyalko Nikolov avatar
    871 posts

    Posted 24 Nov 2008 Link to this post

    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.
  3. DevCraft banner
  4. NS
    NS avatar
    179 posts
    Member since:
    Jan 2007

    Posted 26 Nov 2008 Link to this post

    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
  5. Nedyalko Nikolov
    Admin
    Nedyalko Nikolov avatar
    871 posts

    Posted 26 Nov 2008 Link to this post

    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.
  6. NS
    NS avatar
    179 posts
    Member since:
    Jan 2007

    Posted 26 Nov 2008 Link to this post

    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
  7. Nedyalko Nikolov
    Admin
    Nedyalko Nikolov avatar
    871 posts

    Posted 28 Nov 2008 Link to this post

    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.
  8. NS
    NS avatar
    179 posts
    Member since:
    Jan 2007

    Posted 14 Jan 2009 Link to this post

    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
  9. NS
    NS avatar
    179 posts
    Member since:
    Jan 2007

    Posted 14 Jan 2009 Link to this post

    Never mind, just found the solution !
  10. krishna kumar
    krishna kumar avatar
    2 posts
    Member since:
    Sep 2009

    Posted 21 Sep 2009 Link to this post

    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


  11. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 22 Sep 2009 Link to this post

    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.
  12. krishna kumar
    krishna kumar avatar
    2 posts
    Member since:
    Sep 2009

    Posted 22 Sep 2009 Link to this post

    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
  13. Bryan
    Bryan avatar
    4 posts
    Member since:
    Mar 2008

    Posted 15 Sep 2010 Link to this post

    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.

     
  14. Yongjie
    Yongjie avatar
    1 posts
    Member since:
    Jun 2010

    Posted 16 Sep 2010 Link to this post

    Hi, Could you please attach your solution? Thanks!
  15. Bryan
    Bryan avatar
    4 posts
    Member since:
    Mar 2008

    Posted 16 Sep 2010 Link to this post

    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
  16. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 17 Sep 2010 Link to this post

    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
Back to Top
DevCraft banner