Incremental Template Updating in FlexGrid

New in the 2014 v3 release, ComponentOne FlexGrid for WinRT XAML now supports incremental template updating. With this improvement the C1FlexGrid control has a new CellContentChanging event, in which the developer is able to update the cell template in phases. It improves load time and scrolling performance because cells can be rendered in parts or phases rather than all at once. For example, as the user scrolls very fast you might only display the cell value as plain text. When the grid stops scrolling the cell content can be updated to display richer content or heavier content (content that may require some expensive calculation) that you wouldn’t need rendered for every cell during a scroll. Successive phases can be used to perform heavier actions, and they will be executed provided the UI-thread is free. This is modeled after the similar feature from the Microsoft GridView control. Let's take a look at an example in code. In the CellContentChanging event you will perform different actions depending on the phase number.

private void flexGrid_CellContentChanging(C1FlexGrid sender, CellContentChangingEventArgs args)  
{  
    if (args.Phase == 0)  
    {  
        args.RegisterUpdateCallback(flexGrid_CellContentChanging);  
    }  
    else if (args.Phase == 1)  
    {  
        var factory = _flexFinancial.CellFactory as FinancialCellFactory;  
        if (factory != null)  
            factory.ShowLiveData(_flexFinancial, args.Range, args.Cell);  
    }  
}  

In this sample, in phase 0 we do nothing but call back to the same event. When the phase is 1, we create a more complex Cell Factory. The most time consuming task is typically data binding. In this sample we perform binding on a C1SparkLine control in the ShowLiveData method, so we are able to improve performance during fast scrolls when most cells go no higher than phase 0. So basically we don't show the sparkline at all for phase 0. Below is the ShowLiveData method.

public void ShowLiveData(C1FlexGrid grid, CellRange range, FrameworkElement cell)  
{  
    //Sets the binding in the cell content so that is updated at runtime.  
    var stockTicker = (cell as Border).Child as StockTicker;  
    if (stockTicker != null)  
    {  
        var c = grid.Columns[range.Column];  
        var r = grid.Rows[range.Row];  
        var pi = c.PropertyInfo;  

        // to show sparklines  
        stockTicker.Tag = r.DataItem;  
        stockTicker.BindingSource = pi.Name;  

        var binding = new Binding { Path = new PropertyPath(pi.Name) };  
        binding.Converter = new MyConverter();  
        binding.Source = r.DataItem;  
        binding.Mode = BindingMode.OneWay;  
        stockTicker.SetBinding(StockTicker.ValueProperty, binding);  
    }  
}  

You can check out the entire sample for creating the Cell Factory as part of the FlexGridSamples project that gets installed with Studio for WinRT XAML 2014 v3. The sample file is Financial.xaml.cs.