ComponentOne TrueDbGrid provides support for setting dropdown editors for columns. You can set an MS-Combo, Checkboxes or C1TrueDbDropDown as column editors. These have been provided for the ease of data presentation/manipulation to the end-user for a long time. Customers are sometimes required to create an application which works in all resolutions. That is, when the resolution changes or the user re-sizes the Form, the entire C1TrueDbGrid, its rows' heights and column width should grow/shrink proportionally to the Form. The ComponentOne SizerLight is a non-visual component that when added to the Form keeps track of the Form's size and position. When the Form is re-sized, it re-sizes all contained controls proportionally so the Form retains its appearance at any resolution. C1SizerLight can also re-size the fonts on all or some of the contained controls. However, it does not make any changes to the column width or row height and does not re-size the checkboxes or custom editors when the parent Form is re-sized. Through this blog we will discuss a workaround for this.

Binding Grid

Let's begin by placing C1Sizerlight component and then a C1TrueDbGrid on the Form. Bind the grid to a collection of objects of class 'Persons.' Next, we will add a few ValueItems to the ValueItemCollection of Column["ID"]. When any cell in Column["ID"] is clicked it displays a cell button. When clicked on, this cell button displays a dropdown with translated values. Also, the Column["Present"] is displayed as checkbox since it is a boolean column.

C1.Win.C1TrueDBGrid.ValueItems items = this.C1TrueDBGrid1.Columns["ID"].ValueItems;  
items.Translate = true;  
items.Values.Add(new C1.Win.C1TrueDBGrid.ValueItem("1", "A"));  
items.Values.Add(new C1.Win.C1TrueDBGrid.ValueItem("2", "B"));  
items.Values.Add(new C1.Win.C1TrueDBGrid.ValueItem("3", "C"));  
items.Values.Add(new C1.Win.C1TrueDBGrid.ValueItem("4", "D"));  
items.Values.Add(new C1.Win.C1TrueDBGrid.ValueItem("5", "E"));

Defining Custom Editor Class

Now, instead of using a combobox, we will create a custom editor by inheriting MS-ComboBox and implementing C1.Win.C1FlexGrid.IC1EmbeddedEditor interface. This interface is used by C1FlexGrid to host editor controls in the cell. Please note that the methods in IC1EmbeddedEditor are called using reflection. Controls do not need to implement the entire interface. The custom editor code is:

 public class CustomEditor: ComboBox, C1.Win.C1FlexGrid.IC1EmbeddedEditor  
  {  
   public string C1EditorFormat(object value, string mask)  
    {  
     return string.Concat(value);  
    }  

   public System.Drawing.Design.UITypeEditorEditStyle C1EditorGetStyle()  
    {  
     return System.Drawing.Design.UITypeEditorEditStyle.None;  
    }  

   public object C1EditorGetValue()  
    {  
     return ((CustomItem)this.SelectedItem).Key;  
    }  

   public void C1EditorInitialize(object value, System.Collections.IDictionary editorAttributes)  
    {  
     foreach (CustomItem item in this.Items)  
      {  
        if (item.Key == Convert.ToInt32(value))  
        {  
         this.SelectedItem = item;  
         return;  
        }  
      }  
    }  

   public bool C1EditorKeyDownFinishEdit(System.Windows.Forms.KeyEventArgs e)  
    {  
      return false;  
    }  

  public void C1EditorUpdateBounds(System.Drawing.Rectangle rc)  
   {  
    base.Location = rc.Location;  
    base.Size = rc.Size;  
   }  

  public bool C1EditorValueIsValid()  
   {  
    return true;  
   }  
  }

To populate this custom editor, we will create another class, 'CustomItem,' which will populate the dropdown editor of Column["ID"].

 public class CustomItem  
  {  
   public int Key { get; set; }  
   public string Value { get; set; }  
   public CustomItem(int key, string value)  
    {  
     this.Key = key;  
     this.Value = value;  
    }  
   public override string ToString()  
    {  
     return this.Value;  
    }  
  }

We will create a List of objects of this class, add items to it and assign this editor as Columns["ID"] editor.

  // Populate and set custom editor for column "ID"  
  editor = new CustomEditor();  
  editor.Items.Add(new CustomItem(1, "A"));  
  editor.Items.Add(new CustomItem(2, "B"));  
  editor.Items.Add(new CustomItem(3, "C"));  
  editor.Items.Add(new CustomItem(4, "D"));  
  editor.Items.Add(new CustomItem(5, "E"));  
  C1TrueDBGrid1.Columns["ID"].Editor = editor;

Custom CheckBox Column

We will set the OwnerDraw property of Column["Present"] to True to handle the drawing of images in each cell and the cell itself.

  if (e.Column.Name == "Present")  
  {  
    e.Handled = true;  
    Rectangle rect = e.CellRect;  
    e.Graphics.FillRectangle(Brushes.White, rect);  
    Point pos = new Point(rect.Left + (rect.Width - rect.Height) / 2, rect.Top);  
     if (e.Text == "True")  
      {  
       e.Graphics.DrawImage(onImage, new Rectangle(pos, new Size(rect.Height, rect.Height - 2)));  
      }  
     else if (e.Text == "False")  
      {  
       e.Graphics.DrawImage(offImage, new Rectangle(pos, new Size(rect.Height, rect.Height - 2)));  
      }  
  }

The user needs to toggle the checkbox's state at runtime using Click event of C1TrueDbGrid.

  int row = 0;  
  int col = 0;  
  Point pos = C1TrueDBGrid1.PointToClient(Control.MousePosition);  
  C1TrueDBGrid1.CellContaining(pos.X, pos.Y, out row, out col);  
  if (col > -1 && C1TrueDBGrid1.Splits[0].DisplayColumns[col].Name == "Present")  
   {  
    if (Convert.ToBoolean(C1TrueDBGrid1[row, col]))  
      C1TrueDBGrid1[row, col] = false;  
    else if (!Convert.ToBoolean(C1TrueDBGrid1[row, col]))  
      C1TrueDBGrid1[row, col] = true;  
   }

Handling Resizing

Once the custom editors are set, we will take care of resizing the checkbox (within boolean column) and cell button (in column with dropdown editor). With the ResizeFonts property of C1SizerLight set to True, it resizes the Font of all controls (optional). Also, we will set the custom editor's Font and the C1TrueDbGrid's RowHeight in the ResizingFont event of C1SizerLight. To re-size the columns proportionally, set C1TrueDbGrid's SpringMode property to True.

  if (e.Control.Name == this.C1TrueDBGrid1.Name)  
   {  
    C1TrueDBGrid1.Splits[0].HeadingStyle.Font = C1TrueDBGrid1.Font;  
    C1TrueDBGrid1.Splits[0].Style.Font = C1TrueDBGrid1.Font;  
    editor.Font = C1TrueDBGrid1.Font;  
    C1TrueDBGrid1.RowHeight = editor.PreferredHeight - 1;  
   }

After debugging the code, our original grid looks like: And after resizing it will look as follows: Download C# Sample Download VB Sample