Articles in this section
Category / Section

How to set focus to a specific part of the DateTimeEdit column in WPF DataGrid ?

2 mins read

GridDataControl provides support for GridDateTimeColumn, incorporating DateTimeEdit controls in its cells and it helps you to interactively set a date and time value. In GridDateTimeColumn by default, when you enter into Edit mode in DateTimeEdit cell, focus is set to the first part of DateTime. In the following screenshot, the first part (month) is focused when you enter into Edit mode .

Figure 1: First Part (month) is focused by default

You can customize this behavior by overriding the corresponding GridCellDateTimeEditCellRenderer and GridCellModel class. The cellmodel class just creates the cell type by calling the cellrenderer. For customizing the focus, you need to wire the loaded event of the corresposnding uielement, such as, DateTimeEdit in the OnWireUIElement method. In the loaded event of the uielement, you can change the focus to specific parts, by changing the SelectionStart and SelectionLength values.

The following code example explains how you can change selection range in a loaded event.

C#

public class CustomCellDateTimeEditCellRenderer : GridCellDateTimeEditCellRenderer
{
    //Override OnwireUIElement method.
    protected override void OnWireUIElement(DateTimeEdit uiElement)
    {
        uiElement.Loaded+=uiElement_Loaded;
        base.OnWireUIElement(uiElement);
    }
    //Change the Selection Range.
    private void uiElement_Loaded(object sender, RoutedEventArgs e)
    {
        var datetimeedit = sender as DateTimeEdit;
        datetimeedit.CustomPattern = "MM/dd/YYYY";
        //Get the position of the Date.
        int selectionStart = datetimeedit.CustomPattern.IndexOf('d');
        //Change the Selection start position and length.
        if (datetimeedit.SelectionStart != selectionStart)
        {
            datetimeedit.SelectionStart = selectionStart;
            datetimeedit.SelectionLength = 2;
        }
        e.Handled = true;
    }
}

Now create a new cell model class that is derived from GridCellModel and pass the custom cell renderer class as the Generic parameter of this GridCellModel.

The following code example explains how to override the GridCellModel class.

C#

public class CustomDateTimeEditCellModel : GridCellModel< CustomCellDateTimeEditCellRenderer>
{    
}

After this, you can remove the old cell model and add a new custom cell model into the CellModels Collection.

The following code snippet demonstrates adding custom cell model in the CellModels collection.

C#

public MainWindow()
{
   InitializeComponent();
   this.grid.Model.CellModels.Remove("DateTimeEdit");
   this.grid.Model.CellModels.Add("DateTimeEdit", new CustomDateTimeEditCellModel());            
}      

The following screenshot illustrates the customized focus in GridDateTimeColumn.

Figure 2:Date is focused when entered in Edit mode

You can refer the sample from the following location.

Link: DateTimeEdit_WPF 


Conclusion

I hope you enjoyed learning about how to  set  focus to a specific part of the DateTimeEdit column.

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?
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