Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

ConfigurePageSettingsPage Class

Implements the Page Settings and Color Scheme section of the Report Wizard’s Specify Page Settings page.

#Declaration

TypeScript
export class ConfigurePageSettingsPage extends WizardPageBase

#Remarks

You can customize this section or remove it from the Specify Page Settings page. To identify this section in code, use the FullscreenReportWizardSectionId.ConfigurePageSettingsPage value.

See the following topics for more information:

#Inherited Members

#Inheritance

WizardPageBase<TState, TResult>
ConfigurePageSettingsPage

#Methods

#addColorScheme(name, color) Method

Registers a custom color scheme on the Specify Page Settings page.

#Declaration

TypeScript
addColorScheme(
    name: string,
    color: string,
    position?: number
): void

#Parameters

Name Type Description
name string

The color scheme’s name.

color string

The base color.

position number

The color scheme’s zero-based position.

#Remarks

The following code snippet demonstrates how to customize color schemes.

<script type="text/javascript">
    function beforeSectionInit(args) {
        if (args.sectionId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ConfigurePageSettingsPage) {
            // Remove specific color schemes and the capability to specify a custom scheme.
            args.section.removeColorScheme("Grey", "Jeans Blue", "Light Green", "Custom");
            args.section.addColorScheme("My Color", "255, 96, 110, 246");
        }
    }
    function beforePageInit(args) {
        if(args.pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SpecifyPageSettingsPage) {
            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:

#canFinish Method

Specifies whether it is possible to finish the wizard.

#Declaration

TypeScript
canFinish(): boolean

#Returns

Type Description
boolean

true, if it is possible to finish the wizard; otherwise, false.

#canNext Method

Specifies whether the next section is available.

#Declaration

TypeScript
canNext(): boolean

#Returns

Type Description
boolean

true, if the next section is available; otherwise, false.

#commit Method

Commits settings to the local page 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

#initialize(state) Method

Initializes the section with the specified settings.

#Declaration

TypeScript
initialize(
    state: DevExpress.Reporting.Designer.Wizard.IReportWizardState
): JQueryPromise<any>

#Parameters

Name Type Description
state IReportWizardState

The section’s state.

#Returns

Type Description
JQueryPromise<any>

A JQuery Promise object that identifies whether page initialization succeeded.

#onChange(callback) Method

Allows you to handle any changes of page settings.

#Declaration

TypeScript
onChange(
    callback: any
): void

#Parameters

Name Type Description
callback any

A function that is called on any page changes.

#removeAllColorSchemes Method

Removes all predefined color schemes.

#Declaration

TypeScript
removeAllColorSchemes(): void

#Remarks

The following code snippet demonstrates how to customize color schemes.

<script type="text/javascript">
    function beforeSectionInit(args) {
        if (args.sectionId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ConfigurePageSettingsPage) {
            args.section.removeAllColorSchemes();
            args.section.addColorScheme("My Color", "255, 96, 110, 246");
        }
    }
    function beforePageInit(args) {
        if(args.pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SpecifyPageSettingsPage) {
            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:

#removeColorScheme(names) Method

Removes the specified color schemes from the Specify Page Settings page.

#Declaration

TypeScript
removeColorScheme(
    ...names: string[]
): void

#Parameters

Name Type Description
names string[]

An array of color scheme names.

#Remarks

The following code snippet demonstrates how to customize color schemes.

<script type="text/javascript">
    function beforeSectionInit(args) {
        if (args.sectionId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ConfigurePageSettingsPage) {
            // Remove specific color schemes and the capability to specify a custom scheme.
            args.section.removeColorScheme("Grey", "Jeans Blue", "Light Green", "Custom");
            args.section.addColorScheme("My Color", "255, 96, 110, 246");
        }
    }
    function beforePageInit(args) {
        if(args.pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SpecifyPageSettingsPage) {
            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:

#setCustomColor(color) Method

Sets the default color for the tile that allows users to specify a custom color scheme.

#Declaration

TypeScript
setCustomColor(
    color: string
): void

#Parameters

Name Type Description
color string

The default custom color.

#Remarks

The following code snippet demonstrates how to change the custom color.

<script type="text/javascript">
    function beforeSectionInit(args) {
        if (args.sectionId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ConfigurePageSettingsPage) {
            args.section.setCustomColor("255, 96, 110, 246"); 
        }
    }
    function beforePageInit(args) {
        if(args.pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SpecifyPageSettingsPage) {
            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>