Skip to main content
All docs
V23.2

MVVM - Apply Parameters from the ViewModel

  • 2 minutes to read

The DevExpress MVVM Framework allows you to bind the DocumentPreviewControl to a report in a ViewModel. The ViewModel instantiates a report and specifies report parameters. Parameter values are obtained from the ViewModel properties bound to View elements.

In this example, the GridControl component lists employees. The selected row identifies the employee, whose ID is passed as a parameter to the report displayed in a separate window.

The following code demonstrates bindings in XAML:

<dx:ThemedWindow x:Class="PassDataFromViewModelToReport.MainWindow"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
                 xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
                 xmlns:dxp="http://schemas.devexpress.com/winfx/2008/xaml/printing"
                 xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
                 xmlns:models="clr-namespace:PassDataFromViewModelToReport.Models"
                 Title="MainWindow" Height="450" Width="800">
    <dx:ThemedWindow.DataContext>
        <models:MainViewModel />
    </dx:ThemedWindow.DataContext>

    <dxmvvm:Interaction.Behaviors>
        <dx:DialogService>
            <dx:DialogService.ViewTemplate>
                <DataTemplate>
                    <dxp:DocumentPreviewControl RequestDocumentCreation="True"
                                                DocumentSource="{Binding Report}" />
                </DataTemplate>
            </dx:DialogService.ViewTemplate>
        </dx:DialogService>
    </dxmvvm:Interaction.Behaviors>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <dxg:GridControl ItemsSource="{Binding Employees}"
                         SelectedItem="{Binding SelectedEmployee, Mode=TwoWay}"
                         SelectionMode="Row"
                         AutoGenerateColumns="AddNew"
                         Margin="12,12,12,0">
            <dxg:GridControl.View>
                <dxg:TableView AllowEditing="False" />
            </dxg:GridControl.View>
        </dxg:GridControl>
        <Button Content="Show Preview" Command="{Binding ShowPrintPreviewCommand}" 
                Grid.Row="1" Margin="12" />
    </Grid>
</dx:ThemedWindow>

The ShowPrintPreviewCommand is defined in the ViewModel class. The command instantiates a report, assigns the SelectedEmployee value to the report parameter, and uses the DevExpress.Mvvm.IDialogService to open a report in a modal window:

using DevExpress.Mvvm;
using DevExpress.Mvvm.DataAnnotations;
using DevExpress.XtraReports.UI;
using System.Collections.Generic;
using System.Data.Entity;

namespace PassDataFromViewModelToReport.Models {
    public class MainViewModel : ViewModelBase {
        readonly Data.NWindDBContext dbContext = new Data.NWindDBContext();

        public IEnumerable<Data.Employee> Employees { get; }

        public Data.Employee SelectedEmployee {
            get => GetProperty(() => SelectedEmployee);
            set => SetProperty(() => SelectedEmployee, value);
        }

        public MainViewModel() {
            dbContext.Employees.Load();
            Employees = dbContext.Employees.Local;
        }

        [Command(CanExecuteMethodName = nameof(CanShowPrintPreview))]
        public void ShowPrintPreview() {
            XtraReport report = new EmployeeReport(dbContext);
            report.Parameters["EmployeeId"].Value = SelectedEmployee.EmployeeID;
            using(report) {
                GetService<IDialogService>()
                    .ShowDialog(null, "Print Preview", new DocumentPreviewViewModel(report));
            }
        }
        public bool CanShowPrintPreview() => SelectedEmployee != null;
    }
}

For more information on auto-generated commands, review the following help topic: POCO Commands.

The application appears as follows:

Pass Parameters from the ViewModel to Report - Screenshot

View Example: How to Use ViewModel Data as Report Parameters in WPF MVVM Application