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

Storyboard animation when row data is updated

3 Answers 670 Views
TreeListView
This is a migrated thread and some comments may be shown as answers.
Kirill
Top achievements
Rank 1
Kirill asked on 18 Mar 2019, 12:56 AM

My end goal is to trigger fading colour animation on a row when any of its data is updated to signal update to the user. To do that, a style was created:

01.<UserControl.Resources>
02.        <stl:EventsTreeRowStyle x:Key="ETRStyle">
03.            ...
04.            <stl:EventsTreeRowStyle.UpdatedStyle>
05.                <Style TargetType="telerik:GridViewRow">
06.                    <Style.Triggers>
07.                        <EventTrigger RoutedEvent="Binding.TargetUpdated">
08.                            <BeginStoryboard>
09.                                <Storyboard>
10.                                    <ColorAnimation Storyboard.TargetProperty="(DataGridRow.Background).(SolidColorBrush.Color)"
11.                                                        Duration="00:00:10"
12.                                                        From="Gold" To="White"/>
13.                                </Storyboard>
14.                            </BeginStoryboard>
15.                        </EventTrigger>
16.                    </Style.Triggers>
17.                </Style>
18.            </stl:EventsTreeRowStyle.UpdatedStyle>
19.        </stl:EventsTreeRowStyle>
20.    </UserControl.Resources>
21.    <Grid>
22.        <telerik:RadTreeListView ItemsSource="{Binding EventsTree}" Style="{StaticResource TelerikTreeListViewStyle}"
23.                                 RowStyleSelector="{StaticResource ETRStyle}">
24.            <telerik:RadTreeListView.ChildTableDefinitions>
25.                <telerik:TreeListViewTableDefinition ItemsSource="{Binding Children}"/>
26.            </telerik:RadTreeListView.ChildTableDefinitions>
27.            <telerik:RadTreeListView.Columns>
28.                <telerik:GridViewDataColumn Width="4*" DataMemberBinding="{Binding Details}" Header="Details"/>
29.                ...
30.            </telerik:RadTreeListView.Columns>
31.        </telerik:RadTreeListView>
32.    </Grid>

 

However it looks like like Binding.TargetUpdated is never triggered. Is there any other way to do this?

3 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 20 Mar 2019, 04:58 PM
Hello Kirill,

According to MSDN the TargetUpdated event will be fired only when a value is transferred from the source to the target. And also when the NotifyOnTargetUpdated is set to True. Anyway, I've attached a small example showing how to acheive your requirement using very similar approach. You will need an additional property in the view model of the rows that will indicate if a change appeared and the colour animation should kick-in. I hope this helps.

Regards,
Martin Ivanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kirill
Top achievements
Rank 1
answered on 21 Mar 2019, 01:01 AM

Hi Martin,

Thank you for your reply, DataTrigger is what I was using previously, but unfortunately this approach has several issues, which is why I wanted to switch to EventTrigger:

1. Animation is not being restarted. In your example, if you press the button again, nothing happens. This can be solved by setting IsHighlighted to false first and then to true on button press, but even this works well only if the animation has already finished and we have a "clean" restart. If you press the button multiple times in the middle of animation running, it seems to be stuck on "To" colour and then abruptly ends. I expect some of my rows to be updated more frequently than animation duration and in those cases I'd like to restart animation every time, even if it was already in the middle of running.

2. But at the same time, if you have many rows in your grid, more than can be fit on screen at once, as you scroll up and down animation is getting relaunched without pressing a button, not only on the object which was highlighted in the past, but on the other unrelated objects as well. I suspect this issue is caused by grid virtualisation? You can replicate this easily in your example if you make several hundred iterations of adding clubs in Club.cs file and then scroll through the grid up and down after pressing the button and letting animation pass.

These issues are the reason I found DataTrigger not a great solution and was looking for something else, like EventTrigger. Do you have any other suggestions or workarounds?

0
Martin Ivanov
Telerik team
answered on 25 Mar 2019, 03:52 PM
Hello Kiril,

I see your point. In this case, the easiest approach that I could suggest you is to use code-behind and start the animation in code. I've attached a small example showing this approach. I hope it helps.

Regards,
Martin Ivanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeListView
Asked by
Kirill
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Kirill
Top achievements
Rank 1
Share this question
or