How to Bind AsyncCommand to DataGrid Template Column with HyperlinkButton using MVVM

[SrinivasPam]

We are developing Desktop application using UnoPlatform in which we are using DataGrid from CommunityToolkit.WinUI.UI.Controls for displaying some data.

So, my requirement is to have HyperlinkButton for one of the DataGrid Column and am using DataTemplate as shown in below code to achieve the functionality.

Issue here is that how to Bind a Command which is there in ViewModel to HyperlinkButton click/Command event?

DataGrid ItemSource is Bind to GridData observable collection from ViewModel.

I am trying to Bind ChildItemInvokedCommand which is there in My StorageAccountViewModel to HyperlinkButton Command however this is not working.

What am i missing here? Any help would be appreciated.

ViewModel :

public partial class StorageAccountViewModel : ObservableObject
{
 public ObservableCollection<ChildFolder> GridData { get; } = new ObservableCollection<ChildFolder>();

private IAsyncRelayCommand _childItemInvokedCommand;
public IAsyncRelayCommand ChildItemInvokedCommand => _childItemInvokedCommand ?? (_childItemInvokedCommand = new AsyncRelayCommand<ChildFolder>(OnChildItemInvoked));

   private async Task OnChildItemInvoked(ChildFolder item)
    {
            // get clicked item here for further functionality

    }
}

ChildFolder.cs

public class ChildFolder
    {
        [JsonProperty("folderName")]
        public string FolderName { get; set; }

        [JsonProperty("folderPath")]
        public string FolderPath { get; set; }        
    }

Page.xamal:

<Page
    x:Class="MDTSStorageExplorer.Views.StorageAccountsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MDTSStorageExplorer.Views"
    xmlns:models="using:MDTSStorageExplorer.Models"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
<controls:DataGrid
             x:Uid="DataTable"
             x:Name="detailGrid"
              AutoGenerateColumns="False"
             GridLinesVisibility="None" 
              DataContext="{x:Bind ViewModel}"
              ItemsSource="{x:Bind ViewModel.GridData}" >
            <controls:DataGrid.Columns>
            <controls:DataGridTemplateColumn Header="Name" >
            <controls:DataGridTemplateColumn.CellTemplate>
              <DataTemplate>
                  <HyperlinkButton Content="{Binding FolderName}" IsDoubleTapEnabled="True" CommandParameter="{Binding}" Command="{Binding Path=ChildItemInvokedCommand}" >
                                               
                   </HyperlinkButton>
             </DataTemplate>
         </controls:DataGridTemplateColumn.CellTemplate>
        </controls:DataGridTemplateColumn>
       </controls:DataGrid.Columns>
 </controls:DataGrid>
    </Grid>
</Page>

[jeromelaban]

Thanks for the report! To direct you to the proper location, we need to know if the behavior you're observing is also present on UWP or WinAppSDK. Is that the case?

[SrinivasPam]

Yes, the behaviour is same. looks like we will be able to resolve using like this Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=DataContext.DeleteCommentCommand}" but AncestorType={x:Type DataGrid}}, is not recognized. all am getting is Mode which has values "None, Self and TemplateParent"

[jeromelaban]

If the behavior is the same, I'd suggest to open a discussion here: https://github.com/CommunityToolkit/WindowsCommunityToolkit/discussions