Articles in this section
Category / Section

How to set focus to a specific part of the DateTimeEdit column in Silverlight 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

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