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

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

Thread ID:

Created:

Updated:

Platform:

Replies:

151164 Feb 2,2020 02:50 PM UTC Feb 5,2020 02:31 PM UTC WPF 5
loading
Tags: SfTreeGrid
MrHessellund
Asked On February 2, 2020 02:50 PM UTC

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 [Syncfusion]
Replied On February 3, 2020 06:14 PM UTC

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 


MrHessellund
Replied On February 3, 2020 07:28 PM UTC

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 [Syncfusion]
Replied On February 4, 2020 08:28 AM UTC

 
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
Replied On February 4, 2020 09:28 AM UTC

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 [Syncfusion]
Replied On February 5, 2020 02:31 PM UTC

 
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 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon