TemplateColumn - How to have control in Celltemplate only visible if cell focused or hovered?

[MrHessellund]

Hi,

Is it possible to show some of the controls in the datatemplate only when cell has focus? ... or on mouse-over (hover) ?

<syncfusion:TreeGridTemplateColumn x:Name="sfTreeFileColumn" HeaderText="Filnavn"
                                                   MappingName="Filename" AllowSorting="False" ColumnSizer="Auto" HorizontalHeaderContentAlignment="Left" MaximumWidth="180" MinimumWidth="120"
                                                   AllowEditing="False" ShowToolTip="True" >
                        <syncfusion:TreeGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Grid>
                                    <TextBlock Text="{Binding Filename}" VerticalAlignment="Center" Margin="3,0,0,0"/>
                                    <WrapPanel HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,3,0" Visibility="{Binding ...}">
                                        <Button ToolTip="Nulstil" Background="{x:Null}" BorderBrush="{x:Null}" >
                                            <fa5:SvgAwesome Icon="Solid_Eraser"  Width="10" Height="10" />
                                        </Button>
                                        <Button ToolTip="Vælg fil" Margin="3,0,0,0"
                                                Command="{Binding AddFilesCommand, Source={StaticResource viewModel}}"
                                                CommandParameter="{Binding}">...</Button>
                                    </WrapPanel>
                                </Grid>
                            </DataTemplate>
                        </syncfusion:TreeGridTemplateColumn.CellTemplate>
                    </syncfusion:TreeGridTemplateColumn>

Also?

When shown on hover, how to ensure button events on first click on buttons inside the datatemplate?

Thanks in advance.

Best regards,

Johannes

[Susmitha Sundar]

Hi Johannes, 

 

Thank you for using Syncfusion control. 

 

You did not set visibility for control inside the DataTemplate when focusing the cell. We have prepared the sample based on your requirement. In this sample we have loaded the user control in GridTemplateColumn. And set the visibility in GotFocus and LostFocus event. Please refer the below code, 

C#: 

<syncfusion:TreeGridTemplateColumn  MappingName="Title" SetCellBoundValue="True" > 

     <syncfusion:TreeGridTemplateColumn.CellTemplate> 

         <DataTemplate> 

             <Grid> 

                 <local:GridButtonColumn syncfusion:FocusManagerHelper.FocusedElement="True"/> 

             </Grid> 

         </DataTemplate> 

     </syncfusion:TreeGridTemplateColumn.CellTemplate> 

    

 </syncfusion:TreeGridTemplateColumn> 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/151164/ze/SfTreeGrid_GridTemplateColumn-1355508469 

 

 

Please check the sample and let us know if you need further assistance on this. 

 

Regards, 

Susmitha S 

[MrHessellund]

Hi,

Thank you very much.

However, I cannot seem to get the buttons working.

Also, what if the buttons are visible on mouse-enter or always visible. How to achieve one-click activation?

Thanks in advance

[Susmitha Sundar]

Hi Johannes, 

 

Thank you for your update. 

 

In your previous update, you want to show the controls on Focus. So, we have overridden our selection controller to achieve this. If you want to work with buttons, you need to comment out the HandlePointerOpertion method in selection controller and set the syncfusion:FocusManagerHelper.FocusedElement as True for buttons. 

 

<StackPanel Orientation="Horizontal" Width="150" > 

    <TextBlock x:Name="textBlock" Text="{Binding Value}" Width="50" Height="30" Visibility="Visible" syncfusion:FocusManagerHelper.FocusedElement="True"/> 

    <Button x:Name="button2" Content="Button2" Visibility="Visible" Width="50" Height="30" Click="Button2_Click" syncfusion:FocusManagerHelper.FocusedElement="True"/> 

    <Button x:Name="button3" Content="Button3" Visibility="Visible" Width="50"  Height="30" Click="Button3_Click" syncfusion:FocusManagerHelper.FocusedElement="True"/> 

</StackPanel> 

 

 

 

 

  public class GridSelectionControllerExt : TreeGridRowSelectionController 

  { 

      SfTreeGrid sfTreeGrid; 

      public GridSelectionControllerExt(SfTreeGrid treeGrid) 

       : base(treeGrid) 

      { 

          sfTreeGrid = treeGrid; 

      } 

      protected override void ProcessKeyDown(KeyEventArgs args) 

      { 

          base.ProcessKeyDown(args); 

          if (CurrentCellManager.CurrentCell.TreeGridColumn is TreeGridTemplateColumn) 

          { 

              CurrentCellManager.CurrentCell.Renderer.SetFocus(true); 

          } 

      } 

 

      //public override void HandlePointerOperations(GridPointerEventArgs args, RowColumnIndex rowColumnIndex) 

      //{ 

      //    base.HandlePointerOperations(args, rowColumnIndex); 

      //    if (args.Operation == PointerOperation.Released) 

      //    { 

      //        if (CurrentCellManager.CurrentCell.TreeGridColumn is TreeGridTemplateColumn) 

      //        { 

      //            CurrentCellManager.CurrentCell.Renderer.SetFocus(true); 

      //        } 

      //    } 

      //} 

 

  } 

 

 

 

Now, you request both always visible and Mouse Enter operations to show them. Can you please confirm which one you need? 

 

Regards, 

Susmitha S 

[MrHessellund]

Hi,

Thank you. Will try it out.

I will test both mouse-enter and always visible.

I would be greatfull for a sample with mouse-over shown buttons which can be clicked ny one -click.

Thank you.

[Susmitha Sundar]

Hi Johannes, 

 

Thank you for your update. 

 

You can achieve this by HandlePointerOpertion method in selection controller. Here we have checked the condition for mouse move. Please refer the below code snippet, 

 

public class GridSelectionControllerExt : TreeGridRowSelectionController 

 { 

     SfTreeGrid sfTreeGrid; 

     public GridSelectionControllerExt(SfTreeGrid treeGrid) 

      : base(treeGrid) 

     { 

         sfTreeGrid = treeGrid; 

     } 

     protected override void ProcessKeyDown(KeyEventArgs args) 

     { 

         base.ProcessKeyDown(args); 

         if (CurrentCellManager.CurrentCell.TreeGridColumn is TreeGridTemplateColumn) 

         { 

             CurrentCellManager.CurrentCell.Renderer.SetFocus(true); 

         } 

     } 

 

     public override void HandlePointerOperations(GridPointerEventArgs args, RowColumnIndex rowColumnIndex) 

     { 

         base.HandlePointerOperations(args, rowColumnIndex); 

         if (args.Operation == PointerOperation.Move) 

         { 

             if (sfTreeGrid.Columns[rowColumnIndex.ColumnIndex] is TreeGridTemplateColumn) 

             { 

                     this.sfTreeGrid.SelectionController.MoveCurrentCell(rowColumnIndex, false); 

                     CurrentCellManager.CurrentCell.Renderer.SetFocus(true); 

             } 

         } 

     } 

 

 } 

 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/151164/ze/SfTreeGrid_TemplateColumn-561313538 

 

Please check the sample and let us know if you need further assistance on this. 

 

Regards, 

Susmitha S