Articles in this section
Category / Section

How to handle keyboard and mouse interactions for GridTemplateColumn?

5 mins read

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.

Note:

Enter and Tab keys are always handled by Grid only.

 

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


Conclusion

I hope you enjoyed learning about how to handle keyboard and mouse interactions for GridTemplateColumn in WPF Datagrid.

You can refer to our WPF DataGrid feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF DataGrid 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?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied