1. Home
  2. Forum
  3. WinForms
  4. [SOLVED] Column header still displayed, image cell type not reflected

[SOLVED] Column header still displayed, image cell type not reflected

Hi,

I saw a sample with a multi row record on the help but I can't find it again. It was a people picture on line 1 & 2, and a string on the right of it on line 1 and another on line 2 but the sample on the documentation isn't working for me : https://help.syncfusion.com/windowsforms/grid/cell-types#image-cell-type

            ImageList imageList1 = new ImageList();
            imageList1.Images.Add(SystemIcons.WinLogo.ToBitmap());
            imageList1.Images.Add(SystemIcons.Warning.ToBitmap());
            imageList1.Images.Add(SystemIcons.Application.ToBitmap());
            gridDataBoundGrid1.TableStyle.ImageList = imageList1;

            DataTable myDataTable = new DataTable("MyDataTable");
            DataColumn myDataColumn;
            DataRow myDataRow;

            //Creates a new Data Column, sets the Data Type and Column Name and adds to the Data Table.  
            myDataColumn = new DataColumn();
            myDataColumn.DataType = System.Type.GetType("System.Int32");
            myDataColumn.ColumnName = "ImageIndex";
            myDataTable.Columns.Add(myDataColumn);

            //Creates a second column.
            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "Name";
            myDataTable.Columns.Add(myDataColumn);

            //Creates a second column.
            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "Folder";
            myDataTable.Columns.Add(myDataColumn);


            for (int i = 0; i <= 10; i++)
            {
                myDataRow = myDataTable.NewRow();
                myDataRow["ImageIndex"] = i;
                myDataRow["Name"] = "item " + i.ToString();
                myDataRow["Folder"] = "fld " + i.ToString();
                myDataTable.Rows.Add(myDataRow);
            }
            this.gridDataBoundGrid1.DataSource = myDataTable;

            //Sizes the columns.
            this.gridDataBoundGrid1.Model.ColWidths[1] = 30;
            this.gridDataBoundGrid1.Model.ColWidths[2] = 50;
            this.gridDataBoundGrid1.Model.ColWidths[3] = 50;

            GridModelDataBinder binder = gridDataBoundGrid1.Binder;
            binder.LayoutColumns(new string[] { "Image", "Name", ".", "Folder" });      // "." indicates a new row.

            this.gridDataBoundGrid1.ShowColumnHeaders = false;
            this.gridDataBoundGrid1.ShowRowHeaders = false;

            gridDataBoundGrid1[2, 1].CellType = GridCellTypeName.Image;
            gridDataBoundGrid1[2, 1].ImageIndex = 2;

1) Image & Name colum names are hidden but not Folder.
2) Image is not displayed on cell [2,1]
3) Position of cell 'Folder' is not the expected one. it should start on column 2.

Did I miss something ?

Thanks,

Vincent


Attachment: row_header,_image_2fd1e174.zip

12 Replies
AR Arulpriya Ramalingam Syncfusion Team February 12, 2018 06:35 PM UTC

Hi Vincent, 
 
Thanks for contacting Syncfusion support. 
 
Query 
Response 
1) Image & Name colum names are hidden but not Folder. 
The ShowColumnHeaders will hide the 0th row in the grid whereas, the Folder column will be included in the next row based on the LayoutColumns of the grid. So, that the reported issue occurred. In order to, hide the column headers when the layout for the columns are added, we would suggest you to, hide the row manually by using the HideRows property. Please refer to the below code, 
 
Code example 
 
//To hide the column header row manually 
this.gridDataBoundGrid1.Model.HideRows[1] = true; 
 
2) Image is not displayed on cell [2,1] 
Since, the columns are included in layout format, the ColStyle for the aligned columns (i.e. ImageIndex and Folder columns) will be same. So, to add the image for the ImageIndex column, we would suggest you to add the image in the data table itself by using the Byte[] array data type. Please refer the below code to add image in the data table, 
 
Code example 
 
//Creates a new Data Column, sets the Data Type and Column Name and adds to the Data Table. 
myDataColumn = new DataColumn(); 
//To set data type as Byte[] array 
myDataColumn.DataType = typeof(byte[]); 
myDataColumn.ColumnName = "ImageIndex"; 
myDataTable.Columns.Add(myDataColumn); 
 
