[Solved] Help with Image Column???

[mark]

I am trying to use the RadGridView and a column that has an image based on a value in a column, like status.  I found some samples here in the forum and I am trying to implement those samples, but I am getting error messages in the xaml...I am using Silverlight 2 and the trial version of the controls while my company is trying to get them purchased for me...

My error message is on this line:
        <ControlTemplate TargetType="{x:Type telerikGridView:GridViewCell}">

It doesn't like the namespace...I also tried it as:
        <ControlTemplate TargetType="{x:Type telerik:GridViewCell}">

It doesn't like either one.  I am using Visual Studio 2008 and C# for the code behind.

Much appreciated.

<!--The main part of the Grid Xaml I am having problems with...

<Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <local:StatusImageConverter x:Key="StatusImageConverter" />
        </Grid.Resources>
<UserControl xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"  
             xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"  
             x:Class="ProductionFinanceDemo.Page"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ProdFinDemo"
             Width="auto" Height="800">

//Other xaml here......


 <telerikGridView:RadGridView Name="radGridAllFilms" AutoGenerateColumns="False" Grid.Row="1" Width="auto" Height="600">
                    <telerikGridView:RadGridView.Columns>
                        <telerikGridView:GridViewDataColumn HeaderText="Show" Width="300" DataMemberBinding = "{Binding ShowTitle }" ></telerikGridView:GridViewDataColumn>
                        <telerikGridView:GridViewDataColumn DataType="{x:Null}" UniqueName="StatusColor">
                            <telerikGridView:GridViewColumn.CellStyle>
                            <Style TargetType="{x:Type telerikGridView:GridViewCell}">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type telerikGridView:GridViewCell}">
                                                <Image Stretch="UniformToFill" Width="25" Height="25" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, Converter = {StaticResource StatusImageConverter}}" />
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </telerikGridView:GridViewColumn.CellStyle>
                        </telerikGridView:GridViewDataColumn>
                        <telerikGridView:GridViewDataColumn HeaderText="Issue/Action" Width="200" DataMemberBinding = "{Binding IssueAction }" ></telerikGridView:GridViewDataColumn>
                        <telerikGridView:GridViewDataColumn HeaderText="Dates" Width="150" DataMemberBinding = "{Binding Dates }" ></telerikGridView:GridViewDataColumn>
                        <telerikGridView:GridViewDataColumn HeaderText="Wks/Days " Width="100" DataMemberBinding = "{Binding WeeksDays }" ></telerikGridView:GridViewDataColumn>
                        <telerikGridView:GridViewDataColumn HeaderText="#VFX Shots Bdgt" Width="100" DataMemberBinding = "{Binding VFXShotsBudget }" ></telerikGridView:GridViewDataColumn>
                        <telerikGridView:GridViewDataColumn HeaderText="#VFX Shots Actual" Width="100" DataMemberBinding = "{Binding VFXShotsActual  }" ></telerikGridView:GridViewDataColumn>
                        <telerikGridView:GridViewDataColumn HeaderText="Bdgt W/Incent" Width="100" DataMemberBinding = "{Binding BudgetWithIncentives }" ></telerikGridView:GridViewDataColumn>
                        <telerikGridView:GridViewDataColumn HeaderText="Over/Under" Width="100" DataMemberBinding = "{Binding OverUnder }" ></telerikGridView:GridViewDataColumn>
                        <telerikGridView:GridViewDataColumn HeaderText="Pot" Width="100" DataMemberBinding = "{Binding Pot }" ></telerikGridView:GridViewDataColumn>
                        <telerikGridView:GridViewDataColumn HeaderText="EST FINAL COST" Width="150" DataMemberBinding = "{Binding EstimatedFinalCost }" ></telerikGridView:GridViewDataColumn>
                        <telerikGridView:GridViewDataColumn HeaderText="Total With O/H" Width="100" DataMemberBinding = "{Binding TotalWithOverhead }" ></telerikGridView:GridViewDataColumn>
                    </telerikGridView:RadGridView.Columns>
            
        </telerikGridView:RadGridView>

[Vlad]

Hi Mark,

You can find such example here:
http://blogs.telerik.com/vladimirenchev/posts/09-04-16/full_support_for_domaindatasource_with_radgridview_for_silverlight_3.aspx

