GridDataControl ImageCell

[Jorge Pampin]

Hello,

I have to show images from a data base in a GridDataControl. In GridTreeControl is easy with ImageCell type, but that doesn't work in GridDataControl.

And I need to store into the data base the images that are showed in the GridDataControl, becouse the images can be changed.

Thanks.

[Ramesh V]

Hi,

Thanks for using Syncfusion Products.

We have prepared a sample based on this and you can find the sample under the following location.

Sample : http://www.syncfusion.com/uploads/redirect.aspx?file=GDC_ImageCel_d734fa89.rar&team=testingftp

Please let us know if this helps.
Regards,
Ramesh

[Jorge Pampin]

Hello,

That doesn't help me. In my application I load the images from a DataBase (byte[]), and the images can be changed and saved in the database.

Thanks.

[Ramesh V]

Hi,

You can achieve your requirement by applying the following code.

Code snippet [C#]:

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.grid.Model.RowCount = 2;
this.grid.Model.ColumnCount = 1;
this.grid.Model.RowHeights.DefaultLineSize = 250;
grid.Model.ColumnWidths.DefaultLineSize = 350;
this.grid.Loaded += new RoutedEventHandler(grid_Loaded);
this.grid.PreviewMouseLeftButtonDown += new MouseButtonEventHandler(grid_PreviewMouseLeftButtonDown);
}

void grid_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}

public byte[] ByteImage
{
get;
set;
}

void grid_Loaded(object sender, RoutedEventArgs e)
{
this.Store_Images();
this.Get_Images();
}

SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=D:\ImageDataBase.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True");
void Store_Images()
{
BitmapImage bitmapImage;
bitmapImage = new BitmapImage();
bitmapImage.BeginInit();
bitmapImage.StreamSource = File.OpenRead(@"D:\Desert.jpg");
bitmapImage.EndInit();
byte[] imageData = new byte[bitmapImage.StreamSource.Length];
bitmapImage.StreamSource.Seek(0, SeekOrigin.Begin);
bitmapImage.StreamSource.Read(imageData, 0, imageData.Length);
this.ByteImage = imageData;
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "INSERT into Imagetable VALUES(@ByteImage) ";
cmd.Parameters.AddWithValue("@ByteImage", ByteImage);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}


void Get_Images()
{
SqlDataReader dr = null;
SqlCommand cmd = new SqlCommand("Select * from Imagetable", con);
con.Open();
dr = cmd.ExecuteReader();
while (dr.Read())
{
ByteImage = dr.GetValue(0) as byte[];
}
con.Close();
MemoryStream ms = new MemoryStream(ByteImage);
ms.Seek(0, SeekOrigin.Begin);
BitmapImage newbitmap = new BitmapImage();
newbitmap.BeginInit();
newbitmap.StreamSource = ms;
newbitmap.EndInit();
this.grid.Model[1, 0].CellType = "ImageCell";
this.grid.Model[1, 0].CellValue = newbitmap;
}
}

We have prepared a sample based on this and you can find the sample under the following location.

Sample : http://www.syncfusion.com/uploads/redirect.aspx?file=GridDataControl1_8d00255c.zip&team=testingftp

Please let us know if this helps.

Regards,
Ramesh

[NCIM Groep]

The 2 sample links dont work anymore. Could you please give the correct links of the 2 samples?

Thanks

[Muthukumar Kalyanasundaram]

Hi Valery,   

  

Sorry for the inconvenience.   

  

Since the server machine crashed, you were unable to download the sample. Could you please share the details about your requirement?  

     1. How you have used your application to load the items in the grid?    

     2. Whether you want to bind the image from the database to grid column?   

  

This details would be more helpful for us to provide the solution at the earliest.   

  

Regards,   

Muthukumar K   

[NCIM Groep]

Hi, 

I figured out how to display blob images and images from a path folder in a cell (behind code).

Whenever I select a image cell, the image dissapears. How can i make sure that it won't be vanished?

Thanks

[NCIM Groep]

Hi, 

I figured out how to display blob images and images from a path folder in a cell (behind code).

Whenever I select a image cell, the image dissapears. How can i make sure that it won't be vanished?

Thanks

...The images are loaded from a database.

The Griddata control is binded with a property of type DataTable (which is loaded from a database)

[Jai Ganesh S]

Hi Valery 

 

You can insert the images in GridDataControl column by setting the “CellType = ImageCell” as like the below code example,

Code Example[XAML]: 

 
<syncfusion:GridDataVisibleColumn MappingName="Image" Width="70"> 

                <syncfusion:GridDataVisibleColumn.ColumnStyle> 

                    <syncfusion:GridDataColumnStyle CellType="ImageCell">                         

                    </syncfusion:GridDataColumnStyle> 

                </syncfusion:GridDataVisibleColumn.ColumnStyle> 