for (int i = 0; i <= 10; i++) 
{ 
    myDataRow = myDataTable.NewRow(); 
    //To add the image in the data table 
    Byte[] imageArray = System.IO.File.ReadAllBytes(FindFile(@"flower" + i % 3 + ".jpg")); 
    myDataRow["ImageIndex"] = imageArray; 
    myDataRow["Name"] = "item " + i.ToString(); 
    myDataRow["Folder"] = "fld " + i.ToString(); 
    myDataTable.Rows.Add(myDataRow); 
} 
this.gridDataBoundGrid1.DataSource = myDataTable; 
 
3) Position of cell 'Folder' is not the expected one. it should start on column 2. 
You can add the columns to its position as per your requirement by adding an empty column. We created a simple sample as per your requirement. Please make us of the below code and sample, 
 
Code example 
 
//To position the columns 
binder.LayoutColumns(new string[] { "ImageIndex", "Name", ".","", "Folder" });      // "." indicates a new row. 
 
 
 
Note 
In the provided code part, you have set the MappingName as “ImageIndex” for the 1st column and added it to the LayoutColumns as “Image”. So, please ensure that the columns MappingName are same. 
 
Regards, 
Arulpriya 


VD Vincent Duvernet February 22, 2018 11:27 PM UTC

1) OK :)
2) It works too. In one of my cases it will do the job. In the other case, I need to display application icons from imagelist. So does the best way to use the ImageList is to get the image from ImageList and then convert it to Byte[] before inserting it in DataRow ?
3) OK. I learned that '-' is working to merge 2 horizontal cells. Is there a similar way for 2 vertical cells ?

4) I've found the sample I was looking for, it's a GridGroupingControl :
https://help.syncfusion.com/windowsforms/gridgrouping/feature-summary
and the direct link on image I'm trying to reproduce :
https://help.syncfusion.com/windowsforms/gridgrouping/Feature-Summary_images/Feature-Summary_img14.jpeg
where is the sample application ?

Thanks,

Vincent


AR Arulpriya Ramalingam Syncfusion Team February 23, 2018 12:51 PM UTC

Hi Vincent, 
 
Thanks for your update. 
 
Query 
Response 
2) It works too. In one of my cases it will do the job. In the other case, I need to display application icons from imagelist. So does the best way to use the ImageList is to get the image from ImageList and then convert it to Byte[] before inserting it in DataRow ? 
As we updated earlier, the image will be loaded when the column type is Byte[] array and since, the column index for layout columns will be same when the row is separated with different section. So, the recommended way to add the image or icon for that specified column is to add the image/icon to the data source to populate the image in the grid. Also, we would suggest you to use the GridGroupingControl to avail the advanced feature that span the columns by using the ColumnSet collection. Please refer to the below UG to choose the best grid, 
 
3) OK. I learned that '-' is working to merge 2 horizontal cells. Is there a similar way for 2 vertical cells ? 
The GridDataBoundGrid does not have the support to merge 2 vertical cells when the Layout for the columns are included. To achieve the scenario, the cells can be covered used QueryCoveredRange event. We modified the sample as per your requirement. Please refer to the below code and sample, 
 
Code example 
 
binder.LayoutColumns(new string[] {"ImageIndex", "Name", ".","","Folder" });      // "." indicates a new row. 
//Event triggering 
this.gridDataBoundGrid1.Model.QueryCoveredRange += Model_QueryCoveredRange; 
 
//Event customization 
private void Model_QueryCoveredRange(object sender, GridQueryCoveredRangeEventArgs e) 
{ 
    if (e.ColIndex == 1 && e.RowIndex % 2 == 0) 
    { 
        //To cover the cells 
        e.Range = GridRangeInfo.Cells(e.RowIndex, e.ColIndex, e.RowIndex + 1, e.ColIndex); 
        e.Handled = true; 
    } 
} 
 
4) I've found the sample I was looking for, it's a GridGroupingControl :
https://help.syncfusion.com/windowsforms/gridgrouping/feature-summary
and the direct link on image I'm trying to reproduce : 
https://help.syncfusion.com/windowsforms/gridgrouping/Feature-Summary_images/Feature-Summary_img14.jpeg
where is the sample application ? 
We already included the sample in the Syncfusion control panel and you can avail the sample in your local machine from the below location, 
 
Dashboard location: <Insatll_Location>\Syncfusion\EssentialStudio\15.3.0.22\Windows\Grid.Grouping.Windows\Samples\Layout Customization\Record Customization Demo\CS 
 
Sample link: RecordCustomization  
 
Regards, 
Arulpriya 


VD Vincent Duvernet March 3, 2018 10:31 PM UTC

Hi,
I've ran the sampel describe at point 4). That do what I want.
But I don't understand where the column 'Photo' is defined to be on 2 lines. Which part of the code do this ?
Thanks,
Vincent

