Sunday, January 23, 2011

Create DataGrid in WPF using code

In this post I will explain a way to create DataGrid in WPF through code. I will use a DataTable with two columns as a DataSource for the DataGrid. I will display one column as TextBox while the second column will be displayed as ComboBox. You can download complete sample from here. My main Window contains single Grid inside which I will display my DataGrid. I will use MainGrid_Initialized event to create DataGrid.


 Inside MainGrid_Initialized event I am creating a DataGrid and adding two columns inside it. One for the TextBox and other for the ComboBox. Then I am setting a DataTable as DataSource for my DataGrid which contains two columns "TextBoxColumn" and "ComboBoxColumn". At the end, I am placing my DataGrid in the Main Window's Grid.
   1:  DataGrid dataGrid = new DataGrid();
   2:  dataGrid.AutoGenerateColumns = false;
   3:   
   4:  dataGrid.Columns.Add(CreateTextBoxColumn());
   5:  dataGrid.Columns.Add(CreateComboBoxColumn());
   6:  //set DataTable as item source of dataGrid
   7:  dataGrid.ItemsSource = GetDataTable().AsDataView();
   8:   
   9:  //place DataGrid inside main Grid
  10:  Grid.SetColumn(dataGrid,0);
  11:  Grid.SetRow(dataGrid,0);
  12:  MainGrid.Children.Add(dataGrid);
In CreateTextBoxColumn method I am defining my TextBox based column. I am creating two templates one for viewing(TextBlock) and other for editing (TextBox). I am also creating bindings between DataTable's "TextBoxColumn" with the TextBlock and the TextBox templates.

   1:  private DataGridTemplateColumn CreateTextBoxColumn()
   2:          {
   3:              //create a template column
   4:              DataGridTemplateColumn templateColumn = new DataGridTemplateColumn();
   5:              //set title of column
   6:              templateColumn.Header = "TextBoxColumn";
   7:              //non editing cell template.. will be used for viweing data
   8:              DataTemplate textBlockTemplate = new DataTemplate();
   9:              FrameworkElementFactory textBlockElement = new FrameworkElementFactory(typeof(TextBlock));
  10:              Binding textBlockBinding = new Binding("TextBoxColumn");
  11:              textBlockElement.SetBinding(TextBlock.TextProperty, textBlockBinding);
  12:              textBlockTemplate.VisualTree = textBlockElement;
  13:              templateColumn.CellTemplate = textBlockTemplate;
  14:   
  15:              //editing cell template ... will be used when user will edit the data
  16:              DataTemplate textBoxTemplate = new DataTemplate();
  17:              FrameworkElementFactory textboxElement = new FrameworkElementFactory(typeof(TextBox));
  18:              Binding textboxBinding = new Binding("TextBoxColumn");
  19:              textboxElement.SetBinding(TextBox.TextProperty, textboxBinding);
  20:              textBoxTemplate.VisualTree = textboxElement;
  21:              templateColumn.CellEditingTemplate = textBoxTemplate;
  22:              return templateColumn;
  23:          }
Similarly, I am creating a column for ComboBox

   1:   private DataGridTemplateColumn CreateComboBoxColumn()
   2:          {
   3:              //create a template column
   4:              DataGridTemplateColumn templateColumn = new DataGridTemplateColumn();
   5:              //set title of column
   6:              templateColumn.Header = "ComboBoxColumn";
   7:              //non editing cell template.. will be used for viweing data
   8:              DataTemplate textBlockTemplate = new DataTemplate();
   9:              FrameworkElementFactory textBlockElement = new FrameworkElementFactory(typeof(TextBlock));
  10:              Binding textBlockBinding = new Binding("ComboBoxColumn");
  11:              textBlockElement.SetBinding(TextBlock.TextProperty, textBlockBinding);
  12:              textBlockTemplate.VisualTree = textBlockElement;
  13:              templateColumn.CellTemplate = textBlockTemplate;
  14:   
  15:              //editing cell template ... will be used when user will edit the data
  16:              DataTemplate comboboxTemplate = new DataTemplate();
  17:              FrameworkElementFactory comboboxElement = new FrameworkElementFactory(typeof(ComboBox));
  18:              Binding comboboxBinding = new Binding("ComboBoxColumn");
  19:              comboboxElement.SetBinding(ComboBox.TextProperty, comboboxBinding);
  20:   
  21:              //combo box will show these options to select from
  22:              comboboxElement.SetValue(ComboBox.ItemsSourceProperty, new List<string> { "Value1", "Value2" ,"Value3", "Value4" });
  23:              comboboxTemplate.VisualTree = comboboxElement;
  24:              templateColumn.CellEditingTemplate = comboboxTemplate;
  25:              return templateColumn;
  26:          }
You can download complete sample from here and play with it

2 comments:

  1. sorry your sample code can not downloaded from your given link so can You please forward mail me on my mail-id of sample code.
    My mail-id is ranaforyou.rana7@gmail.com

    Thanks

    ReplyDelete