We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

GridDataControl ImageCell

Thread ID:

Created:

Updated:

Platform:

Replies:

99878 Jun 16,2011 02:56 PM UTC Dec 12,2017 01:51 AM UTC WPF 12
loading
Tags: GridDataControl
Jorge Pampin
Asked On June 16, 2011 02:56 PM UTC

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 [Syncfusion]
Replied On June 17, 2011 11:07 AM UTC

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
Replied On June 20, 2011 11:42 AM UTC

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 [Syncfusion]
Replied On June 23, 2011 02:04 PM UTC

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


Valery
Replied On October 20, 2017 04:14 PM UTC

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

Thanks

Muthukumar Kalyanasundaram [Syncfusion]
Replied On October 24, 2017 05:22 AM UTC

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   


Valery
Replied On October 30, 2017 04:30 PM UTC

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


Valery
Replied On October 31, 2017 01:19 PM UTC

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 [Syncfusion]
Replied On November 8, 2017 03:37 PM UTC

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, 
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 


Valery
Replied On November 10, 2017 10:04 AM UTC

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 [Syncfusion]
Replied On November 13, 2017 05:04 PM UTC

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


Valery
Replied On December 8, 2017 01:26 PM UTC

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 [Syncfusion]
Replied On December 12, 2017 01:51 AM UTC

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; 
    } 
} 
 
 
Regards, 
Jai Ganesh S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;