Button in CellTemplate inside RadGridView Colum.

2 posts, 0 answers
  1. Anand
    Anand avatar
    12 posts
    Member since:
    Apr 2014

    Posted 17 Jul 2014 Link to this post

    I invested my full day with thinking I can do it after reading so many suggestions and forums. But Somehow its not working out for me. Please help

    http://stackoverflow.com/questions/24791557/radgridview-edit-button-command-not-binding-in-prism-4-1-silverlight-5
    How I've implemented MVVM is like this
    http://stackoverflow.com/questions/24793890/no-response-at-page-after-refresh-in-silverlight-5-prism-4-1-unity-mvvm-applica

    After lot of Try I'm not able to do it. My Current Code is like this 
    XAML :
    namespace Abs.Module.Admin.UserTab.ViewModel
    {
        //Abs.Infrastructure.ViewModel.ViewModelBase
        public class UsersTabViewModel : TabViewModelBase , IUsersTabViewModel
        {
             
            private UserRiaDomainContext ctx;
            public UsersTabViewModel(IUsersTabView view):base(view) {
                this.Header = "Users";
                this.Title = "Users";
                this.IsSelected = true;
                ctx = new UserRiaDomainContext();
                fillUser();
                doEventBinding();
            }
             private IEnumerable<User> _allUser;
            public IEnumerable<User> AllUser {
                get { return _allUser; }
                set {
                    _allUser = value;
                    OnPropertyChanged("AllUser");
                }
            }
     
            private void fillUser() {
               /* var users = from u in ctx.Users select u;
                foreach(var usr in users){
                    AllUser.Add(usr);
                }*/
                LoadOperation<User> op = this.ctx.Load<User>(this.ctx.GetUsersQuery());
                AllUser=op.Entities;
            }
     
            /// Command for User Event Bindings
            ///
            private void doEventBinding() {
                AddUserEventCommand = new DelegateCommand(AddUser, CanAddUser);
                UpdateUserEventCommand = new DelegateCommand(EditUser, CanEditUser);
            }
            /// <summary>
            /// Edit User Validation before Compelting Event
            /// </summary>
            /// <returns>bool </returns>
      
            private bool CanEditUser()
            {
                return true;
            }
            /// <summary>
            /// Edit User Command For Editing User
            /// </summary>
            private void EditUser()
            {
                MessageBox.Show("I can fire edit event");
            }
            /// <summary>
            /// Add User Validation before Compelting Event
            ///
            /// </summary>
            /// <returns>bool</returns>
      
            private bool CanAddUser()
            {
                return true;
            }
            /// <summary>
            /// Add User Command For Editing User
            /// </summary>
            private void AddUser()
            {
                MessageBox.Show("I can fire Add event");
            }
     
     
            ///  Bind with User Add
            private DelegateCommand _addUserEventCommand;
            public DelegateCommand AddUserEventCommand
            {
                get { return _addUserEventCommand; }
                set
                {
                    _addUserEventCommand = value;
                    OnPropertyChanged("AddUserEventCommand");
                }
            }
     
            ///  Bind with User Update in Grid Row
            private DelegateCommand _updateUserEventCommand;
            public DelegateCommand UpdateUserEventCommand {
                get { return _updateUserEventCommand; }
                set {
                    _updateUserEventCommand = value;
                    OnPropertyChanged("UpdateUserEventCommand");
                }
            }
        }
    }


    in my ViewModel :
    <UserControl
        xmlns:prism="http://www.codeplex.com/prism"
        x:Class="Abs.Module.Admin.UserTab.View.UsersTab"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
     
        <Grid x:Name="LayoutRoot" Background="White">
            <Grid.Resources>
                <Style TargetType="telerik:RadGridView">
                    <Setter Property="FontSize" Value="13">
                    </Setter>
                    <Setter Property="FontFamily" Value="Tahoma">
                    </Setter>
                </Style>
            </Grid.Resources>
            <telerik:RadButton Command="{Binding AddUserEventCommand}" Content="Add User" VerticalAlignment="Top"></telerik:RadButton>
            <telerik:RadGridView HorizontalAlignment="Stretch"
                                 Margin="0,25,0,0"
                                 VerticalAlignment="Top"
                                 ItemsSource="{Binding AllUser}"
                                 AutoGenerateColumns="False"
                                 IsReadOnly="True">
                <telerik:RadGridView.Columns>
                    <telerik:GridViewColumn  Width="80">
                        <telerik:GridViewColumn.Header>
                            <StackPanel Orientation="Horizontal"
                                        VerticalAlignment="Top"
                                        HorizontalAlignment="Center">
                                <telerik:RadButton Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}, Path=AddUserEventCommand}"
                                                   Background="Green" Foreground="WhiteSmoke" FontSize="14" Padding="10,5,10,5">
                                   <Image Source="../../Assets/Images/icon_user_add.png"
                                       Cursor="Hand" Stretch="None" Width="32" Height="32"/>
                                </telerik:RadButton>
                            </StackPanel>
                        </telerik:GridViewColumn.Header>
                        <telerik:GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <telerik:RadButton prism:Click.Command="{Binding AddUserEventCommand}"
                                                   Background="Green" Foreground="WhiteSmoke" FontSize="14">
                                    <Image Source="../../Assets/Images/icon_user_update.png"
                                       Cursor="Hand"
                                       Stretch="None" Width="32" Height="32" >
                                    </Image>
                                </telerik:RadButton>
                            </DataTemplate>
                        </telerik:GridViewColumn.CellTemplate>
                    </telerik:GridViewColumn>
                    <telerik:GridViewDataColumn Header="Userid" DataMemberBinding="{Binding Userid}"/>
                    <telerik:GridViewDataColumn Header="First Name" DataMemberBinding="{Binding Fname}"/>
                    <telerik:GridViewDataColumn Header="Last Name" DataMemberBinding="{Binding Lname}"/>
                    <telerik:GridViewDataColumn Header="Email" DataMemberBinding="{Binding Email}"/>
                    <telerik:GridViewDataColumn Header="Phone" DataMemberBinding="{Binding Phone}"/>
                    <telerik:GridViewDataColumn Header="Role" DataMemberBinding="{Binding Role}"/>
                    <telerik:GridViewDataColumn Header="Last Login" DataMemberBinding="{Binding Lastlogin}"/>
                    <telerik:GridViewDataColumn Header="Created On" DataMemberBinding="{Binding Datecreated}"/>
                    <telerik:GridViewDataColumn Header="Created By" DataMemberBinding="{Binding Createdby}"/>
                    <telerik:GridViewDataColumn Header="Updated On" DataMemberBinding="{Binding Dateupdated}"/>
                    <telerik:GridViewDataColumn Header="Updated By" DataMemberBinding="{Binding Updatedby}"/>
                </telerik:RadGridView.Columns>
                 
            </telerik:RadGridView>
     
        </Grid>
    </UserControl>

    Initially in place of Telerik button I was trying with Image icon. but I wasn't having Command to Bind so I changed it to Button. for more MVVM please follow my stackoverflow post.

    http://www.telerik.com/forums/custom-button-command-method , I followed few other link too. But No success

    eagerly waiting for any help.
    Thank you
  2. Yoan
    Admin
    Yoan avatar
    1068 posts

    Posted 21 Jul 2014 Link to this post

    Hello,

    May I ask you to perform a simple test - expose your ViewModel as a resource and use it a Source of the binding:
    <Grid.Resources>
           <my:UsersTabViewModel  x:Key="myViewModel"/>
       </Grid.Resources>
       .
       .
       <telerik:GridViewColumn  Width="80">
           <telerik:GridViewColumn.Header>
               <StackPanel Orientation="Horizontal"
                                       VerticalAlignment="Top"
                                       HorizontalAlignment="Center">
                   <telerik:RadButton Command="{Binding AddUserEventCommand, Source="{StaticResource myViewModel}}"
                                      .
                                      .

    Please give it a try and let me know how it works for you.

    Regards,
    Yoan
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. DevCraft banner
Back to Top