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

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

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




5 Replies

SS Susmitha Sundar Syncfusion Team February 3, 2020 10:14 AM

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> 
 
 
 
Please check the sample and let us know if you need further assistance on this. 
 
Regards, 
Susmitha S 



MR MrHessellund February 3, 2020 11:28 AM

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


SS Susmitha Sundar Syncfusion Team February 4, 2020 12:28 AM

 
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 



MR MrHessellund February 4, 2020 01:28 AM

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.


SS Susmitha Sundar Syncfusion Team February 5, 2020 06:31 AM

 
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); 
             } 
         } 
     } 
 
 } 
 
 
 
Please check the sample and let us know if you need further assistance on this. 
 
Regards, 
Susmitha S 


Loader.
Live Chat Icon For mobile
Up arrow icon