This is a migrated thread and some comments may be shown as answers.

Button in CellTemplate inside RadGridView Colum.

1 Answer 315 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Anand
Top achievements
Rank 1
Anand asked on 17 Jul 2014, 06:58 AM
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

1 Answer, 1 is accepted

Sort by
0
Yoan
Telerik team
answered on 21 Jul 2014, 12:17 PM
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.
 
Tags
GridView
Asked by
Anand
Top achievements
Rank 1
Answers by
Yoan
Telerik team
Share this question
or