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

7 posts, 1 answers
  1. Pierre
    Pierre avatar
    227 posts
    Member since:
    Apr 2007

    Posted 05 Jun Link to this post

    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>
  2. Pierre
    Pierre avatar
    227 posts
    Member since:
    Apr 2007

    Posted 06 Jun in reply to Pierre Link to this post

    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?

  3. Pierre
    Pierre avatar
    227 posts
    Member since:
    Apr 2007

    Posted 06 Jun in reply to Pierre Link to this post

    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 !?!
  4. Nasko
    Admin
    Nasko avatar
    693 posts

    Posted 07 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Pierre
    Pierre avatar
    227 posts
    Member since:
    Apr 2007

    Posted 07 Jun in reply to Nasko Link to this post

    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.

     

  6. Answer
    Nasko
    Admin
    Nasko avatar
    693 posts

    Posted 07 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Pierre
    Pierre avatar
    227 posts
    Member since:
    Apr 2007

    Posted 07 Jun in reply to Nasko Link to this post

    All is working now, Thanks a lot.
Back to Top