Binding Commands from ViewModel to Buttons in GridView DataTemplate

10 posts, 0 answers
  1. Richard Ellis
    Richard Ellis avatar
    26 posts
    Member since:
    Mar 2010

    Posted 09 Feb 2011 Link to this post

    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:
    Snippet

                    <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.

  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 09 Feb 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
  4. Richard Ellis
    Richard Ellis avatar
    26 posts
    Member since:
    Mar 2010

    Posted 10 Feb 2011 Link to this post

    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
  5. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 15 Feb 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  6. Elena
    Elena avatar
    7 posts
    Member since:
    Apr 2011

    Posted 05 Jul 2011 Link to this post

    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


  7. Steve
    Steve avatar
    4 posts
    Member since:
    Jul 2010

    Posted 28 Jul 2011 Link to this post

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

    Thanks
  8. Dustin
    Dustin avatar
    79 posts
    Member since:
    Oct 2012

    Posted 02 Aug 2011 Link to this post

    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.
  9. Steve
    Steve avatar
    4 posts
    Member since:
    Jul 2010

    Posted 02 Aug 2011 Link to this post

    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
  10. v00d00
    v00d00 avatar
    5 posts
    Member since:
    Jan 2011

    Posted 15 Sep 2011 Link to this post

    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.
  11. Garrick
    Garrick avatar
    1 posts
    Member since:
    Feb 2013

    Posted 25 Feb 2013 Link to this post

    <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>
Back to Top
DevCraft banner