Here’s what you need to do to implement the Telerik Report Viewer in WPF applications and connect it to Telerik Reporting REST service. Learn more.
In this step-by-step tutorial, I will demonstrate how to use the Telerik Report Viewer in the WPF application. This tutorial covers the following topics:
The purpose of the WPF Report Viewer control is to display Telerik reports and allow the user to interact with them. Reports are processed and rendered on the client machine. The report in the viewer is rendered as standard XAML elements, like Canvas and TextBlock, through Telerik Reporting XAML for WPF rendering mechanism.
To integrate the Telerik Report Viewer in a WPF application, the following are the prerequisites to use:
The WPF ReportViewer control is a composite of Telerik UI for WPF controls, and the viewer’s functionality resides in Telerik.ReportViewer.Wpf.dll and the viewer’s UI in Telerik.ReportViewer.Wpf.xaml. Following are the steps to use this in WPF:
Step 1: Create a new WPF application project in Visual Studio.
Step 2: Next, right-click on the project and select Add, then select New Item from the menu. It will open the Add New Item window, as below screenshot:
Step 3: Select WPF from the left side menu, and then you will see a list of WPF controls or templates and select Telerik Report Viewer Window R2 2020.
Step 4: Provide the name for it, then click the Add button. It will open the Add new Report Viewer page. Select REST service from the left side and provide your reporting REST service path as below:
Step 5: Click on Next button, and it will open the next page to configure the report source. Select the first option for report definition and provide the .trdp file path as below:
Step 6: Click the Next button, and it will open the last page for Configure Report Viewer. Tick the checkbox for Enable accessibility.
Step 7: Click the Finish button. It will show the static HTML log page with a message and detailed summary as below:
It will update the App.xaml file with ResourceDictionaries as below code:
<Application x:Class="wpf_report_viewer.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:wpf_report_viewer" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/Telerik.ReportViewer.Wpf.Themes;component/Themes/Material/System.Windows.xaml" /> <ResourceDictionary Source="/Telerik.ReportViewer.Wpf.Themes;component/Themes/Material/Telerik.Windows.Controls.xaml" /> <ResourceDictionary Source="/Telerik.ReportViewer.Wpf.Themes;component/Themes/Material/Telerik.Windows.Controls.Input.xaml" /> <ResourceDictionary Source="/Telerik.ReportViewer.Wpf.Themes;component/Themes/Material/Telerik.Windows.Controls.Navigation.xaml" /> <ResourceDictionary Source="/Telerik.ReportViewer.Wpf.Themes;component/Themes/Material/Telerik.ReportViewer.Wpf.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
It will add the Telerik references as below:
Step 8: In the previous steps we have added one .xaml file as the code below:
<Window x:Class="wpf_report_viewer.TelerikReportViewer" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:wpf_report_viewer" xmlns:tr="http://schemas.telerik.com/wpf" xmlns:telerikReporting="clr-namespace:Telerik.Reporting;assembly=Telerik.Reporting" Title="Report Viewer Window"> <Grid x:Name="LayoutRoot"> <Grid Margin="20" > <Grid.RowDefinitions> <RowDefinition Height="*" /> </Grid.RowDefinitions> <tr:ReportViewer Grid.Row="0" x:Name="ReportViewer1" HorizontalAlignment="Stretch" EnableAccessibility="True" ReportEngineConnection="engine=RestService;uri=http://localhost:12345/api/reports"> <tr:ReportViewer.ReportSource> <telerikReporting:UriReportSource Uri="path\Reports\Product Catalog.trdp" /> </tr:ReportViewer.ReportSource> </tr:ReportViewer> </Grid> </Grid> </Window>
Step 9: Lastly, in the App.xaml file, we need to replace the StartupUri of the Application tag as below:
<Application x:Class="wpf_report_viewer.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:wpf_report_viewer" StartupUri="MainWindow.xaml"/>
<Application x:Class="wpf_report_viewer.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:wpf_report_viewer" StartupUri="newly-added.xaml"/>
The value we have changed is so that when the application starts it will open the recently added Telerik Report Viewer XAML file; otherwise it would show the MainWindow XAML.
Step 10: At this point, we’re all set. Start the application, and it should display the WPF window with the rendered report in it as shown below:
In case the report is not displayed, please make sure the Reporting REST service is running, following the suggestions in this Knowledge Base article.
The Report Viewer is divided into three main parts: the first part on top for the toolbar, the second part on the left with the toolbar for the filter, and the third part beside the filter for showing the data.
The toolbar of the WPF Report Viewer provides basic functionality for interacting with the currently loaded report:
Filter - In the output screenshot, we have seen the Language drop-down is there above the rest of the filters. Based on the filter selection of the language selection, the report data is shown for the catalog in that language. The default language selection is English. When we change it to another language, like French, it will show the French catalog results:
You can download this example from GitHub.
In this article, we discussed what the Telerik Report Viewer is, its prerequisites, how to use or work with it in a WPF application, and the Report Viewer toolbar for users. If you have any suggestions or queries regarding this article, please leave a comment.
“Learn It, Share it.”
Subscribe to be the first to get our expert-written articles and tutorials for developers!