</syncfusion:GridDataVisibleColumn> 

 

 

We have also prepared a sample for binding DataTable collection and you can find the sample from the below location, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/GDC_DataTable-764423062.zip 

In the above sample ,we are unable to reproduce the image disappeared issue as you mentioned in your previous update. Could you please check at your end and if you still facing the issue then please replicate the issue in the above sample. This would be more helpful for us to proceed further. 

Regards, 

Jai Ganesh S 

[NCIM Groep]

Thank you for the response. I dont setup the columnStyle in xaml code and the images are stored in the database as BLOB. The only thing I have in xaml code is this:

                                                                                                 
                              <sf:GridDataControl Name="asp" EnableVisualStyleForEditors="True"
                              ActivateCurrentCellBehavior="DblClickOnCell"
                             AllowEdit="True"
                             AutoGenerateColumnsInfo="True"
                             AutoPopulateColumns="True"
                             Grid.Row="1"
                             Grid.Column="0
                             IsSynchronizedWithCurrentItem="True"
                             ItemsSource="{Binding MyData}"
                             NotifyPropertyChanges="True"
                             UpdateMode="PropertyChanged"
                             Loaded="gridControl_Loaded" />

I setup the columnStyle in code behind : 

private void gridControl_Loaded(object sender, RoutedEventArgs e)
{
          this.gridControl.VisibleColumns[1].ColumnStyle.CellType = "ImageCell"
          for (int i = 0; i < this.gridControl.Model.RowCount - 1; i++)
          {
               if (!string.IsNullOrEmpty(this.gridControl.Model[i + 1, 2].CellValue.ToString()))
               {
                    this.gridControl.Model[i + 1, 2].CellValue = GetBitmapImage(this.gridControl.Model[i + 1, 2].CellValue as byte[]);
               }
          }
}

public DataTable MyData
{
      get
     {
            return Data.GetDataTable();
     }
}

[Jai Ganesh S]

Hi Valery, 

 

We have modified our sample for loading the columns from code behind (including the image column) and you can get the sample from the below location, 

void griddatacontrol_Loaded(object sender, RoutedEventArgs e) 

{ 

    var gridColumn1 = new GridDataVisibleColumn(); 

    gridColumn1.MappingName = "Image"; 

 

    GridDataColumnStyle style = new GridDataColumnStyle(); 

    style.CellType = "ImageCell"; 

    gridColumn1.ColumnStyle = style; 

    this.griddatacontrol.VisibleColumns.Add(gridColumn1); 

 

    var gridColumn2 = new GridDataVisibleColumn(); 

    gridColumn2.MappingName = "Name"; 

    this.griddatacontrol.VisibleColumns.Add(gridColumn2); 

 

    var gridColumn3 = new GridDataVisibleColumn(); 

    gridColumn3.MappingName = "Title"; 

    this.griddatacontrol.VisibleColumns.Add(gridColumn3); 

 

} 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/GDC_DataTable-1994931246.zip 

 

Could you please check the above sample in your end and please make changes in your application based on the above code. If you still facing the issue for loading the image column can you please modify the above sample for replicating the issue. This would be more helpful for us to provide the prompt solution. 

 

Regards, 

Jai Ganesh S 

[NCIM Groep]

I dont want to use the methode 'Add'  to add columns in my code. My application should add columns accordingly what is in my database table.

My griddatacontrol is populated with data automatically by using this:

 

 <sf:GridDataControl Name="gridControl"

....

AutoPopulateColumns="True"

ItemsSource="{Binding MyData}"

... 

/>

public DataTable MyData
{
      get
     {
            return Data.GetDataTable();
     }
}

[Jai Ganesh S]

Hi Valery,  

 

We have modified our sample to populate the columns automatically from underlying collection and set the image in loaded event, 

 

void griddatacontrol_Loaded(object sender, RoutedEventArgs e) 

{ 

    if (this.griddatacontrol.VisibleColumns["Image"].MappingName == "Image") 

    { 

        var column = this.griddatacontrol.VisibleColumns["Image"]; 

 

        DataTemplate dt = new DataTemplate(); 

        FrameworkElementFactory frameworkElement = new FrameworkElementFactory(typeof(Image)); 

        Binding bind = new Binding(); 

        bind.Source = new Uri(@"..\..\Images\USA.jpg", UriKind.Relative); 

        frameworkElement.SetBinding(Image.SourceProperty, bind); 

        DataTemplate template = new DataTemplate() { VisualTree = frameworkElement }; 

        column.CellItemTemplate = template; 

    } 

} 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/GDC_DataTable256722593.zip 

 

Regards, 

Jai Ganesh S