Log In
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
   [Expand]Product Information
    Getting Started
   [Expand]Visual Elements
   [Expand]Design-Time Features
    [Expand]Data Binding
    [Collapse]Printing and Reporting
      How to: Print the ASPxScheduler Using a Report Preview (Step-by-Step Guide)
   [Expand]End-User Capabilities
   [Expand]Member Tables
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Print the ASPxScheduler Using a Report Preview (Step-by-Step Guide)

To create a printout for ASPxScheduler, create an instance of the XtraSchedulerReport class descendant that uses ASPxScheduler data and print it using the ReportViewer Web control. The document describes how to create a simple report and preview it before sending it to a printer.

This guide consists of the following sections:

Expanded Prerequisites. Create a New Web Application

This step is required to create a sample application that contains a data-bound ASPxScheduler control.

Create a new Outlook Inspired Web Application for ASP.NET WebForms using the $Project Wizard. Name it SchedulerReportPreviewTest.

Expanded Steps 1-3. Add a Scheduler Report to the Web Application

  1. Create a new folder named Reports in your application.
  2. Right-click the newly created folder in the Solution Explorer window and select Add DevExpress Item | New Item.... In the DevExpress Template Gallery dialog, select Web Scheduling section and click the Scheduler Report thumbnail to create the XtraSchedulerReport1.cs file and add it to the project, as illustrated in the following image.

  3. A new blank Scheduler report is added to your application. Visual Studio shows the designer for the newly created report (by default, it is named XtraSchedulerReport1). The report descends from the XtraSchedulerReport class, which is the base class for all reports. This is similar to the behavior seen when you are creating a new form class, derived from the base Form class.

Expanded Steps 4-13. Create a Report

  1. To proceed with report creation, open the Toolbox pane (by pressing CTRL+ALT+X). Then, select the DayViewTimeCells control in the DX.17.2: Scheduler Reporting tab and drop it onto the report's DetailBand. Note that this tab is visible only if the XtraSchedulerReport class is opened in the Designer.


    The current implementation requires that report controls reside in the DetailBand only, and not in the other report bands.

  2. Drag the HorizontalResourceHeaders control from the Toolbox and place it above the DayViewTimeCells control in the Detail Band.
  3. Drag the HorizontalDateHeaders control from the Toolbox and place it above the HorizontalResourceHeaders control.
  4. Click the HorizontalResourceHeaders control and use its smart tag menu to specify the HorizontalDateHeaders control (horizontaldateHeaders1 in this example), as shown in the image below.

  5. Use the DayViewTimeCells control's smart tag menu to link it to the HorizontalResourceHeaders control, as shown in the image below. Select the ShowWorkTimeOnly checkbox.

  6. Select all three controls (by holding down the CTRL key while clicking each control) and move them to the right, to allocate space for the time ruler.
  7. Drag the DayViewTimeRuler control from the Toolbox and snap it to the left side of the DayViewTimeCells control. Click the control's smart tag and make sure that dayViewTimeCells1 is selected in the DayViewTimeCells drop-down list. The time ruler is linked to the data provider (ReportDayView) and anchored to time cells.

  8. Drag the top edge of the DayViewTimeRuler control so that its top border is aligned to the top of the HorizontalDateHeaders control. The visible scale of the DayViewTimeRuler starts at the offset from the top edge, which is specified by the ControlCornersOptions.Top property. To specify the offset in the Visual Studio Designer, click the smart tag of the DayViewTimeRuler and set the TopCornerIndent value to 52 pixels, which is the aggregate height of both headers, as illustrated in the following image.

  9. Drag the TimeIntervalInfo control and the CalendarControl from the Toolbox to the Detail Band. Place them above the other controls, at the top of the page. The controls bind themselves to the DayViewTimeCells control automatically. Arrange the controls on the page by resizing and moving them. The resulting report is shown below.

  10. Use the Detail band's smart tag menu to specify that the page break is inserted after the band, as illustrated in the following image.

You can preview the report layout by clicking the Preview tab.

