Skip to main content Skip to footer

Deferred Scrolling in C1FlexGrid WPF

In C1Flexgrid for WPF control or any other grid control, by default, when the user drags the thumb on a scrollbar, the content view gets scrolled simultaneously. However, when the grid contains a large number of rows, scrolling becomes a bit slow. The default behavior of C1FlexGrid is "live" scrolling, where the user is able to see the contents of the grid move while dragging the thumb of a scroll bar. However, this "live" scrolling requires a relatively large amount of processing, which in some cases may cause the UI to feel sluggish. For such situations, C1Flexgrid provides us with an option to use deferred scrolling. Deferred scrolling is an alternative scrolling behavior where the contents of the grid remain static until the user releases the mouse button (similar to the behavior of the Outlook 2007 Inbox). The content is updated only when the user releases the thumb. We can implement deferred scrolling in C1Flexgrid by setting the 'DeferScrolling' property. It's actually an Enumeration with the following values :

  1. None - Do not defer scrolling.
  2. DeferVertical - Defer scrolling in the vertical direction.
  3. DeferHorizontal - Defer scrolling in the horizontal direction.
  4. DeferBoth - Defer scrolling in both directions.

Here's the syntax: C#:


public DeferScrolling DeferScrolling { get; set; }  

VB:


Public Property DeferScrolling As DeferScrolling  
Get  
Set  

Also, while the user drags the scrollbar thumb in deferred scrolling mode, the grid raises the ScrollingDeferred event. You may use it to provide feedback during the deferred scrolling operation. I've attached a sample that sets the scroll behavior in C1Flexgrid as per user's choice via a C1ComboBox. Here's the XAML:


<Grid Background="AliceBlue">  
 <Grid.RowDefinitions>  
  <RowDefinition Height="20"/>  
  <RowDefinition Height="Auto" />  
  <RowDefinition Height="20"/>  
  <RowDefinition Height="Auto" />  
</Grid.RowDefinitions>  
<StackPanel Orientation="Horizontal" Grid.Row="1" >  
  <TextBlock Text="DeferScrolling : " Padding="10,3,10,0"/>  
  <c1:C1ComboBox Width="150" Text="DeferBoth" IsEditable="False"  
SelectedItemChanged="C1ComboBox_SelectedItemChanged">  
    <c1:C1ComboBoxItem Content="DeferBoth" IsTabStop="False" />  
    <c1:C1ComboBoxItem Content="DeferHorizontal" IsTabStop="False" />  
    <c1:C1ComboBoxItem Content="DeferVertical" IsTabStop="False" />  
    <c1:C1ComboBoxItem Content="None" IsTabStop="False" />  
</c1:C1ComboBox>  
</StackPanel>  
<c1:C1FlexGrid Name="c1FlexGrid1" DeferScrolling="DeferBoth"  
Grid.Row="3" Width="550" Height="380"/>  
</Grid>  

And the code:


// Change DeferScroll mode as per selection in ComboBox  
private void C1ComboBox_SelectedItemChanged(object sender, C1.WPF.PropertyChangedEventArgs<object> e)  
{  
  var _flex = this.c1FlexGrid1;  
  string _deferScroll;  
  if (e.NewValue.GetType() == typeof(string))  
  {  
      _deferScroll = e.NewValue.ToString();  
  }  
  else  
  {  
     _deferScroll = (((System.Windows.Controls.ContentControl)  
     (e.NewValue))).Content.ToString();  
  }  
  if (_flex != null)  
  {  
     switch (_deferScroll)  
     {  
        case "None":  
        _flex.DeferScrolling = C1.WPF.FlexGrid.DeferScrolling.None;  
        break;  
        case "DeferBoth":  
        _flex.DeferScrolling = C1.WPF.FlexGrid.DeferScrolling.DeferBoth;  
        break;  
        case "DeferHorizontal":  
        _flex.DeferScrolling = C1.WPF.FlexGrid.DeferScrolling.DeferHorizontal;  
        break;  
        case "DeferVertical":  
        _flex.DeferScrolling = C1.WPF.FlexGrid.DeferScrolling.DeferVertical;  
        break;  
     }  
  }  
}  

Deferred Scroll Download CS Sample Download Vb.Net Sample

MESCIUS inc.

comments powered by Disqus