1. Home
  2. Forum
  3. WinForms
  4. Loading image to Sfdatagrid using windows form

Loading image to Sfdatagrid using windows form

I have different shape code that I want to embed into my datagrid.

what I want is that everytime my forms will show up it will read the corresponding image code from my folder.

for example,

Shape code           Shape Image
1                              New Zealand
1                              New Zealand
1                              New Zealand
2                              Canada
3                              USA
1                              New Zealand
2                              Canada

after loading the image, will this be possible to print in pdf or export to excel or word including the images? and how?

thank you

9 Replies 1 reply marked as answer
DM Dhanasekar Mohanraj Syncfusion Team October 6, 2020 02:38 PM UTC

Hi Mark Jayvee, 

Thank you for using Syncfusion controls.

 

You can exported the SfDataGrid.ImageColumn images to PDF by using CellExporting event based on the ImagePosition of the PdfGridCell the image will be loaded in the cell like below,

 
PdfExportingOptions options = new PdfExportingOptions(); 
options.CellExporting += cellExporting; 
var document = sfDataGrid.ExportToPdf(options); 
document.Save("Sample.pdf"); 
private void cellExporting(object sender, DataGridCellPdfExportingEventArgs e) 
{ 
    if (e.CellType == ExportCellType.RecordCell && e.ColumnName == "OrderID") 
    { 
        var style = new PdfGridCellStyle(); 
        PdfPen normalBorder = new PdfPen(PdfBrushes.DarkGray, 0.2f); 
        System.Drawing.Image image = null; 
        if (Convert.ToInt16(e.CellValue) % 2 == 0) 
            image = SystemIcons.Information.ToBitmap(); 
        else 
            image = SystemIcons.Shield.ToBitmap(); 
        style.BackgroundImage = PdfImage.FromImage(image); 
        e.PdfGridCell.ImagePosition = PdfGridImagePosition.Center; 
        e.PdfGridCell.Style = style; 
        e.PdfGridCell.Style.Borders.All = normalBorder; 
        e.CellValue = string.Empty; 
    } 
} 

Please refer the User Guide documentation for more information’s,

 
Please let us know if you need further assistance for this. 

Regards,
Dhanasekar Mohanraj. 


MJ Mark Jayvee October 7, 2020 08:23 AM UTC

Sorry for a bit messy sample earlier.

I created a sample of datatable and when running debug in the column name "Flag". I want the flag image correspond to datagrid column "Country" will show up.
please see the attached photo for the expected output.
public DataTable GetDataTable()
        {
            employeeCollection = new DataTable();

            employeeCollection.Columns.Add("OrderID", typeof(int));
            employeeCollection.Columns.Add("CustomerID", typeof(string));
            employeeCollection.Columns.Add("CustomerName", typeof(string));            
            employeeCollection.Columns.Add("Country", typeof(string));            
            employeeCollection.Columns.Add("Flag", typeof(string));
            


            employeeCollection.Rows.Add(1001, "SAKIA", "Mariana", "Germany", "");
            employeeCollection.Rows.Add(1002, "DATRF", "Anna", "Mexico", "");
            employeeCollection.Rows.Add(1003, "CAONS", "Andy", "Mexico", "");
            employeeCollection.Rows.Add(1004, "BBOUT", "Thom", "UK",  "");
            employeeCollection.Rows.Add(1005, "NNBGS", "Christine", "Sweden",  "");
            employeeCollection.Rows.Add(1006, "KKBUS", "Hanz", "Germany",  "");


            return employeeCollection;

        }

Attachment: Image_9cc6bbc7.7z

DM Dhanasekar Mohanraj Syncfusion Team October 8, 2020 10:23 AM UTC

Hi Mark Jayvee,

 
Thank you for your response.

 
You can achieve your requirement by adding GridImageColumn, it provides support to display columns data as image, it can be created and images can be added to it and you can add the image based on the data by using QueryImageCellStyle event like below,

 
DataTable table = GetDataTable(); 
sfDataGrid1.AutoGenerateColumns = false; 
sfDataGrid1.Columns.Add(new GridNumericColumn() { MappingName = "OrderID" }); 
sfDataGrid1.Columns.Add(new GridTextColumn() { MappingName = "CustomerID" }); 
sfDataGrid1.Columns.Add(new GridTextColumn() { MappingName = "CustomerName" }); 
sfDataGrid1.Columns.Add(new GridTextColumn() { MappingName = "Country" }); 
sfDataGrid1.Columns.Add(new GridImageColumn() { MappingName = "Flag", ImageLayout = ImageLayout.Stretch }); 
sfDataGrid1.DataSource = table;
sfDataGrid1.QueryImageCellStyle += SfDataGrid1_QueryImageCellStyle; 

