Conditional DataTemplates in C1DataGrid
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.aspx) 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.aspx) 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.aspx&ei=-kLdVZCUHJSruQSg9IOQBw&usg=AFQjCNEs9hvYoNVWKFF102PBQPTkXC2fvg&sig2=INQQBncp8uZdQLtLaVJzpA) 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.aspx&ei=TUPdVeiZLcrbuQSwibDQBQ&usg=AFQjCNHX7R1dfWW1eAH_BAI6s8wQ2U3RJw&sig2=XhYkLt7rMu8_TYTa1FiDdg) for DataBindings.aspx). 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!!!
MESCIUS inc.