Animating rows and cells when data changes

[Damon Luck]

Hi,

We are using the RadGridView control to display a set of databound data which has AutoGenerateColumns="True".

Is it possible for us to have both cells and rows change colour for a given time period when an item in the databound data changes?

As an example we have a grid with four columns A, B, C and D which has multiple rows populated. On row 2 the value in B changes, this will cause cell B2 to turn Red for 60 seconds, all other cells on row 2 will turn Yellow for 60 seconds. After this 60 second period all cells on row 2 will return to the default colour Green.

Thanks,

Damon

[Pavel Pavlov]

Hi Damon Luck,

This can be achieved by placing a custom control inside the cell and placing the animation logic in the codebehind of the custom control .
The approach is demonstrated in the attached example.

Kind regards,
Pavel Pavlov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Pete Whitehead]

Using your example below and your response from here: http://www.telerik.com/community/forums/silverlight/gridview/automatic-columns-generation.aspx

Using the RadGridView control at runtime we pass it a data source. Which we then use to generate the columns and add a custom cell.

public void SetColumns(List<String> cells)
        {
            foreach (String elementName in cells)
            {
                Binding binding = new Binding(elementName);
                binding.Mode = BindingMode.TwoWay;

                DataTemplate dt = Create(typeof(AnimatedTextBoxCell), elementName);

                GridViewDataColumn column = new GridViewDataColumn();
                column.CellTemplate = dt;
                column.DataMemberBinding = binding;
                this.Columns.Add(column);
            }
        }

        public static DataTemplate Create(Type type, String elementName)
        {
            String dataTemplate = @"<DataTemplate
                xmlns=""http://schemas.microsoft.com/client/2007""
                xmlns:controls=""clr-namespace:" + type.Namespace + @";assembly=" + type.Namespace + @""">
                <controls:" + type.Name + @" Value=""{Binding " + elementName + @"}""
                AnimationHasRun=""{Binding Mode=TwoWay, Path=" + elementName + @"AnimationHasRun}""/>
              </DataTemplate>";

           return (DataTemplate)XamlReader.Load(dataTemplate);

We have created a custom animating cell which animates when it's value changes. However the issue we now have is that should the user change the grid (e.g. change the column groupings) the grid destroys all the cells and rebuilds them. This means the cells themselves lose the knowledge of their previous animation state and therefore may show the same animation again which is not what we want.

One solution we had was to try to create a 2 way binding between the cell and a dictionary - where the dictionary contains a dynamically created list of booleans (which indicate the animation state) keyed off the property name. However we were unable to get the binding between a cell and a dictionary entry .value field.

Is there a way to retain a cells state, or to bind a dictionary entry to a cell at runtime?

Thanks,

Pete

[Pavel Pavlov]

Hi Pete Whitehead,

The attached project has a Dictionary added to the user control.
For the purpose of illustration the dictionary tracks the count of animations executed for a specific and stops animating when the count exceeds 2.

I believe you can easily modify this approach to suit your requirements.

Best wishes,
Pavel Pavlov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.