Articles in this section
Category / Section

How to show different controls in same column of WPF DataGrid (SfDataGrid)?

2 mins read

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.


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;
             return Application.Current.MainWindow.Resources["CellTemplate2"] as DataTemplate;


       <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:VisualContainer.WantsMouseInput="True" />
       <DataTemplate x:Key="CellTemplate2">
            <TextBox Text="{Binding Path=EmployeeId, Mode=TwoWay }"          
<!--setting DataTemplate using CellTemplateSelector for EmployeeId column in SfDataGrid -->
<Syncfusion:GridTemplateColumn MappingName="EmployeeId"     
                               CellTemplateSelector="{StaticResource cellselector}"
                               Syncfusion:FocusManagerHelper.WantsKeyInput="True" >


In the above sample, EmployeeId column is alternatively loaded with ComboBox and TextBox which will appear as below,

Loading different controls without editing in WPF DataGrid

Loading different controls while entering edit mode

To load different control in edit mode for the same column, you have to use GridTemplateColumn.EditTemplateSelector.


<!—Setting DataTemplate using EditTemplateSelector for EmployeeId column in SfDataGrid-->
                EditTemplateSelector="{StaticResource EditTemplate}" 
               <TextBlock Text="{Binding Path=EmployeeId}" Margin="5,0,0,0"/>



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,

Loading different controls while editing in WPF DataGrid


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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment