How to print SfDataGrid with Header and footer?
You can print the SfDataGrid with Header and Footer content by using PrintPageHeaderTemplate and PrintPageFooterTemplate properties in SfDataGrid.PrintSettings. By default, SfDataGrid prints without Header and Footer content.
The following code example explains the Footer data template definition for SfDataGrid. While printing, the data template is set to ContentControl in PrintPreviewAreaControl. From PrintPreviewAreaControl, you can access the following properties by using Ancestor binding in the data template.
- PageIndex – denotes the current page index that is printing
- TotalPages – Total number of pages to be printed
XAML
xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Grid;assembly=Syncfusion.SfGrid.Silverlight"
<!--Need to add this code snippet in Resources Define the DataTemplate with Key-->
<local:EmployeeCollection x:Key="Datetime"/>
<DataTemplate x:Key="FooterTemplate">
<Grid>
<StackPanel Orientation="Horizontal">
<Image HorizontalAlignment="Left" Width="150" Height="25" Source="../Image/syncfusion.png"/>
<TextBlock HorizontalAlignment="Center" Padding="10"
Text="{Binding Source={StaticResource Datetime},
Path=TodayDate, StringFormat='{}{0:dddd, MMMM dd, yyyy}'}"/>
<TextBlock Padding="10"
HorizontalAlignment="Right"
VerticalAlignment="Center">
<TextBlock.Text>
<Binding Path="PageIndex"
RelativeSource="{RelativeSource Mode=FindAncestor,
AncestorType=syncfusion:PrintPreviewAreaControl}"
StringFormat="Page : {0}," />
</TextBlock.Text>
</TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
In the above code example, TodayDate is a normal CLR property in the type of DateTime that is used to store today’s date by using DateTime.Today.
The following code example explains how to set Footer Data Template to PrintSettings.PrintPageFooterTemplate in SfDataGrid.
C#
public MainWindow()
{
InitializeComponent();
this.SfdataGrid.PrintSettings.PrintPageFooterTemplate = Resources["FooterTemplate"] as DataTemplate;
this.SfdataGrid.PrintSettings.PrintPageHeaderHeight = 35;
this.SfdataGrid.PrintSettings.PrintPageFooterHeight = 35;
this.SfdataGrid.PrintSettings.AllowRepeatHeaders = false;
}
Note: Using the same method, you can also set PrintPageHeaderTemplate while printing.
The following screenshot displays the print preview of SfDataGrid with Header and Footer.
You can refer to the sample from the following location.
Sample Link: PrintGridWithHeaderAndFooter_SilverLight.zip
