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.
Unfortunately, activation email could not send to your email. Please try again.

SfTreeGrid navigation

Thread ID:

Created:

Updated:

Platform:

Replies:

129425 Mar 16,2017 11:43 AM Apr 27,2017 11:23 PM WPF 8
loading
Tags: SfTreeGrid
Ivailo J
Asked On March 16, 2017 11:43 AM

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 [Syncfusion]
Replied On March 18, 2017 10:48 PM

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(); 
} 
} 
 
 
 
Please let us know if you have any query. 
 
Regards, 
Muthukumar K 
 


Ivailo J
Replied On March 23, 2017 11:17 AM

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 [Syncfusion]
Replied On March 26, 2017 11:56 PM

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; 
    } 
} 
} 
 
 
 
 
Please let us know if you have any query. 
 
Regards, 
Muthukumar K 
 


Ivailo J
Replied On March 29, 2017 03:45 AM

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 [Syncfusion]
Replied On March 31, 2017 12:14 AM

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, 


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


Please let us know if you have any query. 

Regards, 
Muthukumar K 


Muthukumar Kalyanasundaram [Syncfusion]
Replied On April 11, 2017 12:33 PM

Hi Ivalio, 

  

We have checked this “the cell is not visible where pressing Down key, the currentcell value are null in CurrentCellActivate event” in our source. This isn’t an issue, if the row is not in view, we can’t get the data column. So the current cell value will be null. You can resolved this problem by using dispatcher as shown like below code,  

  

Code Snippet: 

  

this.treeGrid.CurrentCellActivated += TreeGrid_CurrentCellActivated; 

  

private void TreeGrid_CurrentCellActivated(object sender, CurrentCellActivatedEventArgs e) 

{ 

    this.Dispatcher.BeginInvoke(new Action(() => 

    { 

        if (this.treeGrid.SelectionController.CurrentCellManager.CurrentCell != null) 

        { 

        } 

    }), DispatcherPriority.ApplicationIdle); 

  

} 

  

Sample: http://www.syncfusion.com/downloads/support/forum/129425/ze/SfTreeGrid_Demo-1154339773 

  

Please let us know if you have any query.  

 

Regards, 

Muthukumar K 

Ivailo J
Replied On April 20, 2017 07:05 AM

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 


Hi Muthukumar, Me and my colleague have no success with data validation.
If we understand right the custom renderer will help us if we have CellTemplate and EditTemplate for the column (the examples from the documentation demonstrate that). Sorry if we missed something, but we can't figure out how to apply this technique to our project. I have tried to reproduce our case in a demo, based on your project (look the attached file). I added a new column for salary using template as it is in our project. Let say that we want to check if the entered salary is larger than 50000, then show message and stay in the cell to correct it. Could you point us how to do that?

PS: If we use TreeGridTextColumn instead of TreeGridTemplateColumn
<syncfusion:TreeGridTextColumn HeaderText="Salary" MappingName="Salary" AllowFocus="True" AllowEditing="True" CellTemplateSelector="{StaticResource settingsTemplateSelector}"/>
it partly does the job and the CurrentCellValidating event is raised but only if F2 key is pressed.

Thanks

Attachment: SfTreeGrid_Demo_c1b5825e.zip

Muthukumar Kalyanasundaram [Syncfusion]
Replied On April 27, 2017 11:23 PM

Hi Ivalio, 
 
Sorry for the delay in response. 
  
 
We have checked your query. The reported issue with “CurrenctCellvalidating event are not fired, when we select on cell in TreeGridTemplateColumn" has been confirmed as a defect. We have logged a bug report on this reported query. This fix will be include in 2017 Volume2 release. 
 
Please let us know if you have any query. 
 
Regards, 
Muthukumar K 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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.

;