Displaying GridViewImageColumn

7 posts, 0 answers
  1. Richard Harrigan
    Richard Harrigan avatar
    235 posts
    Member since:
    Nov 2009

    Posted 28 Apr 2013 Link to this post

    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);

    }

  2. Richard Harrigan
    Richard Harrigan avatar
    235 posts
    Member since:
    Nov 2009

    Posted 28 Apr 2013 Link to this post

    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>

  3. Download a free trial of UI for WPF
  4. Dimitrina
    Admin
    Dimitrina avatar
    3153 posts
    Member since:
    Sep 2014

    Posted 29 Apr 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. Richard Harrigan
    Richard Harrigan avatar
    235 posts
    Member since:
    Nov 2009

    Posted 29 Apr 2013 Link to this post

    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

     

  6. Dimitrina
    Admin
    Dimitrina avatar
    3153 posts
    Member since:
    Sep 2014

    Posted 01 May 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Richard Harrigan
    Richard Harrigan avatar
    235 posts
    Member since:
    Nov 2009

    Posted 01 May 2013 Link to this post

    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);
    }

  8. Dimitrina
    Admin
    Dimitrina avatar
    3153 posts
    Member since:
    Sep 2014

    Posted 02 May 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
Download a free trial of UI for WPF