Get the images displayed in RadGridView columns

[HDD]

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>

http://demos.telerik.com/silverlight/#GridView/RowDetails

http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-display-the-image-in-radgrid-image-column.aspx

http://www.telerik.com/help/aspnet-ajax/grdconditionalimagedisplayingridcolumn.html

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.

[Pavel Pavlov]

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

[HDD]

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.

[Pavel Pavlov]

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

[HDD]

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.

[HDD]

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.

[Milan]

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

[HDD]

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.

[Vikram]

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

[HDC]

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?

[Makarand]

how we can add a image control in a radgridview cell dynamically in wpf..

[hermann]

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