We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to navigate the current cell within the selected ranges like Excel when pressing Enter or Tab key in the GridDataControl?

Platform: WPF |
Control: GridDataControl |
.NET Framework: 4.5 |
Product Version: 12.4.0.24
Tags: selection

In Excel, the current cell is navigated towards right for Tab key and down for Enter key within the selected region. You can also achieve the same requirement in the GridDataControl, but it doesn’t have a direct support.

To achieve this, you need to wire the PreviewKeyDown event in ModelLoaded event to handle the key navigation and SelectionChanging event to clear the selection when the current cell is out of the selected region based on the condition with local variable. You can wire these events as shown in the following code example.

C#

public MainWindow()
{
    InitializeComponent();
    //Wire SelectionChanging event 
    this.gridDataControl.Model.SelectionChanging += Model_SelectionChanging;
    //Wire ModelLoaded event
    this.gridDataControl.ModelLoaded += gridDataControl_ModelLoaded;        
}

The PreviewKeyDown event for the GridDataControl is wired from the ModelLoaded event as shown in the following code example.

C#

void gridDataControl_ModelLoaded(object sender, EventArgs e)
{
    //Wire PreviewKeyDown event 
    this.gridDataControl.PreviewKeyDown += gridDataControl_PreviewKeyDown;
}    

With the help of SelectionChanging event, you can clear the selection when the current cell is clicked outside the selected ranges like Excel as shown in the following code example.

C#

void Model_SelectionChanging(object sender, GridSelectionChangingEventArgs e)
{
    //check the moving state of current cell
    if (isinmoving)
    {
        //if the selection is outside of the cell , then the selected ranges is cleared
        e.Cancel = true;
        //Set the isinmoving state to false 
        isinmoving = false;
    }
}

Now, you can change the navigation behavior of Enter key from right to down like Excel by using the EnterKeyBehaviour.MouseDown in GridDataControl as shown in the following code example.

C#

//Customize the EnterKeyBehaviour in to MouseDown
this.gridDataControl.Model.Options.EnterKeyBehaviour = EnterKeyBehaviour.MouseDown;

With the help of the AlphaBend selection, you can achieve the selection format like Excel as shown in the following code example.

C#

//Format of Selection is changed as AlphaBend
this.gridDataControl.Model.Options.DrawSelectionOptions = GridDrawSelectionOptions.AlphaBlend;

The above AlphaBend selection is displayed in the GridDataControl as shown in the following screenshot.

Default position of the current cell with in selected region

Figure 1 : Default position of the current cell with in selected region

You can get the ranges of selected region by using the SelectedRanges property in the GridDataControl. You need to check whether the current cell is maintained within that selected region or not. With the help of CurrencyManager, you can get the current cell’s row and column index in the GridDataControl as shown in the following code example.

C#

void gridDataControl_PreviewKeyDown(object sender, KeyEventArgs e)
{
    //Get the selected region by using SelectedRanges property
    var range = gridDataControl.Model.SelectedRanges;
    //Get the row index of current cell
    var rowindex = gridDataControl.Model.CurrencyManager.CurrentCell.RowIndex;
    //Get the column index of current cell
    var colindex = gridDataControl.Model.CurrencyManager.CurrentCell.ColumnIndex;           
    // Check whether the pressed is Tab or Enter key
    if (e.Key == Key.Tab)
    {
         //Customize the selection behavior of Tab key
    }
        else if (e.Key == Key.Enter)
    {
         //Customize the selection behavior of Enter key
    }
}

While pressing the Tab key, the next cell is automatically selected as a current cell and you can decide whether the current cell is inside or outside the selected region by comparing the above current cell row and column index with the SelectedRanges as shown in the following code example.

C#

if (e.Key == Key.Tab)
{
    //Need to maintain isinmoving to true if the selection is in moving state while pressing the Tab Key
    isinmoving = true;
    //Check whether the current cell of a column  is exceeded from selected area in to unselected area
    if (range.ActiveRange.Right <= colindex)
    {
        //If the above conditions is satisfied , need to move the selection in to next row at the left position
        gridDataControl.Model.CurrencyManager.CurrentCell.MoveTo(rowindex + 1, range.ActiveRange.Left);                    
        e.Handled = true;
    }
    //Check whether the selection in end of column at selected ranges. 
    if (range.ActiveRange.Bottom <= rowindex && range.ActiveRange.Right <= colindex)
    {
        //if the above condition is satisfied , need to move the selection to the top of selected range at the left        gridDataControl.Model.CurrencyManager.CurrentCell.MoveTo(range.ActiveRange.Top, range.ActiveRange.Left);
        e.Handled = true;
    }
}

Similarly, you can also check and handle navigation behavior when the Enter key is pressed as shown in the following code example.

C#

else if (e.Key == Key.Enter)
{
    //Need to maintain isinmoving to true if the selection is in moving state while pressing the Enter Key
    isinmoving = true;
    //Check whether the current row and column index is equal to selected range top and left position 
    if (range.ActiveRange.Top >= rowindex && range.ActiveRange.Left == colindex)
    {
        //Move to next row if the above condition is satisfied    gridDataControl.Model.CurrencyManager.CurrentCell.MoveTo(range.ActiveRange.Top + 1, range.ActiveRange.Left);
        e.Handled = true;
    }
    //Check whether the current row index with in the selected bottom range and column index should not match end of the selected range
    else if (range.ActiveRange.Bottom <= rowindex && range.ActiveRange.Right != colindex)                                                                    
    {
        //If the above condition is satisfied ,the selection will move to top of the  next column in selected range     gridDataControl.Model.CurrencyManager.CurrentCell.MoveTo(range.ActiveRange.Top, colindex+1);                                                          
        e.Handled = true;
    }
    //Check whether the enter key is pressed at the end of active range in cell 
    else if (range.ActiveRange.Bottom <= rowindex && range.ActiveRange.Right <= colindex)
    {                   
        //Need to move the selection in to top of the first column     gridDataControl.Model.CurrencyManager.CurrentCell.MoveTo(range.ActiveRange.Top, range.ActiveRange.Left);
        e.Handled = true;
    }
}

You can refer to the following sample link to navigate the current cell within the selected ranges of GridCell in WPF.

Link

https://www.syncfusion.com/downloads/support/directtrac/general/CustomizingSelection_GridDataControl_WPF502715471.zip

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile