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, the default preview displays the value of the first column of xamGrid™. However, you can also create your own data template to customize this preview.
Assumptions
This topic assumes that you already have a xamGrid control bound to data on your page. For more information, see the Binding xamGrid to Data topic. This topic also assumes that you have deferred scrolling enabled. For more information, see the Deferred Scrolling topic.
You will customize the deferred scrolling settings by setting the DeferredScrollingSettings object’s DeferredScrollTemplate property to a custom data template. This data template will display the value in the ProductName and shade the xamGrid control a different color.
Add tags for the DeferredScrollTemplate property to xamGrid.
In XAML:
<ig:XamGrid.DeferredScrollingSettings>
<ig:DeferredScrollingSettings AllowDeferredScrolling="Default">
<ig:DeferredScrollingSettings.DeferredScrollTemplate>
<!-- Add DataTemplate -->
</ig:DeferredScrollingSettings.DeferredScrollTemplate>
</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.ProductName}
Foreground – White
In XAML:
<TextBlock Text="{Binding Path=Row.Data.ProductName}" Foreground="White"/>
Save and run your application.