Expanded Steps 14-16. Create a Preview Form

  1. Add a new web user control to the Reports folder by right-clicking it in the Solution Explorer and selecting Add New Item | Web Forms User Control in the invoked menu. Name the control ReportPreview.ascx.
  2. Drag the ASPxDocumentViewer control from the DX.17.2: Reporting tab of the Toolbox and drop it onto the design page of the ReportPreview user control. Set its ASPxDocumentViewer.ClientInstanceName to clientReportViewer.
  3. In the code-behind ReportPreview.ascx.cs file, add the following code:

    Show Me

    A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E1625.

Expanded Steps 17-23. Add the Popup Control to the Calendar Page

  1. Open the Calendar.aspx page, drag the ASPxPopupControl from the DX.17.2: Navigation & Layout tab of the Toolbox and drop it on the page. Set its ASPxPopupControlBase.ClientInstanceName to "ASPxPopupControl1". The ASPxPopup control will be used to display the ReportPreview user control implemented in the previous steps. Specify the popup window size and location. To do this, set its ASPxPopupControl.PopupHorizontalAlign and ASPxPopupControl.PopupVerticalAlign properties to PopupHorizontalAlign.WindowCenter and PopupVerticalAlign.WindowCenter, respectively. Set the Height to 680px, and set the Width to 600px.
  2. Drag the ASPxCallbackPanel control from the DX.17.2: Navigation & Layout tab of the Toolbox and drop it into the popup control. Set the ASPxPanelBase.ClientInstanceName to "ASPxCallbackPanel1".
  3. Place the System.Web.UI.WebControls.Panel control inside the ASPxCallbackPanel. Set its ID to "PreviewPanel". Set its Visible attribute to false.
  4. Drag the ASPxSchedulerControlPrintAdapter control from the DX.17.2: Scheduling tab of the Toolbox and drop it on the page. Set its ASPxSchedulerControlPrintAdapter.SchedulerControl property to the ID of the ASPxScheduler control located on the same page (Scheduler).
  5. The resulting markup created in steps 17-20 in the Calendar.aspx page is shown below.

  6. Handle the ASPxCallbackPanel control's server-side ASPxCallbackPanel.Callback event as follows.

    Show Me

    A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E1625.

Expanded Steps 24-28. Add the Code to Display the Report Preview

  1. In the code-behind file for the Calendar.aspx page, implement the PrepareReportPreview method and call it in the Page_Load event handler. This method loads the PreviewPanel control and binds a report to it:

    Show Me

    A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E1625.

  2. Modify the OutlookMenuTop.xml file located in the App_Data folder, which contains menu items for the top application menu. Add a new PrintReport item to the Actions menu using the following XML markup:
  3. Set the ASPxScheduler.ClientInstanceName attribute to scheduler. It allows JavaScript functions to access the ASPxScheduler client-side control.
  4. Configure the application's top menu in the Root.Master page markup. Find the line DXCOMMENT: Configure the application's top menu and add the client-side ItemClick event handler as follows.
  5. You should hide the loading panel displayed by the ASPxScheduler control during the callback, because this panel will cover the next instance of the popup control window.

    For more information on the loading panel and its behavior, see the ASPxLoadingPanel Overview topic.

    Add the following code to the ReportPreview.ascx file to handle the ASPxDocumentViewer's client-side event.

Expanded Remove the Search button from the Document Viewer toolbar

The ASPxDocumentViewer renders the XtraSchedulerReport as a set of images. Thus the Search functionality of the ASPxDocumentViewer component cannot be used. The Search button should be removed so as not to confuse end-users.

Open ReportPreview.ascx file in the VS Designer, click the ASPxDocumentViewer control's smart tag and select Designer in the task list. Click Default Items button to generate a list of bar buttons. Right-click the Search item and select Remove. Click OK to save changed data.

Expanded Display the Report

Run the project, switch to the Calendar page using the navigation bar on the left, click the Actions menu, and select Print Report. The report is displayed in the Preview window, as shown in the following image.

How would you rate this topic?​​​​​​​