MVVM - Bind command to Row DoubleClick

7 posts, 1 answers
  1. gerardo
    gerardo avatar
    41 posts
    Member since:
    Dec 2014

    Posted 29 Nov 2020 Link to this post

    Good day,

     

    How can I bind/trigger a command in my ViewModel on GridView Row DoubleClick. Is there a way I can bind it without codebehind

     

    Thanks

  2. Answer
    Dinko
    Admin
    Dinko avatar
    1255 posts

    Posted 02 Dec 2020 Link to this post

    Hi Gerardo,

    I can suggest here to bind the PreviewMouseDoubleClick event of the RadGridView to an ICommand property using our EventToCommandBehavior. You can pass the mouse event arguments by setting the PassEventArgsToCommand property of the EventBinding to true.

    <telerik:RadGridView ItemsSource="{Binding TestObjects}">
        <telerik:EventToCommandBehavior.EventBindings>
            <telerik:EventBinding EventName="PreviewMouseDoubleClick" Command="{Binding MyCommand}" PassEventArgsToCommand="True"/>
        </telerik:EventToCommandBehavior.EventBindings>
    . . . . .

    Then in the command executed method, you can try to get the GridViewRow.

    public class MyViewModel
    {
        public MyViewModel()
        {        
            MyCommand = new DelegateCommand(OnCommandExecuted);
        }
    
        public List<TestObject> TestObjects { get; set; }
    
        private void OnCommandExecuted(object obj)
        {
            var mouseButtonArgs = obj as MouseButtonEventArgs;
            var gridViewRow = (mouseButtonArgs.OriginalSource as System.Windows.UIElement).ParentOfType<GridViewRow>();
            if(gridViewRow != null)
            {
                //  my custom code
            }
        }
    
        public ICommand MyCommand { get; set; }
    }

    Regards,
    Dinko
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products, quickly just got a fresh new look + new and improved content, including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. gerardo
    gerardo avatar
    41 posts
    Member since:
    Dec 2014

    Posted 18 Feb in reply to Dinko Link to this post

    This works as I needed. Thank you Sir.
  4. gerardo
    gerardo avatar
    41 posts
    Member since:
    Dec 2014

    Posted 21 Feb Link to this post

    Hi Sir just a another question.

    The above code works. But I want to apply the same approach to another GridView and pass a parameter. Since I already have the obj as MouseButtonEventArgs, can I add another commandParameter to pass a value in my command? 

     

    Thank you very much

  5. Dinko
    Admin
    Dinko avatar
    1255 posts

    Posted 23 Feb Link to this post

    Hello Gerardo,

    You can't pass another parameter to the command. The EventToCommandBehavior does not allow this. Basically, from the MouseButtonEventArgs arguments, you should be able to get the corresponding grid and its DataContext and parent elements. You can share what you want to pass to the command so I can think of a possible solution.

    Regards,
    Dinko
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  6. gerardo
    gerardo avatar
    41 posts
    Member since:
    Dec 2014

    Posted 23 Feb in reply to Dinko Link to this post

    Thank you for your reply Sir.

    What I am trying is to have a multiple GridView in one page. I want to use the same command for each GridView but pass another parameter to identify what condition I would use in my code depending on the GridView I double clicked.

    Thank you very much.

  7. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1255 posts

    Posted 26 Feb Link to this post

    Hello Gerardo,

    My name is Dilyan and I'm stepping in for my colleague Dinko who is currently out of office.

    As stated by Dinko, it is not possible to pass two parameters through the EventBinding, however, you can use properties of the RadGridView control to determine what action to perform in the command. For example, you can use the x:Name or Tag properties to achieve this.

            private void OnCommandExecuted(object obj)
            {
                var mouseButtonArgs = obj as MouseButtonEventArgs;
                var gridViewRow = (mouseButtonArgs.OriginalSource as System.Windows.UIElement).ParentOfType<GridViewRow>();
                var gridView = gridViewRow.GridViewDataControl;
                if (gridViewRow != null)
                {
                    if (gridView.Name == "clubsGrid")
                    {
                        var club = gridViewRow.DataContext as Club;
                        MessageBox.Show("Clicked club " + club.ToString());
                    }
                    else if (gridView.Name == "playersGrid")
                    {
                        var player = gridViewRow.DataContext as Player;
                        MessageBox.Show("Clicked player " + player.ToString());
                    }
                }
            }

    If you use these properties for something else and cannot set unique values to them, you can create additional attached properties and use those.

    For your convenience, I've prepared a small sample project which demonstrates this in action. Please have a look and let me know if something similar would work for you.

    Regards,
    Dilyan Traykov
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top