Displaying GridViewImageColumn

[Richard Harrigan]

Hi
I am creating a gridview columns programmatically (see code below).

Everything is working fine except for a GridViewImageColumn which is not displaying although the data seems to be bound correctly.  I am using the following for testing:

Database: Northwind
Table: Categories:
Column: Picture
SqlServerType image
System.DataType: Byte[]

Thanks
Rich

if (col.DataTypeName == "image")

{

GridViewImageColumn imageCol = new GridViewImageColumn();

imageCol.DataMemberBinding = new Binding(col.ColumnName);

imageCol.Header = col.ColumnName;

if (col.IsHidden == true)

imageCol.IsVisible = false;

imageCol.UniqueName = col.ColumnName;

imageCol.DataType = Type.GetType(col.SystemDataType);

imageCol.FilterMemberType = Type.GetType(col.SystemDataType);

gridQueryResult.Columns.Add(imageCol);

}

else

{

GridViewDataColumn dataCol = new GridViewDataColumn();

dataCol.DataMemberBinding = new Binding(col.ColumnName);

dataCol.Header = col.ColumnName;

if (col.IsHidden == true)

dataCol.IsVisible = false;

dataCol.UniqueName = col.ColumnName;

dataCol.DataType = Type.GetType(col.SystemDataType);

dataCol.FilterMemberType = Type.GetType(col.SystemDataType);

gridQueryResult.Columns.Add(dataCol);

}

[Richard Harrigan]

Hi

I just wanted to add the xaml I am using to my previous post on the topic.

<telerik:RadGridView
                                    Name="gridQueryResult" Grid.Row="1"
                                    SelectionChanged="gridQueryResult_SelectionChanged"
                                    ShowGroupPanel="True"
                                    IsReadOnly="True"
                                    CanUserResizeColumns="True"
                                    GridLinesVisibility="Both"
                                    ShowColumnHeaders="True"
                                    BorderThickness="0"
                                    AutoGenerateColumns="False"
                                    CanUserFreezeColumns="False"                            
                                    RowIndicatorVisibility="Visible">
                                    <telerik:RadGridView.Columns>
                                    </telerik:RadGridView.Columns>
                                </telerik:RadGridView>

[Dimitrina]

Hello Rich,

Generally you can bind the GridViewImageColumn to a string or a byte[] data using the DataMemberBinding property. In your case the data is of type "byte[]" and it should work fine. Is the col.ColumnName "Picture"? Have you bound to the DataTable's DefaultView?

Greetings,
Didie
the Telerik team

[Richard Harrigan]

Hi Didie

I am not using a DataTable.  I am using a dynamically created Class object.  All columns display except for the image column.  I verified in my program that the column name is Picture.  I also tried the Employee table Photo column with the same result.  

new ObservableCollection<dynamic>
each row contains a collection of
IDictionary<string, object>
which makes the dynamic class for a row.

string is column name and object is column value. 

Thanks
Rich

 

[Dimitrina]

Hello Rich,

In that case you could define your own CellTemplate placing a proper control to display the images. You can check this help article for a reference.
  

Kind regards,
Didie
the Telerik team

[Richard Harrigan]

Hi Didie

I tried the following but it also did not display the image.  Is this what you suggested?

Maybe a small working example that creates a column manually and displays and image would be helpful.  You can also kill another post I made for a manual grid column combobox.  Each row could have a different list for the combobox.

Thanks
Rich

<DataTemplate x:Key="dataTemplate1">
            <Image Height="35" Width="50"/>
</DataTemplate>

if (col.DataTypeName == "image")
{
 GridViewDataColumn imageCol = new GridViewDataColumn();
        imageCol.CellTemplate = (DataTemplate)this.Resources["dataTemplate1"];
        imageCol.DataMemberBinding = new Binding(col.ColumnName);  // I verified this property
        imageCol.Header = col.ColumnName;
        imageCol.UniqueName = col.ColumnName;
        imageCol.DataType = Type.GetType(col.SystemDataType);
        imageCol.FilterMemberType = Type.GetType(col.SystemDataType);
        gridQueryResult.Columns.Add(imageCol);
}

[Dimitrina]

Hello,

For example you can place an <Image/> control. You could check this or this online resources on how to convert a byte[] image and set the ImageSource. 

Or you can try using a converter for the GridViewImageColumn and return a byte[] value and not an object value.

All the best,
Didie
the Telerik team