private void SfDataGrid1_QueryImageCellStyle(object sender, Syncfusion.WinForms.DataGrid.Events.QueryImageCellStyleEventArgs e) 
{ 
    var employee = (DataRowView)e.Record; 
    e.Image = (Image.FromFile(@"..\..\Image\"+ employee.Row.ItemArray[3].ToString()+".png")); 
}

 
 
We have prepared the sample for the same,

 
 
 
We hope it helps, please contact us for further assistance.

 
Regards,
Dhanasekar Mohanraj.

Marked as answer
MJ Mark Jayvee October 15, 2020 06:55 PM UTC

Hi thank you for your response. It works.

Next scenario is that. I have 25 existing Data columns and I want to insert this into column 7.

sfDataGrid1.Columns.Add(new GridImageColumn() { MappingName = "Flag", ImageLayout = ImageLayout.Stretch }); 

Because the above code can be inserted by default either in the beginning or end of datagrid.

Cheers,
Mark

DM Dhanasekar Mohanraj Syncfusion Team October 16, 2020 08:54 AM UTC

Hi Mark J, 

Thank you for your update.

 
You can add the GridImageColumn anywhere you want not only in the beginning or end of the DataGrid. Here we have modified the sample GridImageColumn inserted middle of the DataGrid likewise you can insert this in your project.

 
C#: 
DataTable table = GetDataTable(); 
sfDataGrid1.AutoGenerateColumns = false; 
sfDataGrid1.Columns.Add(new GridNumericColumn() { MappingName = "OrderID" }); 
sfDataGrid1.Columns.Add(new GridTextColumn() { MappingName = "CustomerID" }); 
sfDataGrid1.Columns.Add(new GridImageColumn() { MappingName = "Flag", ImageLayout = ImageLayout.Stretch }); 
sfDataGrid1.Columns.Add(new GridTextColumn() { MappingName = "CustomerName" }); 
sfDataGrid1.Columns.Add(new GridTextColumn() { MappingName = "Country" }); 
sfDataGrid1.QueryImageCellStyle += SfDataGrid1_QueryImageCellStyle; 
sfDataGrid1.DataSource = table; 
 
Output image: 
Please let us know if you need any further assistance.

 
Regards,
Dhanasekar M. 


MJ Mark Jayvee October 20, 2020 06:47 AM UTC

Thank you for the response.

what I notice the pic is a bit blurry?

how to fix it? or any chance to resize it or how to maintain the quality of the photo?

DM Dhanasekar Mohanraj Syncfusion Team October 21, 2020 10:44 AM UTC

Hi Mark J,

Thank you for the response 
If you set image layout as stretch the image can stretched based on the cell size if you can set Imagelayout as Zoom the image can’t resize. It shown as given dimensions like below,

 
C#: 
sfDataGrid1.Columns.Add(new GridImageColumn() { MappingName = "Flag", ImageLayout = ImageLayout.Zoom }); 
 

Output:


 
We have modified the sample,

 
We hope it helps, please let us know if you need further assistance.

 
Regards,
Dhanasekar Mohanraj. 


MJ Mark Jayvee October 22, 2020 09:00 AM UTC

Hi,

thank you for the response. 
I used the zoom property and works fine. What I need to do is to increase the row height into 150.

next problem for is the "GridSummaryColumn". When I increase the row height into 150 to make my pic readable my summarycolumn increased as well.

 GridSummaryColumn summaryColumn2 = new GridSummaryColumn();
            summaryColumn2.Name = "Total Count";
            summaryColumn2.Format = "{Sum}";
            summaryColumn2.MappingName = "Total Count";
            summaryColumn2.SummaryType = SummaryType.DoubleAggregate;

is it possible to make this row height 30 and keep everything 150?

DM Dhanasekar Mohanraj Syncfusion Team October 23, 2020 07:39 AM UTC

Hi Mark J,

 
Thank you for the update,

 
You can change the default rowheight by setting SfDataGrid.RowHeight property and you can change the TableSummary rowheight with the help of QueryRowHeight event like below,
C#: 
// Set the RowHeight 
sfDataGrid1.RowHeight = 150;

// set the TableSummaryRow height 
sfDataGrid1.QueryRowHeight += SfDataGrid1_QueryRowHeight;
private void SfDataGrid1_QueryRowHeight(object sender, Syncfusion.WinForms.DataGrid.Events.QueryRowHeightEventArgs e) 
{ 
    if (sfDataGrid1.TableControl.IsTableSummaryIndex(e.RowIndex)) 
    { 
        e.Height = 30; 
        e.Handled = true; 
    } 
} 

Please refer the below user guide documentation for more information’s,

RowHeight UG link: https://help.syncfusion.com/windowsforms/datagrid/rowheightcustomization 
 
We hope it helps, please let us know if you need further assistance.

 
Regards, 
Dhanasekar Mohanraj 


Loader.
Up arrow icon