AR Arulpriya Ramalingam Syncfusion Team March 5, 2018 10:24 AM UTC

Hi Vincent,   
   
Thanks for your update.   
   
In order to span the columns, the range of the spanned column can be added to the ColumnSpans collection of GridColumnSetDescriptor and the GridColumnSetDescriptor can be added to the ColumnSets collection to span the ranges. Please make use of the below code to span the ranges,   
   
Code example   
   
//To add the photo column to GridColumnSpanDescriptor with specified range.   
gridColumnSetDescriptor9.ColumnSpans.AddRange(newSyncfusion.Windows.Forms.Grid.Grouping.GridColumnSpanDescriptor[] {   
new Syncfusion.Windows.Forms.Grid.Grouping.GridColumnSpanDescriptor("Photo","R0C0:R1C0")});   
gridColumnSetDescriptor9.Name = "ColumnSetPhoto";   
   
//To add the GridColumnSetDescriptor to columnsets collection.   
this.gridGroupingControl1.TableDescriptor.ColumnSets.AddRange(newSyncfusion.Windows.Forms.Grid.Grouping.GridColumnSetDescriptor[] { gridColumnSetDescriptor9});   
   
   
Sample link: RecordCustomization    
   
Note   
The code example for adding column sets are included in the InitializeComponent() method of the sample since, the column sets are added at designer time.   
   
Please let us know, if you need further assistance on this.   
   
Regards,   
Arulpriya   


VD Vincent Duvernet March 5, 2018 11:59 PM UTC

ok thanks I understand more how it works.

I've made a screenshot about 3 things still not working as espected : (in this sample, it's a recent history)
- full row select isn't working. Only Per-Cell-Selection is working (feature we don't need)
- I still have on the top 'ArrayList : 16 items. How to hide it ?
- I'm trying to set in Italic the 3rd column (with the path) :

I see the support page :
https://help.syncfusion.com/windowsforms/gridgrouping/appearance-and-formatting which sample is working on my computer. but not my test file (nothing seems o have changed).
          GridColumnDescriptor gridColumnDescriptor1 = new GridColumnDescriptor();
          gridColumnDescriptor1.Appearance.AnyRecordFieldCell.Interior = new BrushInfo(Color.FromArgb(237, 240, 246));
          gridColumnDescriptor1.HeaderText = "Name";    // Displayed name
          gridColumnDescriptor1.MappingName = "Name";             // Name if class RecentElement.cs
           
          this.gridGroupingControl1.TableDescriptor.Columns.AddRange(new GridColumnDescriptor[] {
          gridColumnDescriptor1, gridColumnDescriptor1, gridColumnDescriptor1   });

but this code works (change odd line drawing):
            //
            // Set ODD line color
            //
            GridTableBaseStyle style1 = new GridTableBaseStyle("BaseStyle 1");
            style1.Name = "BaseStyle 1";
            style1.StyleInfo.Font.Facename = "Verdana";
            style1.StyleInfo.Font.Italic = true;
            style1.StyleInfo.BackColor = Color.LightBlue;

            gridGroupingControl1.BaseStyles.Add(style1);
            gridGroupingControl1.Appearance.AlternateRecordFieldCell.BaseStyle = "BaseStyle 1";

            // Applies back color for alternative records in the Grid.
            this.gridGroupingControl1.Appearance.AlternateRecordFieldCell.BackColor = Color.FromArgb (240,249,255);

Did I miss something ?

Thanks,

Vincent

Attachment: capture_77635a01.zip

AR Arulpriya Ramalingam Syncfusion Team March 6, 2018 09:57 AM UTC

Hi Vincent,   
   
Thanks for your update.   
   
Query   
Response   
- full row select isn't working. Only Per-Cell-Selection is working (feature we don't need)   
By default, the CurrentCell will be activated when the ListBoxSelectionMode is enabled. If you want to select the entire row without activating the current cell, the ListBoxSelectionCurrentCellOptions property can be set asHideCurrentCell. Please refer to the below code,   
   
Code example   
   
//To disable activating current cell on selection   
this.gridGroupingControl1.TableOptions.ListBoxSelectionCurrentCellOptions =GridListBoxSelectionCurrentCellOptions.HideCurrentCell;   
   
