SfTreeGrid navigation

[Ivailo J]

Hi, I have a few queries about SfTreeGrid:

1. How can I expand/collapse nodes of SfTreeGrid using keyboard? I found this thread: https://www.syncfusion.com/forums/123993/using-keyboard-to-expand-nodes, but the example doesn't work for SfTreeGrid.
   
2. How to set focus programmatically to a TextBox which is in templated SfTreeGrid cell so I can start typing without clicking?
   
3. How can I change the default behavior of Up/Down arrows, when stepped into Combobox column? I would like Up/Down to change combobox selected item instead of move to the Prev/Next row. At the same time I want Left/Right to move focus to Prev/Next column.
   
4. When moving with keyboard in template column, in some cases the focus stuck to a cell and needs a mouse click to exit from that cell. Do you know what is the reason and how to prevent that? 
   

Thanks in advance

[Muthukumar Kalyanasundaram]

Hi Ivailo, 

 

Thank you for contact Syncfusion support. 

 

We have analyzed your query. You can achieve your requirement by overriding the TreeGridSelectionController class. In that class, if you want to customize the navigation behavior, then override the ProcessKeyDown method. Could you please refer the below attached sample and code snippet, 

 

Query 1:  How can I expand/collapse nodes of SfTreeGrid using keyboard?	You can achieve your requirement by using Up and Down arrow key for expanding and collapsing the node in treeGrid.    Code Snippet:  internal class TreeGridSelectionControllerExt : TreeGridRowSelectionController  {      public TreeGridSelectionControllerExt(SfTreeGrid treeGrid) : base(treeGrid)      {        }        protected override void ProcessKeyDown(KeyEventArgs args)      {                  var node = TreeGrid.GetNodeAtRowIndex(this.CurrentCellManager.CurrentCell.RowIndex);                      //Query 1:  Expand/Collapse the node using Up and Down keys.          if (node != null && args.Key == Key.Up)          {              TreeGrid.ExpandNode(node);          }          else if (node != null && args.Key == Key.Down)          {              TreeGrid.CollapseNode(node);          }        }  }
Query 2:  How to set focus programmatically to a TextBox which is in templated SfTreeGrid cell so I can start typing without clicking?	You can achieve your requirement by using Left and Right arrow key to navigate the focus to previous column or next column in treeGrid.    Code Snippet:    protected override void ProcessKeyDown(KeyEventArgs args)  {      var currentColumnIndex = this.CurrentCellManager.CurrentRowColumnIndex.ColumnIndex;      var rowIndex = this.CurrentCellManager.CurrentRowColumnIndex.RowIndex;            // Query 2 & Query 3: SfTreeGrid cell start typing without clicking any cell and to move focus to Prev/Next column      if (args.Key == Key.Left)      {           this.MoveCurrentCell(new RowColumnIndex(rowIndex, currentColumnIndex - 1));           this.TreeGrid.ScrollInView(this.CurrentCellManager.CurrentRowColumnIndex);           this.CurrentCellManager.BeginEdit();      }        else if (args.Key == Key.Right || args.Key == Key.Enter)      {           this.MoveCurrentCell(new RowColumnIndex(rowIndex, currentColumnIndex + 1));           this.TreeGrid.ScrollInView(this.CurrentCellManager.CurrentRowColumnIndex);           this.CurrentCellManager.BeginEdit();      }  }
Query 3:  How can I change the default behavior of Up/Down arrows, when stepped into Combobox column? I would like Up/Down to change combobox selected item instead of move to the Prev/Next row. At the same time I want Left/Right to move focus to Prev/Next column.
Query 4:  When moving with keyboard in template column, in some cases the focus stuck to a cell and needs a mouse click to exit from that cell. Do you know what is the reason and how to prevent that?	You can achieve your requirement by navigating template column to another column by using Tab and Shift+Tab key.    Code Snippet:    protected override void ProcessKeyDown(KeyEventArgs args)  {    // Query 4: Focus on GridTemplateColumn to another column.    if (SelectionHelper.CheckShiftKeyPressed())      {          if (rowIndex == TreeGrid.GetFirstDataRowIndex() && currentColumnIndex ==    TreeGrid.GetFirstColumnIndex())              return;            if (currentColumnIndex == TreeGrid.GetFirstColumnIndex())          {              this.MoveCurrentCell(new RowColumnIndex(rowIndex - 1, TreeGrid.Columns.Count));              this.TreeGrid.ScrollInView(this.CurrentCellManager.CurrentRowColumnIndex);          }          else          {              this.MoveCurrentCell(new RowColumnIndex(rowIndex, currentColumnIndex - 1));              this.TreeGrid.ScrollInView(this.CurrentCellManager.CurrentRowColumnIndex);          }      }      else      {          if (rowIndex == TreeGrid.GetLastDataRowIndex() && currentColumnIndex ==  TreeGrid.GetLastColumnIndex())              return;          if (currentColumnIndex == TreeGrid.GetLastColumnIndex())          {              this.MoveCurrentCell(new RowColumnIndex(rowIndex + 1, 1));              this.TreeGrid.ScrollInView(this.CurrentCellManager.CurrentRowColumnIndex);          }          else          {              this.MoveCurrentCell(new RowColumnIndex(rowIndex, currentColumnIndex + 1));              this.TreeGrid.ScrollInView(this.CurrentCellManager.CurrentRowColumnIndex);          }      }        this.CurrentCellManager.BeginEdit();  }  }

 

Sample: http://www.syncfusion.com/downloads/support/forum/129425/ze/SfTreeGrid_Demo1278884443 

 

Please let us know if you have any query. 

 

Regards, 

Muthukumar K 

 

[Ivailo J]

Hello,

When we move with Down key in celltemplateselector column and the cell is not in the visible area it can't be edit because in the treeGrid_CurrentCellActivated event Me.treeGrid.SelectionController.CurrentCellManager.CurrentCell is Nothing.

Here is a code snippet:

        <DataTemplate x:Key="textBoxTemplate">

            <TextBox Text="{Binding Path=Result}" Width="Auto" 

                                    BorderBrush="{x:Null}"

                                    VerticalContentAlignment="Center"

                                    Loaded="FirstCellResult_Loaded"/>

        </DataTemplate>

        <DataTemplate x:Key="labelTemplate">

            <Label x:Name="Profile" Content="*"

                       Width="Auto" VerticalContentAlignment="Center">

            </Label>

        </DataTemplate>

        <DataTemplate x:Key="comboBoxTemplate">

            <ComboBox x:Name="ComboBoxResListItems"

                      DisplayMemberPath="ResVal"

                      SelectedValuePath="ResVal"

                      SelectedValue="{Binding Path=Result}"

                      VerticalContentAlignment="Center">

                <!--syncfusion:FocusManagerHelper.FocusedElement="True"-->

                <ComboBox.ItemsSource>

                    <MultiBinding Converter="{StaticResource ResListItemsConv}">

                        <Binding Path="DataContext.AvailableResListItems"  RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type syncfusion:SfTreeGrid}}"/>

                        <Binding />

                    </MultiBinding>

                </ComboBox.ItemsSource>

            </ComboBox>

        </DataTemplate>

       <local:SettingsTemplateSelector 

            x:Key="settingsTemplateSelector" 

            TextBoxTemplate="{StaticResource textBoxTemplate}"             

            ComboBoxTemplate="{StaticResource comboBoxTemplate}"

            LabelTemplate="{StaticResource labelTemplate}"/>

               <syncfusion:SfTreeGrid.Columns>

                        <syncfusion:TreeGridTemplateColumn HeaderText="{x:Static l10n:ResLabPatient.Result}" MappingName="Result" Width="120"

                                                       VerticalAlignment="Center" AllowFocus="True"

                                                       CellTemplateSelector="{StaticResource settingsTemplateSelector}"/>

                      <!-- More comuns here -->

               </syncfusion:SfTreeGrid.Columns>

    Private Sub treeGrid_CurrentCellActivated(sender As Object, e As Syncfusion.UI.Xaml.Grid.CurrentCellActivatedEventArgs) Handles treeGrid.CurrentCellActivated

        If Me.treeGrid.SelectionController.CurrentCellManager.CurrentCell IsNot Nothing Then

            Dim textbox As TextBox = WpfHelper.FindVisualChild(Of TextBox)(Me.treeGrid.SelectionController.CurrentCellManager.CurrentCell.ColumnElement)

            If textbox IsNot Nothing Then

                TryCast(textbox, TextBox).Focus()

            End If

        End If

    End Sub

=====================

About query 3 from previous post: We open combobox cell with Enter key, and then we want with Up/Down keys to move through its items and press Enter again to close combo and set the selected item. But when using Up/Down keys it moves to the next row.

Thanks for your help

[Muthukumar Kalyanasundaram]

Hi Ivailo, 

 

Thanks for the update. 

 

The cell is not visible where pressing Down key, the currentcell value are null in CurrentCellActivate event ?

We have considered as a defect and the fix will be included in Vol 2 main release which is scheduled to be rolled out by the end of April.

To open the dropdown of combobox column by pressing enter key and navigate selected the item by Up and Down keys. ?

You can achieve your requirement by using Enter key to open the dropdown in combobox column. Please refer the below code snippet and attached sample.    Code Snippet:      this.treeGrid.SelectionController = new TreeGridSelectionControllerExt(this.treeGrid);    // Query 3: Pressing enter key to open the dropdown in combobox column.   protected override void ProcessKeyDown(KeyEventArgs args)  {  if (args.Key == Key.Enter)  {      if (CurrentCellManager.CurrentCell.TreeGridColumn is  TreeGridComboBoxColumn)      {          this.CurrentCellManager.BeginEdit();           var s = ((CurrentCellManager.CurrentCell.ColumnElement as  TreeGridCell).Content);                             (s as ComboBox).IsDropDownOpen = true;      }  }  }

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/175843/ze/SfTreeGrid_ComboBox-366724480 

 

Please let us know if you have any query. 

 

Regards, 

Muthukumar K 

 

[Ivailo J]

Could you prepare an example achieving our requirement (to open the dropdown by pressing enter key and navigate the items by Up and Down keys) using CellTemplateSelector like the code snippet above instead of syncfusion:TreeGridComboBoxColumn?For the same templated column in the code snippet above we want to handle CurrentCellValidating but it doesn't raise.

[Muthukumar Kalyanasundaram]

Hi Ivalio, 

Thanks for the update. 

We have analyzed your query and we don’t have the support for CurrentCellValidating  event in TreeGridTemplateColumn. Because it is possible to extend the functionality of TreeGridColumns with your own editor by using CellTemplate and EditTemplate of TreeGridTemplateColumn and so unable to identify which UI Elements needs to be focused. Could you please refer the below link, 

https://help.syncfusion.com/wpf/sftreegrid/data-validation#limitations 

You can achieve your requirement by using custom renderer. For more details, you can refer the below link, 

https://help.syncfusion.com/wpf/sftreegrid/column-type#custom-column-support 

Please let us know if you have any query. 

Regards, 

Muthukumar K 

[Muthukumar Kalyanasundaram]

Hi Ivalio,