We recommend that you use the xamDataGrid control instead of the xamGrid control. The xamGrid is being planned for retirement over the next few years and will not receive any new features. We will continue to provide support and critical bug fixes for the xamGrid during this time. For help or questions on migrating your codebase to the xamDataGrid, please contact support.
When you enable deferred scrolling and GroupBy, the default preview displays the parent’s first column of the xamGrid™ control. However, you can also create your own data template to customize this preview.
This topic assumes the following:
You already have a hierarchical xamGrid™ control bound to data on your page. For more information see the Data Binding and Define Column Layout topics.
You have deferred scrolling enabled. For more information, see the Deferred Scrolling topic.
You have GroupBy enabled. For more information, see the GroupBy topic.
You will customize the deferred scrolling settings by setting the DeferredScrollingSettings object’s GroupByDeferredScrollTemplate property to a custom data template. This data template will display the value that the grid is grouped by and also shade the xamGrid a different color.
Add tags for the GroupByDeferredScrollTemplate property to xamGrid
In XAML:
<ig:XamGrid.DeferredScrollingSettings>
<ig:DeferredScrollingSettings AllowDeferredScrolling="Default">
<ig:DeferredScrollingSettings.GroupByDeferredScrollTemplate>
<!-- Add DataTemplate -->
</ig:DeferredScrollingSettings.GroupByDeferredScrollTemplate>
</ig:DeferredScrollingSettings>
</ig:XamGrid.DeferredScrollingSettings>
Create a DataTemplate. The deferred scrolling template’s data context is a ScrollTipInfo object; therefore, you can bind the following properties exposed by the ScrollTipInfo object within this data template.
Row
FirstColumnValue
Column
Add a Grid panel to the DataTemplate. Add a Rectangle to the Grid panel. This rectangle will be displayed over xamGrid to give the appearance of shading. Set the following properties on the Rectangle:
Fill – Blue
Opacity – 0.65
In XAML:
<DataTemplate> <Grid>
<Rectangle Fill="Blue" Opacity="0.65"/>
<!--Add StackPanel -->
</Grid>
</DataTemplate>
Add a StackPanel container to the Grid panel. Set the following properties:
HorizontalAlignment – Center
VerticalAlignment – Center
In XAML:
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <!-- Add TextBlock --> </StackPanel>
Add a TextBox control to the StackPanel container. You will display information from the ProductName column in this TextBox control. Set the following properties:
Text – {Binding Path = Row.Data}
Foreground – White
In XAML:
<TextBlock Text="{Binding Path=Row.Data}" Foreground="White"/>
Save and run your application.