Moreover, if you want to disable the selection itself, the ListBoxSelectionMode can be set to None. Please make use of the below UG and KB to clear with the selection options,   
   
   
Screenshot   
   
   
Note   
Please refer to the above screenshot and confirm us that the screenshot meets your requirement. If not, provided us your requirement with simple screenshot which will helpful for us to provide a solution at the earliest.   
- I still have on the top 'ArrayList : 16 items. How to hide it ?   
In order to remove/disable the caption bar for the grid, the ShowCaption property can be set to false. Please make use of the below code and UG link,   
   
Code example   
   
//To disable the caption bar   
this.gridGroupingControl1.TopLevelGroupOptions.ShowCaption = false;   
   
   
I'm trying to set in Italic the 3rd column (with the path) :   
By default, the style will be applied for all the cells from entire table control based on the base style name. In order to set the font style for a particular column, the Appearance property for the column can be used. Moreover, theItalic property of GridStyleInfo can be used to set the italic for that column. Please make use of the below code and modified sample,   
   
Code example   
   
gridColumnDescriptor15.MappingName = "FirstName";   
//To apply back color for the "FirstName" Column through column descriptor.   
gridColumnDescriptor15.Appearance.AnyRecordFieldCell.Interior = newSyncfusion.Drawing.BrushInfo(Color.LightSalmon);   
   
//To enable italic for the "FirstName" column at run time.   
this.gridGroupingControl1.TableDescriptor.Columns["FirstName"].Appearance.AnyRecordFieldCell.Font.Italic = true;   
   
Note   
Ensure that the columns are added properly to grid and MappingName/ColumnIndex for the column is provided properly.   
   
   
Regards,   
Arulpriya   


GM Gangabharathy Murugasen Syncfusion Team March 7, 2018 04:50 AM UTC

From: Vincent Duvernet [mailto:[email protected]]
Sent: Tuesday, March 6, 2018 7:36 PM
Subject: RE: Syncfusion support community forum 135868, Column header still displayed, image cell type not reflected, has been updated. 

Hi, 
 
All is working tonight 😊 
 
1)      I’ve used this code from the documentation you provide. I need to have both 
this.gridGroupingControl1.TableOptions.ListBoxSelectionCurrentCellOptions = GridListBoxSelectionCurrentCellOptions.HideCurrentCell; 
this.gridGroupingControl1.TableOptions.ListBoxSelectionMode = System.Windows.Forms.SelectionMode.One; 

2)      That’s ok 

3)      That’s ok too 
 
Thanks again for the quick and very good help. 

Vincent 


GM Gangabharathy Murugasen Syncfusion Team March 7, 2018 04:52 AM UTC

From: Vincent Duvernet [mailto:[email protected]]
Sent: Tuesday, March 6, 2018 8:28 PM
Subject: RE: Syncfusion support community forum 135868, (last question) 

Hi again, 
 
I’m still not sure to understand how cell span works and how to use it the best way. 
First we have the image : 
GridColumnSetDescriptor gridColumnSetDescriptor9 = new GridColumnSetDescriptor(); 
      gridColumnSetDescriptor9.ColumnSpans.AddRange(new GridColumnSpanDescriptor[] { new GridColumnSpanDescriptor("Image", "R0C0:R1C0") }); 
       gridColumnSetDescriptor9.Name = "ColumnSetPhoto"; 
which is  on 1 column and 2 lines. 
 
Then we have the name column and last modified on the first line 
                GridColumnSetDescriptor gridColumnSetDescriptor10 = new GridColumnSetDescriptor(); 
       gridColumnSetDescriptor10.ColumnSpans.AddRange(new GridColumnSpanDescriptor[] { new GridColumnSpanDescriptor("Name", "R0C0"), new GridColumnSpanDescriptor("Folder", "R0C1") }); 
       gridColumnSetDescriptor10.Name = "ColumnSetName"; 
 
And to finish, the folder on the second line 
                GridColumnSetDescriptor gridColumnSetDescriptor11 = new GridColumnSetDescriptor(); 
       gridColumnSetDescriptor11.ColumnSpans.AddRange(new GridColumnSpanDescriptor[] { new GridColumnSpanDescriptor("LastModified", "R1C1:R1C2") }); 
       gridColumnSetDescriptor11.Name = "ColumnLastModified"; 
 
It should looks like this : 
---------------------------------------------- 
Ima   |   Name    |  Last Modified   | 
ge      --------------------------------------- 
          |   Folder                                  | 
---------------------------------------------- 
 
The documentation isn’t clear for me (maybe it’s too late, need to go to bed) 
 
Vincent 
 


AR Arulpriya Ramalingam Syncfusion Team March 8, 2018 10:49 AM UTC

Hi Vincent,  
  
Thanks for the update.  
  
