Template Column with button reuires 2 clicks to trigger

[Declan Hillier]

I need to have a Folder Browser column in an sfDataGrid.  I have achieved this using a template column with a button in it:-

                                    <sf:SfDataGrid IsEnabled="{Binding AnalysisConfiguration.MachinesConfiguration.UseLocal}"

                                                   ItemsSource="{Binding AnalysisConfiguration.MachinesConfiguration.LocalMachinesConfiguration}"

                                                   AutoGenerateColumns="False"

                                                   ColumnSizer="Auto"

                                                   ShowRowHeader="True"

                                                   AddNewRowPosition="Bottom" AddNewRowText="Add New Machine"

                                                   AllowEditing="True" EditTrigger="OnTap"

                                                   AllowDeleting="True" SelectionUnit="Row"

                                                   Grid.Row="1" Margin="2,2,2,2">

                                        <sf:SfDataGrid.Columns>

                                            <sf:GridTextColumn HeaderText="Database Folder" MappingName="DatabaseFolder" ColumnSizer="Star" />

                                            <sf:GridTemplateColumn>

                                                <sf:GridTemplateColumn.CellTemplate>

                                                    <DataTemplate>

                                                        <Button Content="..." Click="BrowseForLocalDBFolder" Width="Auto" Tag="{Binding}" />

                                                    </DataTemplate>

                                                </sf:GridTemplateColumn.CellTemplate>

                                            </sf:GridTemplateColumn>

                                            <sf:GridTextColumn HeaderText="Number of Aquator XV Instances" MappingName="NumberOfAquatorInstances" ColumnSizer="Auto"/>

                                        </sf:SfDataGrid.Columns>

                                    </sf:SfDataGrid>

This is working fine.

(Note, I need to be able to pass the row's bound item to the event handler, hence my use of the button's Tag.  I don't think that'll be relevant but might affect possible answers)

However, the button requires 2 clicks to call the underlying function.  (My guess is that the first click forces the cell into edit mode, exposing the button for the second click)  Is there a way I can change this so that the event fires on the first click?

I've tried overriding OnCurrentCellActivated and calling BeginEdit but that didn't work.  I've also tried setting the FocusManager.FocusedElement for the button to true but that didn't work either.

Any suggestions?

[Vijayarasan Sivanandham]

We have prepared a simple sample based on a provided code snippet. When we are setting the FocusManagerHelper.FocusedElement in Button the click event trigger at first clicks on our end. Refer to the code snippet,

<syncfusion:GridTemplateColumn  syncfusion:FocusManagerHelper.WantsKeyInput="True">

                    <syncfusion:GridTemplateColumn.CellTemplate>

                        <DataTemplate>

                            <Button Content="..." Click="BrowseForLocalDBFolder"

                                    syncfusion:FocusManagerHelper.FocusedElement="True" 

                                    syncfusion:VisualContainer.WantsMouseInput="True"

                                    Width="Auto" Tag="{Binding}" />

                        </DataTemplate>

                    </syncfusion:GridTemplateColumn.CellTemplate> 

</syncfusion:GridTemplateColumn>

UG Link: https://help.syncfusion.com/wpf/datagrid/column-types#mouse-interaction-for-uielement-loaded-inside-template

https://help.syncfusion.com/wpf/datagrid/column-types#setting-focus-to-particular-element-inside-template-when-cell-gets-activated-or-edited

KB Link: https://www.syncfusion.com/kb/2526/how-to-focus-a-particular-uielement-inside-datatemplate-after-calling-currentcell-beginedit

https://www.syncfusion.com/kb/2433/how-to-handle-keyboard-and-mouse-interactions-for-gridtemplatecolumn

Find the sample in the attachment. If we misunderstood your requirement, please provide more information regarding the requirement. This would help us to proceed further.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SfDataGridDemo_43118c67.zip

[Declan Hillier]

Thanks for the answer.  Unfortunately that didn't quite fix it for me, though it has got the behaviour considerably closer.

It now only requires a single click as long as no other cell on the row is currently editing.  If another cell is editing then the first click on the button seems to end the edit on the current cell but it still requires a second click to fire the button.

I'm afraid I couldn't get your package to run for me (something to do with the nuget dependency) but I knocked up a similar single form prototype which I've attached.  Try the following steps:-

1. Run the package
2. Click somewhere in the left half of the New Row - this will add a new row and put the focus into the text column cell.
3. Click on the button.  It won't fire but this appears to take the text column cell out of edit mode.
4. Click on the button again.  It will now fire
5. Now click the New Row again to add a second new row
6. Press up to move focus to the first row's text cell but this won't actually start editing the text cell
7. Click either of the buttons.  It will fire first time.

So I think what's happening is that, if a cell is in edit mode, the first click ends that edit but does not act as a click on the target cell.  Once the edit mode is cleared the second click hits the target cell.

Is there a way of getting the first click to both end the edit AND target the button?

Attachment: MainWindow.xaml_9f43e5f4.zip

[Declan Hillier]

Sorry attached the wrong file.  Use this one.

Attachment: MainWindow.xaml_9f305639.zip

[Vijayarasan Sivanandham]

Declan Hillier,

As you mentioned in the previous update, the first click ends that edit, which has no impact on Button loaded template column, as it is the default behavior.

However, you overcome this by setting the ClickMode property as Press in Button. Refer to the below code snippet,

<sf:GridTemplateColumn sf:FocusManagerHelper.WantsKeyInput="True">

     <sf:GridTemplateColumn.CellTemplate>

         <DataTemplate>

             <Button Content="..."                                  

                     ClickMode="Press"

                     sf:FocusManagerHelper.FocusedElement="True"

                     sf:VisualContainer.WantsMouseInput="True"

                     Click="BrowseForLocalDBFolder"

                     Width="Auto"

                     Tag="{Binding}" />

         </DataTemplate>

     </sf:GridTemplateColumn.CellTemplate>                  

 </sf:GridTemplateColumn>

Find the modified sample in the attachment.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: Modified_Sample_bb4bdacd.zip

[Declan Hillier]

Awesome!  That was the last piece of the puzzle I was looking for and I'm now getting exactly the behaviour I want.

Thank you for your help.

[Vijayarasan Sivanandham]

Declan Hillier,

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you😊.