How to show different controls in same column of WPF DataGrid (SfDataGrid)?
You can show different controls in same column of WPF DataGrid (SfDataGrid) by using CellTemplateSelector and EditTemplateSelector properties.
Loading different controls in display
If you want to load different control in display for the same column, you have to use GridTemplateColumn.CellTemplateSelector.
C#
public class GridCellTemplateSelector : DataTemplateSelector
{
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
var data = item as Model;
if (data == null)
return base.SelectTemplate(item, container);
if (data.EmployeeId % 2 == 0)
return Application.Current.MainWindow.Resources["CellTemplate1"] as DataTemplate;
else
return Application.Current.MainWindow.Resources["CellTemplate2"] as DataTemplate;
}
}
XAML
<Window.Resources>
<local:ViewModel x:Key="viewmodel"/>
<local:GridCellTemplateSelector x:Key="cellselector"/>
<DataTemplate x:Key="CellTemplate1">
<ComboBox ItemsSource="{Binding Path=ComboBoxItemSource,
Mode=TwoWay, Source={StaticResource viewmodel}}"
SelectedValue="{Binding Path=EmployeeId}"
Syncfusion:FocusManagerHelper.FocusedElement="True"
Syncfusion:VisualContainer.WantsMouseInput="True" />
</DataTemplate>
<DataTemplate x:Key="CellTemplate2">
<TextBox Text="{Binding Path=EmployeeId, Mode=TwoWay }"
Syncfusion:FocusManagerHelper.FocusedElement="True"/>
</DataTemplate>
</Window.Resources>
<!--setting DataTemplate using CellTemplateSelector for EmployeeId column in SfDataGrid -->
<Syncfusion:GridTemplateColumn MappingName="EmployeeId"
CellTemplateSelector="{StaticResource cellselector}"
Syncfusion:FocusManagerHelper.WantsKeyInput="True" >
</Syncfusion:GridTemplateColumn>
In the above sample, EmployeeId column is alternatively loaded with ComboBox and TextBox which will appear as below,
Loading different controls while entering edit mode
To load different control in edit mode for the same column, you have to use GridTemplateColumn.EditTemplateSelector.
XAML
<!—Setting DataTemplate using EditTemplateSelector for EmployeeId column in SfDataGrid-->
<syncfusion:GridTemplateColumn
MappingName="EmployeeId"
EditTemplateSelector="{StaticResource EditTemplate}"
AllowEditing="True">
<syncfusion:GridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=EmployeeId}" Margin="5,0,0,0"/>
</DataTemplate>
</syncfusion:GridTemplateColumn.CellTemplate>
</syncfusion:GridTemplateColumn>
GridTemplateColumn.AllowEditing property should be set true for loading controls in edit mode.
You can use the same DataTemplates and the SelectTemplate method here, which were defined for loading controls in display mode.
In the above sample, first row in EmployeeId column is loaded with textbox while the second row in the same column is loaded with ComboBox which appears as below,
Conclusion
I hope you enjoyed learning about how to show different controls in same column of WPF DataGrid (SfDataGrid).
You can refer to our WPF Grid feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Grid documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
