What is the correct way to bind a command on button in template?

[Pierre]

How to bind to ViewModel a button on a template column. Maybe I do it wrong? I need to add a delete line button.

Thanks

Here my grid:

<telerikGrid:RadDataGrid x:Name="dataGrid" Grid.Row="3" Margin="5"
            ItemsSource="{Binding Lots, Mode=TwoWay}"
            IsSynchronizedWithCurrentItem="True"
            UserEditMode="Inline"
            UserGroupMode="Disabled"
            AutoGenerateColumns="False">
    <telerikGrid:RadDataGrid.Columns>
        <telerikGrid:DataGridNumericalColumn PropertyName="Code" CanUserEdit="False" CanUserFilter="False" Header="# de lot"/>
        <telerikGrid:DataGridNumericalColumn PropertyName="Qte" Header="Qte à transféré"/>
        <telerikGrid:DataGridTemplateColumn Header="" CanUserResize="False" CanUserEdit="False" SizeMode="Fixed" Width="43">
            <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Button Command="{Binding cmdDeleteLot}" Margin="4">
                            <fa:FontAwesome Icon="Trash"/>
                        </Button>
                    </StackPanel>
                </DataTemplate>
            </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
        </telerikGrid:DataGridTemplateColumn>
    </telerikGrid:RadDataGrid.Columns>
</telerikGrid:RadDataGrid>

[Pierre]

Not many replies! ;-)

For now the only way I found is to use a binding on the TAG of the button and use a generic "codeBehind" event

<Button Tag="{Binding Code}" Click="Button_Click" Margin="4">

Then I call the viewModel function from there.. Not pretty! 

But I still got a problem, in the view model I remove the item then I manually call NotifyPropertyChanged(nameof(Lots)); but the grid does not reload and the item is still there. Any idea?

[Pierre]

After several test. I can see the after removing the item and calling the NotifyProperties, the "GET" from binding is called from the grid. In the codebihind, I can see that dataGrid.ItemsSource is OK too (the item is removed). I think the grid just do not "redraw" himself of the collection in cache is not updated !?!

[Nasko]

Hello Pierre,

I will go straight to your questions.

1. The DataGridTemplateColumn is a specific type of Column that gets its DataContext set internally to the data item the row is visualizing. In order to set the desired ViewModel as DataContext ad the Command Binding to be working as expected the DataContext should be set after the control is completely loaded - in the Loaded event for example.

2. For your second issue the DataGrid is most probably not updating because the collection the ItemsSource is bound to does not inherit and implement the INotifyCollectionChanged interface - please, check if the collection you are using implements it. Attached you could find a sample that demonstrates the described above approaches - please, notice how the row is removed as expected when the ItemsSource is bound to an ObservableCollection.

Hope this helps.

Regards,
Nasko
Progress Telerik

[Pierre]

Thanks for reply,

1.Nice thank for the demo. It works well. I need to get the selectedItem to be able to remove it. But the binding of  SelectedItem="{Binding SelectedLot, Mode=TwoWay}" of the grid is called after the command call of the button. In fact the selection comes just after the command.

2.I will change my LIST<> to the ObsevableCollection. But the initial bindgin work well and I was thinking that calling manually NotifyPropertyChanged() was enough.

 

[Nasko]

Hi Pierre,

You can use a Dispatcher and run the deletion of the SelectedItem asynchronously - thus the property will have a value when the command is executed. Please, check the attached sample that demonstrates that.

As for the second question. In order to be able the UI to visualize any changes made in the collection (edit, delete, add etc.) the collection needs to implement the INotifyCollectionChanged - it indicates the UI that change in the collection has been made. Because of that we suggest you consider using the ObservableCollection or any other collection that implements the mentioned above interface.

We really hope the provided information will be helpful for you. 

Regards,
Nasko
Progress Telerik

[Pierre]

All is working now, Thanks a lot.