By default, the columns spanned based on the range of the cell. For example, if the columns are spanned with two rows and two columns, the range for the columns are considered as {R0C0, R0C1, R1C0 and R1C1}. So, the columns will be merged based on the range of that particular column span. Please refer to the below image for better understandings of the spanned columns range that explains the range of cells for three rows and three column sets,  
  
Screenshot  
  
   
Note  
The range for the cells will be considered from (0,0) for each ColumnSpans. So, as per your code part, the columns will be spanned as below,  
  
-------------------------------------------------------  
|               |                Name      |      Folder               |  
|   Image  |------------------------------------------- |  
|               |             Last Modified                             |  
-------------------------------------------------------  
  
Please let us know, if you need any further assistance.  
  
Regards,  
Arulpriya  


VD Vincent Duvernet March 10, 2018 02:42 PM UTC

That's wonderful :)

You should publish the screenshot table on the help page because it's very clear <3.

I was able to do what I want using 2 methods :
            //
            // Set SPAN - Method 1 - https://help.syncfusion.com/windowsforms/gridgrouping/grid-layout
            //
            // Create objects for GridColumnSpanDescriptor
            GridColumnSpanDescriptor columnSpanDescriptor0 = new GridColumnSpanDescriptor("Image");
            GridColumnSpanDescriptor columnSpanDescriptor1 = new GridColumnSpanDescriptor("Name");
            GridColumnSpanDescriptor columnSpanDescriptor2 = new GridColumnSpanDescriptor("Folder");
            GridColumnSpanDescriptor columnSpanDescriptor3 = new GridColumnSpanDescriptor("LastModified");

            // Add the required ranges for the created object
            columnSpanDescriptor0.Range = GridRangeInfo.Cells(0, 0, 1, 0);
            columnSpanDescriptor1.Range = GridRangeInfo.Cells(0, 1, 0, 1);
            columnSpanDescriptor2.Range = GridRangeInfo.Cells(1, 1, 1, 2);
            columnSpanDescriptor3.Range = GridRangeInfo.Cells(0, 2, 0, 2);

            // Create object for GridColumnSetDescriptor
            GridColumnSetDescriptor columnSetDescriptor = new GridColumnSetDescriptor();

            // Add the column span descriptor to the created columns set descriptor
            columnSetDescriptor.ColumnSpans.Add(columnSpanDescriptor0);
            columnSetDescriptor.ColumnSpans.Add(columnSpanDescriptor1);
            columnSetDescriptor.ColumnSpans.Add(columnSpanDescriptor2);
            columnSetDescriptor.ColumnSpans.Add(columnSpanDescriptor3);
            this.gridGroupingControl1.TableDescriptor.ColumnSets.Add(columnSetDescriptor);

            //
            // Set SPAN - Method 2 - https://www.syncfusion.com/forums/135868/column-header-still-displayed-image-cell-type-not-reflected
            //
            // To add the photo column to GridColumnSpanDescriptor with specified range.  
            GridColumnSetDescriptor gridColumnSetDescriptor9 = new GridColumnSetDescriptor();
            gridColumnSetDescriptor9.ColumnSpans.AddRange(new GridColumnSpanDescriptor[] { new GridColumnSpanDescriptor("Image", "R0C0:R1C0") });
            gridColumnSetDescriptor9.Name = "ColumnSetPhoto";

            GridColumnSetDescriptor gridColumnSetDescriptor10 = new GridColumnSetDescriptor();
            gridColumnSetDescriptor10.ColumnSpans.AddRange(new GridColumnSpanDescriptor[] { new GridColumnSpanDescriptor("Name", "R0C0"),
                                                            new GridColumnSpanDescriptor("LastModified", "R0C1"),
                                                            new GridColumnSpanDescriptor("Folder", "R1C0:R1C1") });
            gridColumnSetDescriptor10.Name = "ColumnSetName";

            //To add the GridColumnSetDescriptor to columnsets collection.  
            this.gridGroupingControl1.TableDescriptor.ColumnSets.AddRange(new GridColumnSetDescriptor[] {
                                                    gridColumnSetDescriptor9,
                                                    gridColumnSetDescriptor10});
           

AR Arulpriya Ramalingam Syncfusion Team March 12, 2018 08:59 AM UTC

Hi Vincent, 
 
Thanks for the update. 
 
We are glad that the provided solution was resolved your scenario. Also, we have considered your feedback and will update the details in our online document as soon as possible. The modified content will be reflected in the document by our next automation. 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Arulpriya 


Loader.
Up arrow icon