Get the images displayed in RadGridView columns

12 posts, 2 answers
  1. HDD
    HDD avatar
    34 posts
    Member since:
    May 2010

    Posted 25 Jun 2010 Link to this post

    Hi,
    I am trying to get the images displayed in RadGridView columns. 
    I saw a couple of examples demonstrating these and was wondering if that is best way to go about it.
    What I need to accomplish is, have two columns in a gridview display images.
    The first column displays a set of images stacked horizontally and the second column displays a single image based upon the value in another grid column. The RadGridiew has its ViewModel set as ItemsSource="{Binding Cars}". I am using SL4 with Prism/MVVM.
    I have attached an image for more clarity.
    This is what the mapping looks like for the column "Image Column 2":
    "Porsche" -> "Image 1" (two rows display this image)
    "Citroen" -> "Image 2"
    "Reno" -> "Image 3"
    My code looks like:
     <telerikGridView:RadGridView Name="CarsGrid" AutoGenerateColumns="False" ItemsSource="{Binding Cars}" telerik:StyleManager.Theme="Windows7">
                <telerikGridView:RadGridView.Columns>
                    <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding CarName}"    Header="Name" />
                    <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding CarDescription}" Header="Description" />
                    ....I need Image Column 1 here ........
                    ....I need Image Column 2 here ........
                </telerikGridView:RadGridView.Columns>
    </telerikGridView:RadGridView>



    Thanks.

    Updated: Just to add here, each icons in the "Image Column 1" needs to be clickable and bring up respective pop-up when clicked.
    Thanks.
  2. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 29 Jun 2010 Link to this post

    Hello HDD,

    For the single image cell - just follow the examples with GridViewimageColumn.

    For the multiple images in a cell - you may take the following approach :
    1. Create a small user control with the  clickable images inside .
    2.  Use the CellTemplate property of a regular column to place the user control iside the cell.

    Should you face any specific problem adapting this approach  to your project - just let me know.


    Best wishes,
    Pavel Pavlov
    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
  3. HDD
    HDD avatar
    34 posts
    Member since:
    May 2010

    Posted 29 Jun 2010 Link to this post

    Thanks Pavel,
    Appreciate you response. I got the multiple images displayed in my "Image Column 1" using the CellTemplate approach.
    But getting the images in Column 2 (which would be based upon the types of Cars in the first column) is what I am trying to figure out now. Would appreciate, if you can help with a sample project. This gives a better understanding of the complete functionality.
    Thanks.
  4. Answer
    Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 29 Jun 2010 Link to this post

    Hello HDD,

    The sample attached demonstrates a way to display different image  depending on different values in the business object achieved via custom IValueConverter.

    Regards,
    Pavel Pavlov
    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
  5. HDD
    HDD avatar
    34 posts
    Member since:
    May 2010

    Posted 29 Jun 2010 Link to this post

    Pavel,
    That's look very much closer to what I was looking for. Let me see if that works in my scenario.
    Will let you know.

    Thanks.
  6. HDD
    HDD avatar
    34 posts
    Member since:
    May 2010

    Posted 29 Jun 2010 Link to this post

    Pavel,
    Yep, that worked !!
    Now can you help me to merge this image column and (lets say) another column "Firstname" to display something like this in just one column:
    "(image) - Firstname"

    where (image) represents the actual Male/Female bitmap image.
    Let me know if this makes sense, or else I'll try to draw this in a jpg.

    In case if that's not feasible, can we hide the Grid column separator between two columns to give this kind of look-n-feel?
    Thanks for your help.

  7. Answer
    Milan
    Admin
    Milan avatar
    1989 posts

    Posted 30 Jun 2010 Link to this post

    Hi HDD,

    You can display any number of properties in a cell - you just need to modify its CellTemplate. For example, to show both an image and a text in a single column you can use this code:

    <telerik:RadGridView Width="200" Height="200"  x:Name="RadGridView1" AutoGenerateColumns="False" >
        <telerik:RadGridView.Columns>
            <telerik:GridViewColumn>
                <telerik:GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Image Grid.Column="0" Source="{Binding Gender, Converter={StaticResource GenderToImageConverter}}">
                                <ToolTipService.ToolTip>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding Gender}" />
                                        <TextBlock Text="{Binding FirstName}" />
                                    </StackPanel>
                                </ToolTipService.ToolTip>
                            </Image>
                            <TextBlock Grid.Column="1" Text="{Binding FirstName}" VerticalAlignment="Center" />
                        </Grid>
                    </DataTemplate>
                </telerik:GridViewColumn.CellTemplate>
            </telerik:GridViewColumn>
        </telerik:RadGridView.Columns>
    </telerik:RadGridView>

    Best wishes,
    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
  8. HDD
    HDD avatar
    34 posts
    Member since:
    May 2010

    Posted 30 Jun 2010 Link to this post

    Milan,
    That was exactly what I was trying to look for. Thanks for you assistance.
    Thanks to Pavel too, for all the prompt responses earlier.

    Getting replies is good but getting it within the needed time-frame is what helps to get the solution to the implementation.
    Else, most of the times, due to delayed responses, we tend to change our approach and when we get back the replies, it becomes useless.

    So again, you guys rock with quick responses and "Sample projects" !!!
    Thanks again.
  9. Vikram
    Vikram avatar
    1 posts
    Member since:
    Jul 2010

    Posted 01 Sep 2010 Link to this post

    I am new to Silverlight Application's.
    Evaluating Telerik Controls.
     
    I am adding columns from code behind in VB.net.
    I want to add Image in Header pro-grammatically.
    Can you please help me in achieving this Using VB.net :
    Now can you help me to merge this image column and (lets say) another column "Firstname" to display something like this in just one column:
    "(image) - Firstname"


    Thanks







  10. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 13 Jun 2011 Link to this post

    I have tried this solution with your value converter, but it does not work for me. There is no error and the valueconverter is called just fine, but in the end... there is no image in the grid.

    I have tried with PNG and with JPG images.

    I have tried to return URI instead of images, didn't work either

    I have set the properties of the images same as yours (Build action=none an copy always) and i have also located them in the same place on the project (root)

    The only difference that i can see is that i'm starting the application from my webproject, where you don't have a webproject in your solution. But when i make the silverlight project the startup project, the grid keeps looking for data and never shows any results.

    I'm almost sure that somehow it is not finding the image, but i just don't know a way how to verify that. I don't seem to be able to debug that.

    Can you make an example with a web project?



  11. Makarand
    Makarand avatar
    11 posts
    Member since:
    Oct 2011

    Posted 19 Oct 2011 Link to this post

    how we can add a image control in a radgridview cell dynamically in wpf..
  12. hermann
    hermann avatar
    43 posts
    Member since:
    Jun 2011

    Posted 28 Oct 2011 Link to this post

    Hi, I have converted your example (objecttoimageconvertersample.zip) to WPF's latest version (Q2 2011), added a GridViewDataColumn bound to FirstName plus another column bound to Gender
    and interestingly, the FirstName and Gender column is sortable, the imagecolumn is not. I would need to sort the imagecolumn by Gender.
    How can I do this?

    Best regards,
    Hermann
Back to Top