Vlad

[mark]

I don't think that link was correct.  It talked about radgrids with Silverlight 3.  I am using Silverlight 2, VS 2008. 

thanks

[Vlad]

Hi Mark,

Sorry for this miscommunication!

Here is the correct example:
http://demos.telerik.com/silverlight/#GridView/ColumnTypes/TemplateAndUnbound

Vlad

[koray]

Hi,

I'm having trouble with binding image from database to grid. I store images as binary data and retrieve them as binary.

When the service call finishes, the function below starts to work. Columns get filled execpt the photo column.  I couldn't figure out what I'm doing wrong. Can anyone help me please?

void svc_GetPeopleOfFirmCompleted(object sender, GetPeopleOfFirmCompletedEventArgs e)
        {

 List<myService.People> lstPeopleFromServer = e.Result.ToList();

            List<Person> lstPerson = new List<Person>();


            foreach (myService.People temp in lstPeopleFromServer )
            {
                // Converting binary data to image
                byte[] imageArr = temp.PeoplePhoto;
                MemoryStream stream = new MemoryStream(imageArr);
                BitmapImage bitmapImage = new BitmapImage();
                bitmapImage.SetSource(stream);

                Person p = new Person();
                p.FirmName = temp.FirmName;
                p.ID = temp.PeopleID;
                p.Name = temp.PeopleName;
                p.PhotoExtension = temp.PeoplePhotoExtension;
                p.Photo = bitmapImage;

                lstPerson.Add(p);
            }

            //  Fill the grid.
            this.radGridViewDataSourceUpdates.ItemsSource = lstPerson;

        }

My grid at xaml:

<telerik:RadGridView x:Name="radGridViewDataSourceUpdates" AutoGenerateColumns="False" IsReadOnly="True" ColumnsWidthMode="Fill" Grid.Row="1"
                             PropertyChanged="radGridViewDataSourceUpdates_PropertyChanged" Foreground="Black"  MultipleSelect="True" SelectionChanged="radGridViewDataSourceUpdates_SelectionChanged">
                    <telerik:RadGridView.Columns>
                        <telerik:GridViewDataColumn UniqueName="ID" DataMemberBinding="{Binding ID}" HeaderText="ID" />
                        <telerik:GridViewDataColumn UniqueName="Photo" DataMemberBinding="{Binding Photo}" HeaderText="Photo"/>
                        <telerik:GridViewDataColumn UniqueName="Name" DataMemberBinding="{Binding Name}" HeaderText="Name" />
                        <telerik:GridViewDataColumn UniqueName="FirmName" DataMemberBinding="{Binding FirmName}" HeaderText="Firm"/>
                    </telerik:RadGridView.Columns>
                </telerik:RadGridView>

[Milan]

Hi koray,

Our default GridViewDataColumn does not have the ability to detect if its content is an image type and automatically display the image - you have to create a simple template to be able to display an image.

You could try something like:

<telerik:RadGridView Name="RadGridView1">
    <telerik:RadGridView.Columns>
        <telerik:GridViewColumn HeaderText="PictureColumn">
            <telerik:GridViewColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding Path=Photo}"/>
                </DataTemplate>
            </telerik:GridViewColumn.CellTemplate>
        </telerik:GridViewColumn>
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

All the best,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[koray]

Hi Milan,

Thanks for the answer. But when I change the xaml as you proposed, I get the error saying that "The attachable property 'CellTemplate' was not found in type 'GridViewColumn'".

[Vlad]

Hi,

Generally CellTemplate is available since Q1 2009 - do you have our latest version?

Sincerely yours,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[koray]

It is Q1 2009...

[Nedyalko Nikolov]

Hello koray,

I'm attaching an example with 2009.Q1 assemblies, that demonstrates how to add image column into the RadGridView control.
Hope this helps.

Regards,
Nedyalko Nikolov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[koray]

Hi Nedyalko,

Thank you for the example. Now It works...

When I opened the solution of yours I was still getting the error "The attachable property 'CellTemplate' was not found in type 'GridViewColumn'" but when I deleted the current referenced dll files and referenced the dll files that were in your solution it worked.

Thank you very much...

Have a nice day.

Koray