How can i trigger an event when a row is selected?

[Vishal S]

I have a silverlight page that have a radgridview, it loads list of employee records.

when a user clicks on the (+) sign before each row, another section is opened (just like in the examples). The section that opens below the row has textboxes. 

1. I would like to know if there is a way to define an event when the row is selected?

 i would need this as i will fill values to textboxes only when a user selects a record. 

2. is it possible not to display the (+) and/or (-) sign before each row and instead the event is triggered when a user click the row?

i am currently using the Q1 release.

Any help will be appreciated. 

[Milan]

Hello Vishal S,

RadGridView has an event called SelectionChanged which you can use to determine when a record is selected or deselected. In order to hide the button that opens/closes the child content you have to redefine the style of our HierarchyChildPresenter.

I have prepared a sample solution that demonstrates how you can use the SelectionChanged event and also how you can redefine the style of our hierarchy presenter and hide the expand/collapse button.

Hope this helps.

Regards,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Meisam]

i noticed that when user clicks on + sign, that row is not selected and so can't retrive from selecteditem property. is it possible that when user clicks on + sign, that row becomes selected?

[Milan]

Hello Meisam,

I have modified the original sample and now the rows are automatically selected when the expand button is pressed.

I have uncommented the ToggleButton that was inside the GridViewExpandableRowExpanderStyle and subscribed to its Clicked event. When the button is clicked we find the parent GridViewExpandableRow and set its IsSelected property to true.

Hope this helps.

Greetings,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Meisam]

Hi Milan,
Thank you so much for your informative example

In your code, in this part:

private void RadGridView1_SelectionChanged(object sender, SelectionChangeEventArgs e)
        {
            if (e.AddedRecords.Count > 0)
            {
                ExpandableDataRecord record = (ExpandableDataRecord)e.AddedRecords[0];
                record.IsExpanded = true;
            }
        }

when user clicks on child table's row, this event will be raised and because it has no childs, it's not expandable. because of that, it throw an exception with inner exception messsage "Unable to cast object of type 'Telerik.Windows.Data.DataRecord' to type 'Telerik.Windows.Data.ExpandableDataRecord"!

I added a little condition, and it works nice:

private void RadGridView1_SelectionChanged(object sender, SelectionChangeEventArgs e)
        {
            if (e.AddedRecords.Count > 0 & e.Source == RadGridView1)
            {
                ExpandableDataRecord record = (ExpandableDataRecord)e.AddedRecords[0];
                record.IsExpanded = true;
            }
        }

I will be happy if i know your idea,

Kind Regards

[Milan]

Hi Meisam,

You could use "e.DataControl == RadGridView1" instead of "e.Source == RadGridView1" since e.Source is always null for some reason. The e.DataControl poperty specifies the data control where selection change has occured - this could be the master grid or any other child grid.

Regards,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Meisam]

Hi Milan,
Thank you for reply

when I implement your code in my project, I encounter this error: "Cannot find the Style Property 'TemplateDown' on the type 'Telerik.Windows.Controls.RadExpander'."
is it a versioning error?! We have the version "2009.1.312.35" of Telerik.Windows.Controls

[Milan]

Hello Meisam,

Sorry I got confused because the ticket information says that you are using 2009.1.525 version and I have prepared styles for this version. Luckily the styles are identical you just have to change the TemplateDown property to Template and you should be fine.

You should also add the following code at the top of the SelectionChanged event handler:

if (e.DataControl != this.RadGridView1)
    return;

Hope this works.


Best wishes,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Meisam]

Hi Milan

It worked nice,

Thanks for your kindness,
Best Wishes

[Meisam]

Hi Milan,

