SfDataGrid New Row Animation

[Thomas Mendez]

Hello!

Is there a way to animate the addition of a new SFDataGrid row? For example, say I have an SfDataGrid with 5 rows of data. If I add a 6th item to the bound ItemsSource, is there a way to animate the transition from 5 rows to 6 rows? Can the 6th row visibility be animated such that it "slides" down from underneath the existing 5th row?

Any guidance would be greatly appreciated!

[Srinivasan Vasu]

Hi Thomas,

Thanks for contacting Syncfusion support.

We have analyzed your query and we have prepared a sample as per your requirement. In that sample, we have added style for VirtualizingCellsControl and need to add flag like IsNewRow in Model to bind in the triggers. While adding new row using button click event , Animation will trigger based on the IsNewRow flag in SfDataGrid


Please refer the below code example

C#

private void Button_Click(object sender, RoutedEventArgs e)

        {

            var collection = (this.DataContext as StocksViewModel);

            var item = new StockData() { IsNewRow = true, Account = "SSS", Change = 12.2, Open = 23.3, LastTrade = 985.2, PreviousClose = 212.1, Symbol = "$", Volume = 211 };

            collection.Stocks.Add(item);

            var rowColumnIndex = new RowColumnIndex(this.datagrid.GetLastRowIndex(), this.datagrid.GetFirstColumnIndex());

            this.datagrid.ScrollInView(rowColumnIndex);

            this.Dispatcher.BeginInvoke(new Action(() =>

            {

                item.IsNewRow = false;

            }), System.Windows.Threading.DispatcherPriority.ApplicationIdle);

            
        }

XAML

<Window.Resources>

        <Style TargetType="syncfusion:VirtualizingCellsControl">

            <Style.Triggers>

                <DataTrigger Binding="{Binding IsNewRow}" Value="True">

                    <DataTrigger.EnterActions>

                        <BeginStoryboard>

                            <Storyboard>

                                <DoubleAnimation Storyboard.TargetProperty="Opacity"

                             From="0.0" To="10.0" Duration="0:0:6"/>

                            </Storyboard>

                        </BeginStoryboard>

                    </DataTrigger.EnterActions>

                </DataTrigger>

            </Style.Triggers>

        </Style>
    </Window.Resources>

Please find the sample from the below location,


Sample Location: http://www.syncfusion.com/downloads/support/forum/123731/ze/AnimateGridCell302684049


Regards,
Srinivasan

[Unknown]

Is the same possible with Xamarin Forms? If yes, could you provide an example?