FullscreenWizardPage Class

A base class for fullscreen pages of the Report Wizard or Data Source Wizard.

#Declaration

TypeScript

export class FullscreenWizardPage extends WizardPageBase

#Inherited Members

changeAlways

onChange(callback)

#Inheritance

Show 11 items

WizardPageBase<TState, TResult>

FullscreenWizardPage

SelectDataSourcePage

SpecifyFederationDataSourceSettingsPage

SpecifyJsonDataSourceSettingsPage

SpecifySqlDataSourceSettingsPage

DefineReportLayoutPage

DefineCrossTabPage

SelectDataSourcePage

SpecifyLabelSettingsPage

SpecifyPageSettingsPage

#constructor

Creates a new instance of the FullscreenWizardPage class with the default settings.

#Declaration

TypeScript

constructor()

#Properties

#events Property

Provides access to the page’s event collection.

#Declaration

TypeScript

events: DevExpress.Analytics.Utils.EventManager<FullscreenWizardPage, IWizardFullscreenPageEvents<FullscreenWizardPage>>

#Property Value

Type	Description
EventManager<FullscreenWizardPage,IWizardFullscreenPageEvents<FullscreenWizardPage>>	The event manager.

#Remarks

The following table lists page events and describes how you can use them to customize the page.

Page Event	Description
beforeSectionInitialize	Occurs before the section’s initialize method is called. Handle this event to customize the section’s content and state. For instance, you can remove a specific element or customize the section’s options.
afterSectionInitialize	Occurs after the page’s initialize method is called. Handle this event to customize the section’s settings to display in the UI. For instance, you can check a specific option (a data member, field or data connection).

Page Event

Description

beforeSectionInitialize

Occurs before the section’s initialize method is called.

Handle this event to customize the section’s content and state. For instance, you can remove a specific element or customize the section’s options.

afterSectionInitialize

Occurs after the page’s initialize method is called.

Handle this event to customize the section’s settings to display in the UI. For instance, you can check a specific option (a data member, field or data connection).

Use the ASPxClientReportDesigner.CustomizeWizard event to handle the page’s events as shown below.

ASPX

<script type="text/javascript">
    function beforeSectionInit(args) {
        // ...
    }
    function beforePageInit(args) {
        args.page.events.addHandler("beforeSectionInitialize", beforeSectionInit);
    }

    function CustomizeWizard(s, e) {
        if(e.Type === "ReportWizard") {
            e.Wizard.events.addHandler("beforePageInitialize", beforePageInit)
        }
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">
    <ClientSideEvents CustomizeWizard="CustomizeWizard" />
</dx:ASPxReportDesigner>

See the following topics for more information:

#Methods

#canFinish Method

Specifies whether the Finish button is enabled on a wizard page.

#Declaration

TypeScript

canFinish(): boolean

#Returns

Type	Description
boolean	true, if the Finish button is enabled; otherwise, false.

#canNext Method

Specifies whether the Next button is enabled on a wizard page.

#Declaration

TypeScript

canNext(): boolean

#Returns

Type	Description
boolean	true, if the Next button is enabled; otherwise, false.

#commit Method

Commits the page settings to the state.

#Declaration

TypeScript

commit(): JQuery.Promise<any, any, any>

#Returns

Type	Description
Promise<any,any,any>	A JQuery Promise object that identifies whether the commit succeeded.

#dispose Method

Disposes the page.

#Declaration

TypeScript

dispose(): void

#getNextSectionId(sectionId) Method

Returns the next section’s ID.

#Declaration

TypeScript

getNextSectionId(
    sectionId: string
): any

#Parameters

Name	Type	Description
sectionId	string	The current section’s ID.

#Returns

Type	Description
any	The next section’s ID.

#initialize(state) Method

Initializes the page.

#Declaration

TypeScript

initialize(
    state: DevExpress.Analytics.Wizard.IDataSourceWizardState,
    stateChanged?: boolean
): JQuery.Promise<any, any, any>

#Parameters

Name	Type	Description
state	IDataSourceWizardState	The page’s state.
stateChanged	boolean

#Returns

Type	Description
Promise<any,any,any>	A JQuery Promise object that identifies whether page initialization succeeded.

#registerSection(sectionId, metadata) Method

Registers the specified section.

#Declaration

TypeScript

registerSection(
    sectionId: string,
    metadata: DevExpress.Analytics.Wizard.IWizardPageMetadata<IWizardPage>
): void

#Parameters

Name	Type	Description
sectionId	string	The section ID.
metadata	IWizardPageMetadata<IWizardPage>	The section metadata.

#registerSections Method

Registers the page’s predefined sections.

#Declaration

TypeScript

registerSections(): void

#setSectionPosition(sectionId) Method

Sets the section position.

#Declaration

TypeScript

setSectionPosition(
    sectionId: string,
    position?: DevExpress.Analytics.Wizard.Internal.WizardSectionPosition
): void

#Parameters

Name	Type	Description
sectionId	string	The section ID.
position	WizardSectionPosition

#Remarks

This method allows you to arrange sections within the page.

The following example demonstrates how to hide the Select Data Source page’s section that displays available data sources and make the remaining section occupy the entire page.

ASPX

<script type="text/javascript">
   function beforePageInit(args) {
       // Identify the "Select Data Source" page.
       if (args.pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SelectDataSourcePage) {
           // Remove the page's section that displays available data sources.
           args.page.unregisterSection(DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ChooseAvailableDataSourcePage);
           // Make the "Select data source type" section occupy the entire page.
           args.page.setSectionPosition(DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ChooseDataSourceTypePage);
           // Override the navigation logic to skip the removed section.
           args.page.getNextSectionId = function(sectionId) {
               if(!sectionId) return DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ChooseDataSourceTypePage;
           }
       }
   }

   function CustomizeWizard(s, e) {
       if(e.Type === "ReportWizard") {
           e.Wizard.events.addHandler("beforePageInitialize", beforePageInit)
       }
   }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner3" runat="server">
    <ClientSideEvents CustomizeWizard="CustomizeWizard" />
</dx:ASPxReportDesigner>

See the following topics for more information:

#unregisterSection(sectionId) Method

Hide the specified section from the wizard page.

#Declaration

TypeScript

unregisterSection(
    sectionId: string
): void

#Parameters

Name	Type	Description
sectionId	string	The section ID.

#Remarks

Pass the corresponding FullscreenReportWizardSectionId/FullscreenDataSourceWizardSectionId value as the method parameter.

The following example demonstrates how to hide the Select Data Source page’s section that displays available data sources.

ASPX

<script type="text/javascript">
   function beforePageInit(args) {
       // Identify the "Select Data Source" page.
       if (args.pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SelectDataSourcePage) {
           // Remove the page's section that displays available data sources.
           args.page.unregisterSection(DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ChooseAvailableDataSourcePage);
           // Make the "Select data source type" section occupy the entire page.
           args.page.setSectionPosition(DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ChooseDataSourceTypePage);
           // Override the navigation logic to skip the removed section.
           args.page.getNextSectionId = function(sectionId) {
               if(!sectionId) return DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ChooseDataSourceTypePage;
           }
       }
   }

   function CustomizeWizard(s, e) {
       if(e.Type === "ReportWizard") {
           e.Wizard.events.addHandler("beforePageInitialize", beforePageInit)
       }
   }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner3" runat="server">
    <ClientSideEvents CustomizeWizard="CustomizeWizard" />
</dx:ASPxReportDesigner>

See the following topics for more information: