Tab navigation in edit mode SilverLight DataGrid

Question

I am trying to create Tab navigation for SilverLight DataGrid (sdk:DataGrid). As you know DataGrid has not such navigation, but if you press F2, edit a cell and after that you press Tab then next cell will selected in edit mode:

The image description: I had selected the second column (Name) of the first row, I edited this cell (pressed F2) and after that I pressed Tab and as you can see next cell is selected in edit mode.

But actually my B column contains Button or Image (unfortunately, now I am working not with my computer and I cannot demonstrate my DataGrid with Button) and if I press F2 for a Date cell and after that I press Tab then Button of next cell disappears and I cannot continue navigation using arrows or Tab (as though DataGrid hangs).

If I override DatGrid.KeyUp:

void MyGrid_KeyUp(object sender, KeyEventArgs e)
{
  if (e.Key == Key.Tab)
  {
    //do nothing              
  }
}

Then DataGrid has the same behavior like earlier if I use F2 and Tab.

How I can do the following:

1) Press F2; 2) If after F2 I press Tab, next cell does not go to edit mode like in this case. I want that after Tab next cell will just focused without the editing like if I clicked to cell using mouse.

Thanks!

P.S. if I override LostFocus:

void MyGrid_LostFocus(object sender, RoutedEventArgs e)
{
  MyGrid.CommitEdit();
}

It does not solve the problem with columns which contain Button.

elias elias · Accepted Answer · 2014-04-07T08:26:53

I have solved the issue using CurrentCellChanged, please see exemplary code below:

/// <summary>
/// Checks if current column contains graphic elements, focuses next cell of next column.
/// </summary>
/// <param name="dg">Source DataGrid</param>
private static void CurrentCellChangedHandler(DataGrid dg)
{
  if (isCurrentCellContainsGraphicElement(dg))
  {
    FocusNextCell(dg);
  }
}

/// <summary>
/// Checks if current cell contains a graphic element.
/// </summary>
/// <param name="dg">Source DataGrid</param>
/// <returns>true if current column contains graphic elements, else - false</returns>
private static bool isCurrentCellContainsGraphicElement(DataGrid dg) 
{
  var box = DataGridExcelNavigation.GetCellItem<TextBox>(dg.SelectedItem, dg.CurrentColumn);

  if (box != null) return false;

  return true;
}

private static T GetCellItem<T>(object item, DataGridColumn column) where T : class
{
  if (item == null) return null;

  var cellData = (column.GetCellContent(item) as T);
  if (cellData == null)
  {
    var gridData = (column.GetCellContent(item) as Panel);
    if (gridData != null)
    {
      cellData = (gridData.Children.Where(x => x.GetType() == typeof(T)).FirstOrDefault() as T);
    }
  }
  return cellData;
}

Tab navigation in edit mode SilverLight DataGrid

1 Answers