Cascading ComboBoxes in C1FlexGrid

C1FlexGrid has been the most popular tool for representing/editing data for a long time. There are scenarios where a ComboBox is required in C1FlexGrid for editing for eg. when we need to enter a Country in a cell. It can be implemented using one of the following approaches :

  1. Set the ComboList property of a column (http://helpcentral.componentone.com/nethelp/c1flexgrid/#!Documents/listsandcombos.htm)
  2. Set the CellStyle.DataMap property (http://helpcentral.componentone.com/nethelp/c1flexgrid/#!XMLDocuments/C1FlexRef/html/P\_C1\_Win\_C1FlexGrid\_CellStyle_DataMap.htm)

Some of our customers have asked how to implement Cascading ComboBoxes that are dependent on one another. We're going to discuss how to implement this in this article using the CellStyle.DataMap property of C1FlexGrid. Something like : C1FlexGrid_CascadingComboBoxes

Setup ComboBoxes

To set up the ComboBoxes, we need to declare different CellStyles with different Datamaps and add these styles to C1FlexGrid.

public void CreateGridCombo()  
{  
   DataTable dt = new DataTable();  
   ListDictionary datamap1 = new ListDictionary();  

   //Create DataMap for Column 1  
   for (int i = 0; i <= dt.Rows.Count - 1; i++)  
   {  
      datamap1.Add(dt.Rows[i][1], dt.Rows[i][0]);  
   }  

   CellStyle style1 = c1FlexGrid1.Styles.Add("combo1");  
   style1.DataMap = datamap1;  

   //Set style of Column 1  
   c1FlexGrid1.Cols[1].Style = style1;  

   //Create DataMaps and Styles for Column 2  
   ListDictionary datamap2 = new ListDictionary();  
   datamap2.Add("1", "New Delhi");  
   datamap2.Add("2", "Kashmir");  
   datamap2.Add("3", "Maharashtra");  

   style2 = c1FlexGrid1.Styles.Add("combo2");  
   style2.DataMap = datamap2;  
}

Similarly, we can add CellStyles and Datamaps for other values of the first ComboBox.

Cascade Effect

To achieve the cascading effect in the ComboBoxes of two different cells, we need to fetch the value selected in the first column and set the appropriate style in the second column. This is done in the AfterEdit event of C1FlexGrid.

private void c1FlexGrid1_AfterEdit(object sender, RowColEventArgs e)  
{  
   if (e.Col == 1)  
   {  
      //Set the CellStyle of Column 2 depending on the value selected in Column 1  
      if (c1FlexGrid1[e.Row, e.Col].ToString() == "1")  
      {  
         c1FlexGrid1.SetCellStyle(e.Row, e.Col + 1, style2);  
      }  
      else if (c1FlexGrid1[e.Row, e.Col].ToString() == "2")  
      {  
         c1FlexGrid1.SetCellStyle(e.Row, e.Col + 1, style3);  
      }     
      else if (c1FlexGrid1[e.Row, e.Col].ToString() == "3")  
      {  
         c1FlexGrid1.SetCellStyle(e.Row, e.Col + 1, style4);  
      }  
   }  
}

Here is a video showing what we have achieved. C1FlexGrid_CascadingComboBoxes Please refer to the attached samples for complete implementation of the above mentioned scenario. Download C# Sample Download VB Sample

GrapeCity

GrapeCity Developer Tools
comments powered by Disqus