Getting focus to an edit control in SfDataGrid

[Brent Hoskisson]

I have an SfDataGrid with one of the editable columns being a Date. I am using an EditTemplate with syncfusion:DateTimeEdit because I need finer control of the user input and allow the users to manually type in a date in a custom format. I also have it set up so tabbing will automatically start the cell in edit mode. This much works fine.

The issue is that on other controls I use for editing, I just need to put in

syncfusion:FocusManagerHelper.FocusedElement="True" and it will start the cell in edit mode AND put the cursor there ready to enter information. This does NOT work with the DateTimeEdit control for some reason. Currently tabbing does start the edit, but focus is not set to the text box of the control.

How can I tab into the cell, start the editing on the DateTimeEdit control AND set the focus to the textbox of that control?

Thanks for any ideas.

Brent Hoskisson

[Vijayarasan Sivanandham]

Hi Brent Hoskisson,

The possible solution to resolve the reported scenario has been shared below.

Solution 1:

Your requirement to start the editing on the DateTimeEdit control and setting the focus to the textbox of that control by pressing the tab key in SfDataGrid can be achieved by customizing the default row selection behaviors by overriding the GridSelectionController class and setting it to SfDataGrid.SelectionController. Please refer to the below code snippet,

//Inherits the GridSelectionController Class

public class GridSelectionControllerExt : GridSelectionController

{

    public GridSelectionControllerExt(SfDataGrid datagrid)

      : base(datagrid)

    {

    }

 

    //overriding the ProcessKeyDown Event from GridSelectionController base class

    protected override void ProcessKeyDown(KeyEventArgs e)

    {

        base.ProcessKeyDown(e);

 

        //Here customize the Tab key behavior

        if (e.Key == Key.Tab)

        {

            if (DataGrid != null)

            {

                if (DataGrid.SelectionController != null)

                {

                    if (DataGrid.SelectionController.CurrentCellManager != null)

                    {

                        if (DataGrid.SelectionController.CurrentCellManager.CurrentCell != null)

                        {

                            if (DataGrid.SelectionController.CurrentCellManager.CurrentCell.GridColumn != null)

                            {

                                if (DataGrid.SelectionController.CurrentCellManager.CurrentCell.GridColumn.MappingName == "OrderDate")

                                {

                                    //Here call the BeginEdit method to enter the edit mode in SfDataGrid

                                    if (!DataGrid.SelectionController.CurrentCellManager.CurrentCell.IsEditing)

                                        DataGrid.SelectionController.CurrentCellManager.BeginEdit();

                                }

                            }

                        }

                    }

                }

            }

 

        }

    }

}

UG Link: https://help.syncfusion.com/wpf/datagrid/selection#customizing-selection-behaviors

KB Link: https://www.syncfusion.com/kb/3815/how-to-change-the-enter-key-behavior-in-sfdatagrid

Solution 2:

You can navigate to the multiple controls loaded in GridTemplateColumn by Tab Key can be achieved by overriding ShouldGridTryToHandleKeyDown method in GridCellTemplateRenderer. For more information related to navigation in GridTemplatecolumn, please refer to the below knowledge base documentation link,

KB Link: https://www.syncfusion.com/kb/11912/how-to-navigate-to-the-multiple-controls-loaded-in-gridtemplatecolumn-by-tab-key-in-wpf

https://www.syncfusion.com/kb/2526/how-to-focus-a-particular-uielement-inside-datatemplate-after-calling-currentcell-beginedit

https://www.syncfusion.com/kb/2433/how-to-handle-keyboard-and-mouse-interactions-for-gridtemplatecolumn

Solution 3:

GridDateTimeColumn contains support to display the date in a custom format. It can be achieved by setting CustomPattern value into Pattern property in GridDateTimeColumn. Refer the below code snippet,

<syncfusion:GridDateTimeColumn MappingName="OrderDate" HeaderText="DateTimeColumn" CustomPattern="dd-MM-yyyy" Pattern="CustomPattern"/>

UG Link: https://help.syncfusion.com/wpf/datagrid/column-types#change-the-pattern-of-date-time-value

Find the sample demo in the attachment.

Regards,

Vijayarasan S

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: Sample_1d807e6.zip

[Brent Hoskisson]

Thanks, I have it working now as desired.

Brent Hoskisson

[Vijayarasan Sivanandham]

Brent Hoskisson,

If you are satisfied with our response, please mark it as an answer. Otherwise, please let us know if you have any further queries on this. We are happy to help you😊.