Binding Commands from ViewModel to Buttons in GridView DataTemplate

[Richard Ellis]

HI

I have been trying, without success, to Add buttons to my Telerik GridView which has it's Command bound to the ViewModel associated with my View (UserControl).  I'm using the MVVM model.  To do this I have tried to use the delete example from the online demos and apply the 'Commands Within Collections' method of binding from the Prism documentation.  The result was the following Column Definition:

                <telerik:GridViewColumn>
                    <telerik:GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadButton x:Name="edit" ToolTipService.ToolTip="Edit"
                                    Command="{Binding ElementName=LayoutRoot, Path=DataContext.Edit}"
                                    CommandParameter="{Binding}">
                                <telerik:RadButton.Content>
                                    <Image Source="../Icons/edit.gif" Width="16" Height="16" />
                                </telerik:RadButton.Content>
                            </telerik:RadButton>
                        </DataTemplate>
                    </telerik:GridViewColumn.CellTemplate>
                </telerik:GridViewColumn> As can be seen I have added a RadButton to the DataTemplate of the column which in turn displays an icon as it's content.  Original I had set the ElementName to the GridView itself but when that failed to work changed it to my top level container of my view.  Whatever I do the result is the same, clicking the button does not fire the Command event.

Please help.  There's not much else I can do until this is fixed.

Thanks.

[Maya]

Hello Richard Ellis,

I am sending you a sample project illustrating how you may define a RadButton within a CellTemplate and bind it to a command from the ViewModel.
I hope it helps.
 

Greetings,
Maya
the Telerik team

[Richard Ellis]

Thanks

That will definately work in general use, however I am using MEF for dependency injection.  How would I go about binding to the Resource in this case (which requires my ViewModel to have an empty constructor instead of the 'ImportingConstructor' I have at the moment?

Any help is appreciated.

Cheers

[Maya]

Hi Richard Ellis,

I am sending you a sample project illustrating a possible approach for handling that scenario. I hope this helps.
 

Regards,
Maya
the Telerik team

[Elena]

Hi Maya,

Maya you simply magician, I wish you the brightest stars in your destiny!

If not your idea

ViewModelContainer this UserControl not when would not work by the RadButton

 

<UserControl.Resources>
    <local:ViewModelContainer x:Key="Container"/>
    <!--<local:DetailViewModel x:Key="DetailViewModel" />-->
    <DataTemplate x:Key="ContentTemplate" >
        <Grid>
            <!-- SelectedItem="{Binding SelectedUnit, Mode=TwoWay}" IsBusy="{Binding IsBusy}" -->
            <telerik:RadGridView Name="metricsGridView"
                                         ItemsSource="{Binding Units}"
                                         SelectedItem="{Binding SelectedUnit, Mode=TwoWay}"
                                         Opacity="0.85"
                                         IsReadOnly="True"
                                         FontSize="9"
                                         ShowGroupPanel="False"
                                         AutoGenerateColumns="False"
                                         CanUserFreezeColumns="False"
                                         RowIndicatorVisibility="Collapsed">
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"
                                                Width="200"
                                                TextAlignment="Left"
                                                Header="Measurement" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding StrOldValue}" Header="Prev Value"
                                                        TextAlignment="Right" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding MTime}" Header="Time"
                                                        TextAlignment="Center" />
                    <telerik:GridViewDataColumn DataMemberBinding="{Binding StrValue}" Header="Value"
                                                        TextAlignment="Right" />
                    <telerik:GridViewColumn Header="History">
                        <telerik:GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <telerik:RadButton Content="History"
                                                   Command="{Binding ViewModel.HistoryChartCommand, Source={StaticResource Container}}" />
                            </DataTemplate>
                        </telerik:GridViewColumn.CellTemplate>
                    </telerik:GridViewColumn>
                    <telerik:GridViewDataColumn Width="200" IsResizable="False" Header="Actual Metrics">
                        <telerik:GridViewDataColumn.CellTemplate>
                            <DataTemplate>
                                <telerik:RadLinearSparkline
                                                        ShowFirstPointIndicator="True"
                                                        ShowLastPointIndicator="True"
                                                        ShowHighPointIndicators="True"
                                                        ShowLowPointIndicators="True"
                                                        HighPointBrush="Red"
                                                        ItemsSource="{Binding ActualMetrics}"
                                                        XValuePath="MTime"
                                                        YValuePath="Value"
                                                        Width="150" Height="20" />
                            </DataTemplate>
                        </telerik:GridViewDataColumn.CellTemplate>
                    </telerik:GridViewDataColumn>

                </telerik:RadGridView.Columns>
                </telerik:RadGridView>
        </Grid>
    </DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" DataContext="{StaticResource Container}" >
    <telerik:RadTabControl x:Name="radTabControl"
                           Margin="2"
                           Opacity="0.8"
                           ItemsSource="{Binding ViewModel.CurrentStation.Groups}"
                           DisplayMemberPath="Name"
                           FontSize="9"
                           ContentTemplate="{StaticResource ContentTemplate}"/>
</Grid>

after all it created in a code!

DetailControl detail = new DetailControl();
var container = detail.Resources["Container"] as ViewModelContainer;
container.ViewModel = new DetailViewModel(station);
_windows[station] = new RadWindow();
_windows[station].Content = detail;

Many thanks, Maya

[Steve]

Is there a way to implement this using the relaycommand using Galasoft's MVVM Lite?

Thanks

[Dustin]

I have basically the same problem. I created a custom behavior for a RadComboBox that resides in a column's CellEditTemplate and I can't get the command to bind either. I too am using the MVVM Light Toolkit and would love to know how to get the binding to work.

[Steve]

This is basically what you have to do.

http://weblogs.asp.net/dwahlin/archive/2009/08/20/creating-a-silverlight-datacontext-proxy-to-simplify-data-binding-in-nested-controls.aspx

[v00d00]

Steve thank you so much. In my previous approach I was writing typed wrappers with dictionary of dynamically generated commands. This looks so much right to me.

[Garrick]

<telerik:GridViewColumn>
                                        <telerik:GridViewColumn.CellTemplate>
                                            <DataTemplate>
                                                <telerik:RadButton Content="" Command="{Binding Path=DataContext.ButtonCommand,
                                                    RelativeSource={RelativeSource FindAncestor,AncestorType=telerik:RadGridView}}" />
                                            </DataTemplate>
                                        </telerik:GridViewColumn.CellTemplate>
                                    </telerik:GridViewColumn>