How to handle keyboard and mouse interactions for GridTemplateColumn?

In SfDataGrid, while using the TemplateColumn you cannot handle key navigation, mouse interaction and focusing for controls loaded within DataTemplate by default. This is because, as you can load any control within the DataTemplate, it is not possible to focus on the control loaded within the DataTemplate by default. Hence, GridTemplateColumn provides the list of attached property to handle key navigation, mouse interaction, focusing for loaded controls within DataTemplate. You can get the following attached properties in Syncfusion.UI.Xaml.Grid namespace.

• FocusManagerHelper.FocusedElement
• FocusManagerHelper.WantsKeyInput
• VisualContainer.WantsMouseInput

Thus, in order to enter edit mode using keyboard you need to set focus to the control loaded inside the DataTemplate explicitly. To set the focus to the control loaded inside the DataTemplate you can use the attached property, FocusedElement.

FocusedElement

The attached property FocusedElement gives focus to particular UIElement loaded inside the DataTemplate. So, you can enter edit mode using keyboard itself.

The following code sample shows, how to set the FocusedElement inside DataTemplate

XAML

<syncfusion:GridTemplateColumn MappingName="SalesID">
    <syncfusion:GridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding SalesID}"/>
        </DataTemplate>
    </syncfusion:GridTemplateColumn.CellTemplate>
    <syncfusion:GridTemplateColumn.EditTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <TextBox Text="{Binding SalesID, Mode=TwoWay}"
                                syncfusion:FocusManagerHelper.FocusedElement="True"/>
            </Grid>
        </DataTemplate>
    </syncfusion:GridTemplateColumn.EditTemplate>
</syncfusion:GridTemplateColumn>

WantsKeyInput

The attached property allows the controls loaded in CellTemplate to handle key navigation within it or by Grid. When you set it to ‘false’, you cannot navigate using keys within the loaded control.

The following code sample explains you about WantsKeyInput.

XAML

<syncfusion:GridTemplateColumn MappingName="ProductId" syncfusion:FocusManagerHelper.WantsKeyInput= "True">
    <syncfusion:GridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Grid>
                <TextBox x:Name="text" Text="{Binding ProductId}"/>
            </Grid>
        </DataTemplate>
    </syncfusion:GridTemplateColumn.CellTemplate>
</syncfusion:GridTemplateColumn>

WantsMouseInput

The attached property allows the controls loaded in CellTemplate to handle mouse interaction within it or by Grid.

The following code example explains you about WantsMouseInput

XAML

<syncfusion:GridTemplateColumn MappingName="ProductName">
    <syncfusion:GridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Grid>
                <ComboBox syncfusion:VisualContainer.WantsMouseInput="True">
                    <ComboBoxItem Content="Item 1" />
                    <ComboBoxItem Content="Item 2" />
                    <ComboBoxItem Content="Item 3" />
                    <ComboBoxItem Content="Item 4" />
                </ComboBox>
            </Grid>
        </DataTemplate>
    </syncfusion:GridTemplateColumn.CellTemplate>
</syncfusion:GridTemplateColumn>

In addition to the above attached properties, you can set focused element by using FocusManager. FocusedElement attached property which comes in WPF framework can be used only for EditTemplate and not for editing inside the CellTemplate.

Sample Link:

WPF