[Solved] need a row click event

[SHEIKH]

Hi,
I need to find a way to have a row click event for my customized gridView, i don't want any cellclick in particular. I've used the SelectionChanged but it is not what I really need this time. I need a row click[preferred double click but can work with single click as well] event to handle logic.  How can I do that.


best regards,

[Maya]

Hello SHEIKH,

You may take a look at our demo for a reference. 

All the best,
Maya
the Telerik team

[SHEIKH]

Hi Maya,
I've seen this demo as I mention I don't want to handle cell clicks as there are way too many columns involved for my grid row. All I'm looking is to capture the row click somehow, prior to this thing I used SelectionChanged event of the gridView and it was working just fine till now. Cuz now I need something other than SelectionChanged or even the cell click for that matter.
 
Let me explain my scenario. My app requires to open a Edit dialog whenever someones click the row and i.e anywhere on the row, and for this I tried to use the SelectionChanged but the problem with that is, Once a user clicks any row then the event is fired, and when he comes back to it and clicks on the same row [keeping in mind that he didn't select any other row]... in real world the app should be able to perform the same functionality which never happens with SelectionChanged cuz SelectionChanged doesn't even get fired unless we select any other row first and then click the previous one.

To cut it short, old school row click is the only way which I can think of. Please correct me if I'm wrong. Any pointers will be very very helpful.


profound regards.

[Maya]

Hello SHEIKH,

You may try to handle the RowActivated event of the grid. It will be fired each time double clicking on a row is performed.
Let me know if this solution meets your requirements.
 

Kind regards,
Maya
the Telerik team

[SHEIKH]

Hi again,
I'm trying to do that but there seems to be some problem with the RowActivated. Here is my reference code.

<Controls1:RadGridView Grid.Column="0"  Grid.Row="0"  Width="Auto" BorderThickness="0" HorizontalAlignment="Left"
                                        CanUserFreezeColumns="False" ScrollMode="RealTime" IsReadOnly="False" x:Name="RadGridView1"
                                        GridLinesVisibility="None" AutoGenerateColumns="False"
                                        ShowGroupPanel="False"
                                        ShowColumnHeaders="False"
                                         IsFilteringAllowed="False" RowIndicatorVisibility="Collapsed"
                                         RowStyle="{StaticResource rowStyle}"
                                         ItemsSource="{Binding PagedSource, ElementName=RadGridPager, Mode=TwoWay}"
                                         Background="Transparent"  VerticalAlignment="Top"
                                         SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
                                         CommandExtension:RadGridRowActivated.Command ="{Binding SelectionChangedCommand}"
                                         IsSynchronizedWithCurrentItem="False"
                                         >

The command behavior that I'm trying to bind my grid is given below.

public static class RadGridRowActivated
    {
        public static readonly DependencyProperty CommandProperty = DependencyProperty.RegisterAttached(
           "Command",
           typeof(ICommand),
           typeof(RadGridRowActivated),
           new PropertyMetadata(OnSetCommandCallback));

        private static readonly DependencyProperty RowActivatedCommandBehaviorProperty = DependencyProperty.RegisterAttached(
            "RowActivatedCommandBehavior",
            typeof(GridViewRowActivatedCommandBehavior),
            typeof(RadGridRowActivated),
            null);


        public static void SetCommand(RadGridView outlookBar, ICommand command)
        {
            outlookBar.SetValue(CommandProperty, command);
        }

        public static ICommand GetCommand(RadGridView radGridView)
        {
            return radGridView.GetValue(CommandProperty) as ICommand;
        }


        private static void OnSetCommandCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
        {
            var radGridView = dependencyObject as RadGridView;
            if (radGridView != null)
            {
                var behavior = GetOrCreateBehavior(radGridView);
                behavior.Command = e.NewValue as ICommand;
            }
        }

        private static GridViewRowActivatedCommandBehavior GetOrCreateBehavior(RadGridView radGridView)
        {
            var behavior = radGridView.GetValue(RowActivatedCommandBehaviorProperty) as GridViewRowActivatedCommandBehavior;
            if (behavior == null)
            {
                behavior = new GridViewRowActivatedCommandBehavior(radGridView);
                radGridView.SetValue(RowActivatedCommandBehaviorProperty, behavior);
            }
            return behavior;
        }

    }
    public class GridViewRowActivatedCommandBehavior : CommandBehaviorBase<RadGridView>
    {
        public GridViewRowActivatedCommandBehavior(RadGridView radGridView)
            : base(radGridView)
        {

            radGridView.RowActivated += (s, e) => RowActivated(s, e);
            //radGridView.SelectionChanged += (s, e) => SelectionChanged(s, e);
        }

        public void SelectionChanged(object s, SelectionChangeEventArgs e)
        {
            ExecuteCommand();
        }

        public void RowActivated(object s, Telerik.Windows.Controls.GridView.RowEventArgs e)
        {
            ExecuteCommand();
        }
    }

You see if I comment RowActivated event code from the behavior and unable the SelectionChanged instead, everything works just fine. whereas rowActivated isn't even getting fired for some reasons. any idea what am I doing wrong here?

regards,

[Maya]

Hello SHEIKH,

You need to define a CommandParameter for the command:

<telerik:RadGridView x:Name="playersGrid" AutoGenerateColumns="False" 
  ItemsSource="{Binding Players}"         
  my:RadGridRowActivated.Command="{Binding RowActivatedCommand}"
  my:RadGridRowActivated.CommandParameter="{Binding ElementName=playersGrid, Path=SelectedItem}">

I am sending you a sample project illustrating how to achieve this functionality.
 

All the best,
Maya
the Telerik team

[SHEIKH]

Hi again,
I ran your code successfully though it was using PRISM 4. Here is my behavior using PRISM 2 and also having the command parameter property.

public static class RadGridRowActivated
    {
        public static readonly DependencyProperty CommandProperty = DependencyProperty.RegisterAttached(
           "Command",
           typeof(ICommand),
           typeof(RadGridRowActivated),
           new PropertyMetadata(OnSetCommandCallback));

        private static readonly DependencyProperty RowActivatedCommandBehaviorProperty = DependencyProperty.RegisterAttached(
            "RowActivatedCommandBehavior",
            typeof(GridViewRowActivatedCommandBehavior),
            typeof(RadGridRowActivated),
            null);

        public static readonly DependencyProperty CommandParameterProperty = DependencyProperty.RegisterAttached(
            "CommandParameter",
            typeof(object),
            typeof(RadGridSorting),
            new PropertyMetadata(OnSetCommandParameterCallback));



        public static void SetCommand(RadGridView outlookBar, ICommand command)
        {
            outlookBar.SetValue(CommandProperty, command);
        }

        public static ICommand GetCommand(RadGridView radGridView)
        {
            return radGridView.GetValue(CommandProperty) as ICommand;
        }

        public static void SetCommandParameter(RadGridView dataForm, object parameter)
        {
            dataForm.SetValue(CommandParameterProperty, parameter);
        }

        public static object GetCommandParameter(RadGridView dataForm)
        {
            return dataForm.GetValue(CommandParameterProperty);
        }





        private static void OnSetCommandCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
        {
            var radGridView = dependencyObject as RadGridView;
            if (radGridView != null)
            {
                var behavior = GetOrCreateBehavior(radGridView);
                behavior.Command = e.NewValue as ICommand;
            }
        }

        private static void OnSetCommandParameterCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
        {
            RadGridView RadGrid = dependencyObject as RadGridView;
            if (RadGrid != null)
            {
                GridViewRowActivatedCommandBehavior behavior = GetOrCreateBehavior(RadGrid);
                behavior.CommandParameter = e.NewValue;
            }
        }


        private static GridViewRowActivatedCommandBehavior GetOrCreateBehavior(RadGridView radGridView)
        {
            var behavior = radGridView.GetValue(RowActivatedCommandBehaviorProperty) as GridViewRowActivatedCommandBehavior;
            if (behavior == null)
            {
                behavior = new GridViewRowActivatedCommandBehavior(radGridView);
                radGridView.SetValue(RowActivatedCommandBehaviorProperty, behavior);
            }
            return behavior;
        }

    }
    public class GridViewRowActivatedCommandBehavior : CommandBehaviorBase<RadGridView>
    {
        public GridViewRowActivatedCommandBehavior(RadGridView radGridView)
            : base(radGridView)
        {

            radGridView.RowActivated += (s, e) => RowActivated(s, e);
            //radGridView.SelectionChanged += (s, e) => SelectionChanged(s, e);
        }

        public void SelectionChanged(object s, SelectionChangeEventArgs e)
        {
            ExecuteCommand();
        }

        public void RowActivated(object s, Telerik.Windows.Controls.GridView.RowEventArgs e)
        {
            ExecuteCommand();
        }
    }

And my XAML looks like:

<Controls1:RadGridView Grid.Column="0"  Grid.Row="0"  Width="Auto" BorderThickness="0" HorizontalAlignment="Left"
                                        CanUserFreezeColumns="False" ScrollMode="RealTime" IsReadOnly="False" x:Name="RadGridView1"
                                        GridLinesVisibility="None" AutoGenerateColumns="False"
                                        ShowGroupPanel="False"
                                        ShowColumnHeaders="False"
                                         IsFilteringAllowed="False" RowIndicatorVisibility="Collapsed"
                                         RowStyle="{StaticResource rowStyle}"
                                         ItemsSource="{Binding PagedSource, ElementName=RadGridPager, Mode=TwoWay}"
                                         Background="Transparent"  VerticalAlignment="Top"
                                         SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
                                         CommandExtension:RadGridRowActivated.Command ="{Binding SelectionChangedCommand}"
                                         CommandExtension:RadGridRowActivated.CommandParameter="{Binding ElementName=RadGridView1, Path=SelectedItem}"
                                         IsSynchronizedWithCurrentItem="False"
                                         >

It runs alright except no RowActivated event getting fired at all. I think it must have something to do with the row style that I'm using for this grid which is messing something that I'm not aware of. Just for the reference I'm pasting my rowStyle if it helps tracking any problem.

<Style x:Key="rowStyle" TargetType="GridView:GridViewRow" >
                                <Setter Property="Template" Value="{StaticResource MyCustomRowTemplate}" />
                                <Setter Property="Height" Value="55" />
                                <Setter Property="Width" Value="650" />
                                <Setter Property="Background" Value="Transparent" />
                            </Style>

whereas MyCustomRowTemplate looks like:

<ControlTemplate x:Key="MyCustomRowTemplate" TargetType="GridView:GridViewRow">
                                <Border  x:Name="selectedRow" Margin="2,2,2,2" CornerRadius="5"
                            BorderThickness="1" BorderBrush="#FF000000" RenderTransformOrigin="0.5,0.5">
                                    <Border.RenderTransform>
                                        <CompositeTransform/>
                                    </Border.RenderTransform>
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FF265574" Offset="0"/>
                                            <GradientStop Color="#FF1B4058" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="EditStates">
                                            <VisualState x:Name="ReadOnlyMode"/>
                                            <VisualState x:Name="EditMode"/>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition GeneratedDuration="0:0:0.2" To="MouseOver">
                                                    <Storyboard/>
                                                </VisualTransition>
                                                <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.2" To="Normal"/>
                                            </VisualStateGroup.Transitions>
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="MouseOver">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0" To="#FFFEFFFD" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="selectedRow" d:IsOptimized="True"/>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="selectedRow">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Thickness>1</Thickness>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="selectedRow" d:IsOptimized="True"/>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="selectedRow" d:IsOptimized="True"/>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="selectedRow" d:IsOptimized="True"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="SelectionStates">
                                            <VisualStateGroup.Transitions>
                                                <VisualTransition GeneratedDuration="0:0:0.2" To="Selected">
                                                    <Storyboard/>
                                                </VisualTransition>
                                            </VisualStateGroup.Transitions>
                                            <VisualState x:Name="Selected">
                                                <Storyboard>
                                                    <ColorAnimation Duration="0" To="#FFFEFFFD" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="selectedRow" d:IsOptimized="True"/>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="selectedRow">
                                                        <DiscreteObjectKeyFrame KeyTime="0">
                                                            <DiscreteObjectKeyFrame.Value>
                                                                <Thickness>2</Thickness>
                                                            </DiscreteObjectKeyFrame.Value>
                                                        </DiscreteObjectKeyFrame>
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <DoubleAnimation Duration="0" To="0.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="selectedRow" d:IsOptimized="True"/>
                                                    <DoubleAnimation Duration="0" To="0.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="selectedRow" d:IsOptimized="True"/>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="selectedRow" d:IsOptimized="True"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Unselected"/>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="FocusStates">
                                            <VisualState x:Name="Focused"/>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <StackPanel Orientation="Horizontal" Background="Transparent"  >
                                        <StackPanel>
                                            <Image Source="/IST.Modules.Navigation;Component/Resources/MainGridRecord.png" HorizontalAlignment="Left" Width="32" Height="32" Margin="1,8,1,0"/>
                                        </StackPanel>
                                        <StackPanel Orientation="Vertical">
                                            <TextBlock Text="{Binding CustomerName}" Foreground="White" FontFamily="Calibri" FontSize="13.333" FontWeight="Bold" Margin="5,7,0,0" />
                                            <StackPanel Orientation="Horizontal" Margin="5,1,0,0">
                                                <TextBlock Text="{Binding CustomerID}" Foreground="#FF7D8D9A" FontFamily="Calibri" FontSize="13.333" />
                                                <TextBlock Text="|" Foreground="#FF7D8D9A" FontFamily="Calibri" FontSize="13.333" />
                                                <TextBlock Text="{Binding AccountNumber}" Foreground="#FF7D8D9A" />
                                                <TextBlock Text="|" Foreground="#FF7D8D9A" FontFamily="Calibri" FontSize="13.333" />
                                                <TextBlock Text="{Binding URL}" Foreground="#FF7D8D9A" />
                                                <TextBlock Text="|" Foreground="#FF7D8D9A" FontFamily="Calibri" FontSize="13.333" />
                                                <TextBlock Text="{Binding AccountBalance}" Foreground="#FF7D8D9A" />
                                            </StackPanel>
                                        </StackPanel>
                                    </StackPanel>
                                </Border>
                            </ControlTemplate>

any sort of guidance is most welcome.


br,

[SHEIKH]

Hi,
Is there any feedback to my query yet?


thanks again.

[Maya]

Hello SHEIKH,

I am sending you a sample project illustrating another - probably more appropriate for your specific scenario - approach. Basically, the RowActivated event is raised on the basis of GridViewCell-s and since there are no cells in your case, the event is not fired. So, what can be done is to attach a behavior following for double-clicking on a row. You may find the sample application attached.

Greetings,
Maya
the Telerik team

[SHEIKH]

Hi, thanks for explaining the problem and not to mention the attachment, i do realize that it was because of my custom template but didn't know the exact reason.

Thank you so very much once again.

regards,