Search code examples
c#xamluwpsyncfusion

TemplateColumn button command binding not working in Syncfusion DataGrid


I'm using Syncfusion's datagrid in a UWP project. Everything works fine except command binding of button inside a GridTemplateColumn. What could be the issue ?

XAML

<my:GridTemplateColumn MappingName="Actions" HeaderText="Actions"
                       AllowFiltering="False">
    <my:GridTemplateColumn.CellTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Spacing="0"  HorizontalAlignment="Center">
                <Button  VerticalAlignment="Center" Width="40" Content="Delete"   
                         my:FocusManagerHelper.FocusedElement="True"
                              Command="{x:Bind ViewModel.RemoveBtnCommand}"/>
            </StackPanel>
        </DataTemplate>
    </my:GridTemplateColumn.CellTemplate>
</my:GridTemplateColumn>  

View Model

public ICommand RemoveBtnCommand { get; }
public HRMDepartmentsViewModel()
{
    IsActive = true;
    RemoveBtnCommand = new AsyncRelayCommand(CommandRemoveBtnClickedExecute);
}
private async Task CommandRemoveBtnClickedExecute()
{
  // never executed-- code here 
}  

What else i've tried
I tried to use Binding instead if x:Bind but it also doesn't work

Command="{Binding Path=RemoveBtnCommand}" CommandParameter="{Binding}"  

Observation

If i don't use Command and use Click event binding it works.

<my:GridTemplateColumn MappingName="Actions" HeaderText="Actions"
                       AllowFiltering="False">
    <my:GridTemplateColumn.CellTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Spacing="0"  HorizontalAlignment="Center">
                <Button  VerticalAlignment="Center" Width="40" Content="Delete"
                         Click="{x:Bind ViewModel.ButtonBase_OnClick}"/>
            </StackPanel>
        </DataTemplate>
    </my:GridTemplateColumn.CellTemplate>
</my:GridTemplateColumn>  

View Model

public void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
    // It gets called
}

Solution

  • TemplateColumn button command binding not working in Syncfusion DataGrid

    I'm afraid you can't bind the button command in the DataTemplate like above, because command will not find correct DataContext. If you want to bind the ViewModel's RemoveBtnCommand, you need get root DataContext then direct to RemoveBtnCommand property. For more please refer the following code.

    <Page.DataContext>
        <local:MainViewModel x:Name="ViewModel" />
    </Page.DataContext>
    <Grid>
        <Custom:SfDataGrid x:Name="MyDataGrid" ItemsSource="{Binding Orders}">
            <Custom:SfDataGrid.Columns>
                <Custom:GridTemplateColumn
                    AllowFiltering="False"
                    HeaderText="Actions"
                    MappingName="Actions"
                    >
                    <Custom:GridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel
                                HorizontalAlignment="Center"
                                Orientation="Horizontal"
                                Spacing="0"
                                >
                                <TextBlock Text="{Binding Name}" />
                                <Button
                                    Width="40"
                                    VerticalAlignment="Center"
                                    Custom:FocusManagerHelper.FocusedElement="True"
                                    Command="{Binding ElementName=MyDataGrid, Path=DataContext.RemoveBtnCommand}"
                                    Content="Delete"
                                    />
                            </StackPanel>
                        </DataTemplate>
                    </Custom:GridTemplateColumn.CellTemplate>
                </Custom:GridTemplateColumn>
            </Custom:SfDataGrid.Columns>
        </Custom:SfDataGrid>
    </Grid>