ComponentOne’s DataGrid for WPF gives us the ability to create different types of Columns. But what if we wish to add different types of cells in a single column. We can surely achieve this functionality in C1DataGrid with the help of DataTriggers in a DataGridTemplateColumn. The different cell contents are created based on the data which is bound to it, we just need to check the data or its type and add a DataTemplate accordingly.
With this blog, we are going to create an Application Form using C1DataGrid. Below are the steps to achieve our requirements.

Step 1: Create a ViewModel for binding


First of all, we need a ViewModel for creating and binding each cell in the Column.
public class ViewModel
{
public ObservableCollection<string> ControlTypes
{
get;
set;
}
public ViewModel()
{
ControlTypes = new ObservableCollection<string>();
ControlTypes.Add("Name");
ControlTypes.Add("Designation");
ControlTypes.Add("Company");
ControlTypes.Add("Gender");
ControlTypes.Add("Age");
ControlTypes.Add("IsActive");
ControlTypes.Add("Address");
ControlTypes.Add("");
}
}


 

Step 2: Creating DataGridTemplateColumn


Now, we need to add a C1DataGrid into our designer and add a DataGridTemplateColumn in which we are going to insert different types of cells based on the data. In this DataGridTemplateColumn, we are going to define its CellTemplate in which we’ll customize the Style of ContentControl with the help of DataTriggers. Here we used DataTrigger because we want to add different controls in cells based on the data.

<c1:C1DataGrid Name="c1DataGrid" ItemsSource="{Binding ControlTypes}" AutoGenerateColumns="False" HeadersVisibility="None" Grid.Row="1"
RowHeight="Auto">
<c1:C1DataGrid.Columns>
<c1:DataGridTextColumn Header="Control Type" Binding="{Binding}"/>
<c1:DataGridTemplateColumn Header="Actual Control">
<c1:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ContentControl>
<ContentControl.Style>
<Style TargetType="ContentControl">
<Style.Triggers>
<DataTrigger Binding="{Binding}" Value="Name">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="Name"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="Designation">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="Designation"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="Company">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="Company"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="Gender">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<ComboBox>
<ComboBox.Items>
<ComboBoxItem Content="Male"/>
<ComboBoxItem Content="Female"/>
</ComboBox.Items>
</ComboBox>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="IsActive">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox Content="IsActive?"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="Address">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<c1:C1RichTextBox TextWrapping="Wrap" Width="300" Height="50" VerticalScrollBarVisibility="Auto"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding}" Value="Button">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Button Content="Button"/>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</DataTemplate>
</c1:DataGridTemplateColumn.CellTemplate>
</c1:DataGridTemplateColumn>
</c1:C1DataGrid.Columns>
</c1:C1DataGrid>

Step 3: Setting DataContext


We have performed all the necessary steps to create cells. Now, the final step is to set the DataContext for DataBindings. We have many options where we want to set the DataContext for current page. But, we prefer to set it in a Constructor, just after the initialization of components because Xaml binding runs just after the initialization.
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}

Conclusion: 


We can add different types of cells in a single column of C1DataGrid with the help of DataTriggers in a DataGridTemplateColumn.

See it in action!!!


Conditional Templates In C1DataGrid

 

Download Sample