I used your solution! I also add another style for presenting child definitions in tab control. but here is a problem that make me confused!
when I define groupdescriptions for parent gridview, sometimes, when I click on expandable row toggle button (plus) it becomes toggled (minus) but the child control presenter is not visible (actully the expander don't expand or expand but is not visible)!
here is the styles code:

<Grid.Resources>

            <Color x:Key="GridViewElementOuterBorderBrushColor">#FFB3B3B3</Color>
            <Color x:Key="GridViewHierarchyAndGroupingColor">#FFFDDFAA</Color>
            <Color x:Key="GridViewBackgroundColor">#FF535353</Color>
            <Color x:Key="GridViewIndicatorsPartsFillGradientStop1">#FF000000</Color>
            <Color x:Key="GridViewIndicatorsPartsFillGradientStop2">#FF000000</Color>

            <SolidColorBrush x:Key="HierarchyChildPresenterBorderBrush" Color="{StaticResource GridViewElementOuterBorderBrushColor}" />
            <SolidColorBrush x:Key="HierarchyChildPresenterBackground" Color="{StaticResource GridViewHierarchyAndGroupingColor}" />
            <SolidColorBrush x:Key="HierarchyChildPresenterToggleButtonBorderBrush" Color="{StaticResource GridViewElementOuterBorderBrushColor}" />
            <SolidColorBrush x:Key="HierarchyChildPresenterToggleButtonFill" Color="{StaticResource GridViewBackgroundColor}" />
            <LinearGradientBrush x:Key="GridViewIndicatorsPartsFill" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="{StaticResource GridViewIndicatorsPartsFillGradientStop1}" Offset="0"/>
                <GradientStop Color="{StaticResource GridViewIndicatorsPartsFillGradientStop2}" Offset="1"/>
            </LinearGradientBrush>

            <Style TargetType="{x:Type TabItem}">
                <Setter Property="Header" Value="{Binding TableDefinition.Relation.Name}" />
                <Setter Property="Content" Value="{Binding TableDefinition.DataSource}" />
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <telerik:RadGridView AutoGenerateColumns="False" telerik:StyleManager.Theme="Vista"  Background="AliceBlue" IsReadOnly="True" ColumnsWidthMode="Auto" ItemsSource="{Binding}" Name="gridViewChildPresenter" DataContextChanged="gridViewChildPresenter_DataContextChanged" Loaded="gridViewChildPresenter_Loaded">
                            </telerik:RadGridView>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="telerik:ChildDataControlsPresenter">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:ChildDataControlsPresenter">
                            <TabControl Name="PART_ChildDataItemsControl" ItemsSource="{Binding}" SelectionChanged="PART_ChildDataItemsControl_SelectionChanged" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="ExpanderDownHeaderStyle" TargetType="ToggleButton">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Border x:Name="minus" Visibility="Collapsed" HorizontalAlignment="Left" Width="26" VerticalAlignment="Stretch" Background="Transparent"
                                BorderBrush="{StaticResource HierarchyChildPresenterToggleButtonBorderBrush}" BorderThickness="0,1,1,1" Margin="0,-1,0,0">
                                    <Rectangle Fill="{StaticResource GridViewIndicatorsPartsFill}" Stroke="{x:Null}" VerticalAlignment="Center" Width="8" Height="2" Margin="8,11,9,10"/>
                                </Border>
                                <Border x:Name="plus" HorizontalAlignment="Left" Width="26" VerticalAlignment="Stretch" Background="Transparent"
                                BorderBrush="{StaticResource HierarchyChildPresenterToggleButtonBorderBrush}" BorderThickness="0,1,1,1" Margin="0,-1,0,0">
                                    <Path Fill="{StaticResource GridViewIndicatorsPartsFill}" Stretch="Fill" Width="8" Height="8" VerticalAlignment="Center" Stroke="{x:Null}" Margin="8,8,9,7" RenderTransformOrigin="0.5,0.5" Data="M3,0 L5,0 5,3 8,3 8,5 5,5 5,8 3,8 3,5 0,5 0,3 3,3 z">
                                        <Path.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                                <SkewTransform AngleX="0" AngleY="0"/>
                                                <RotateTransform Angle="0"/>
                                                <TranslateTransform X="0" Y="0"/>
                                            </TransformGroup>
                                        </Path.RenderTransform>
                                    </Path>
                                </Border>
                                <ContentPresenter SnapsToDevicePixels="True" HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Column="1" RecognizesAccessKey="True" Height="{TemplateBinding MinHeight}" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="true">
                                    <Setter Property="Visibility" TargetName="plus" Value="Collapsed"/>
                                    <Setter Property="Visibility" TargetName="minus" Value="Visible"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="GridViewExpandableRowExpanderStyle" TargetType="telerik:RadExpander">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:RadExpander">
                            <Border SnapsToDevicePixels="true" VerticalAlignment="Stretch" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                                <DockPanel>
                                    <StackPanel x:Name="HeaderSite" DockPanel.Dock="Top" Orientation="Horizontal"
                                TextBlock.FontSize="{TemplateBinding FontSize}"
                                TextBlock.FontStretch="{TemplateBinding FontStretch}"
                                TextBlock.FontStyle="{TemplateBinding FontStyle}"
                                TextBlock.FontWeight="{TemplateBinding FontWeight}"
                                TextBlock.Foreground="{TemplateBinding Foreground}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" >

                                        <ToggleButton x:Name="HeaderButton" IsTabStop="False"
                                              FontFamily="{TemplateBinding FontFamily}"
                                              Padding="{TemplateBinding Padding}"
                                              Click="HeaderButton_Click"
                                              Style="{StaticResource ExpanderDownHeaderStyle}"
                                              IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>

                                        <ContentPresenter
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Left"
                                    Content="{TemplateBinding Header}"
                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
                                    ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"/>

                                    </StackPanel>

                                    <Rectangle Fill="Transparent" x:Name="PART_HierarchyRowTopLine" HorizontalAlignment="Stretch" Height="0" DockPanel.Dock="Top"/>
                                    <Rectangle Fill="Transparent" x:Name="PART_HierarchyRowBottomLine" HorizontalAlignment="Stretch" Height="0" DockPanel.Dock="Bottom"/>
                                    <Border x:Name="borderExpandSite"  BorderBrush="{StaticResource HierarchyChildPresenterBorderBrush}" Background="{StaticResource HierarchyChildPresenterBackground}" BorderThickness="0,0,1,0">
                                        <telerik:HorizontalScrollPanel x:Name="PART_ChildScrollContainer">
                                            <ContentPresenter  Focusable="false"
                                    Visibility="Collapsed"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    Margin="{TemplateBinding Padding}"
                                    x:Name="ExpandSite"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    DockPanel.Dock="Bottom" />
                                        </telerik:HorizontalScrollPanel>
                                    </Border>
                                </DockPanel>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsExpanded" Value="true">
                                    <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                                    <Setter TargetName="borderExpandSite" Property="BorderThickness" Value="0,0,1,1" />
                                </Trigger>
                                <Trigger Property="IsExpanded" Value="false">
                                    <Setter TargetName="PART_HierarchyRowTopLine" Property="Visibility" Value="Collapsed"/>
                                    <Setter TargetName="PART_HierarchyRowBottomLine" Property="Visibility" Value="Collapsed"/>
                                </Trigger>

                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="{StaticResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <ControlTemplate x:Key="HierarchyChildPresenterTemplate" TargetType="telerik:HierarchyChildPresenter">
                <telerik:RadExpander x:Name="PART_Expander" Style="{StaticResource GridViewExpandableRowExpanderStyle}"
                                 IsExpanded="{Binding Path=IsExpanded, Mode=TwoWay}"
                                 >
                    <telerik:RadExpander.Header>
                        <StackPanel Orientation="Horizontal">
                            <telerik:GridViewCellsPanel x:Name="PART_FrozenGridViewCellsPanel"/>
                            <telerik:FrozenColumnsSplitter  x:Name="PART_FrozenColumnsSplitter"  />
                            <telerik:HorizontalScrollPanel x:Name="PART_PartialScrollContainer"  >
                                <telerik:GridViewCellsPanel x:Name="PART_GridViewCellsPanel" Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                            </telerik:HorizontalScrollPanel>
                        </StackPanel>
                    </telerik:RadExpander.Header>
                </telerik:RadExpander>
            </ControlTemplate>

            <Style TargetType="telerik:HierarchyChildPresenter">
                <Setter Property="Template" Value="{StaticResource HierarchyChildPresenterTemplate}" />
                <Setter Property="MinHeight" Value="24" />
            </Style>

        </Grid.Resources>

also I use the DependencyObjectExtensions.cs that you implemented in your example code!
I mentioned above, I don't know why, but when I add GroupDescriptions, SOMETIMES the parent expandable row expands, and somtimes don't!

Thanks for your kindness,

[Milan]

Hi Meisam,

I could not reproduce the problem that you have described. Could you send an application that will allow me to simulate the problem?

Best wishes,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Meisam]

Hi Milan,

I think it's better that I attach a screen shot of our problem, because it's not usual and happens sometimes(actully as I said before, because of existing GroupDescriptions)!

here is a link to the picture:
RadGridView ChildPresenter

as you can see in the picture, some rows in the group has been not expanded and some rows (in the same group or another) expanded!

I hope this will be helpful,
Regards

[Milan]

Hello Meisam,

Finally we have managed to reproduce the problem and we are currently investigating it. We will notify you once we have a solution.

Thank you for your patience.

All the best,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Milan]

Hello Meisam,

You can get rid of the problem by taking another approach - implement the selection when the "+" sign is clicked using code behind only. Thank will allow you to get rid of all the XAML style for HierarchyChildPresenter in exchange for just a few line of C# code. Just subscribe to the RowLoaded event and in the event handler do the following:

void RadGridView1_RowLoaded(object sender, RowLoadedEventArgs e)

{

var row = e.Row as GridViewExpandableRow;

if (row != null)

{

var button = row.ChildrenOfType<ToggleButton>().FirstOrDefault();

if(button != null)

button.Click += new RoutedEventHandler(button_Click);

}

}

void button_Click(object sender, RoutedEventArgs e)

{

var button = e.OriginalSource as ToggleButton;

button.ParentOfType<GridViewExpandableRow>().IsSelected = true;

}

This will implement the selection logic. Once you are done with that you can use RadGridView.HierarchyChildTemplate property to modify the appearance of the hierarchy child content:

<telerik:RadGridView Name="RadGridView1" SelectionChanged="RadGridView1_SelectionChanged" >
    <telerik:RadGridView.HierarchyChildTemplate>
        <DataTemplate>
            <TabControl Name="PART_ChildDataItemsControl" ItemsSource="{Binding}"/>
        </DataTemplate>
    </telerik:RadGridView.HierarchyChildTemplate>
</telerik:RadGridView>

Sincerely yours,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Meisam]

Hi Milan

thanks a lot, it worked nice

Best Regards

[Ben]

So now that the ExpandableDataRecord object no longer exists in the Telerik.Windows.Data namespace. How do we accomplish selecting an item when it is expanded in the 2010 Q1 release?
 
Thanks!

Never mind, I found a work around... for anyone else with the same issue.  RowDetailsVisibilityMode="VisibleWhenSelcted".