xtrareports-401087-web-reporting-asp-net-mvc-reporting-end-user-report-designer-in-asp-net-mvc-applications-customization-customize-the-report-data-source-wizard.md
This topic describes how to customize the Fullscreen Report Wizard and Fullscreen Data Source Wizard.
View Example: How to customize the Web Report Wizard
The following example demonstrates how to change the Report Wizard’s default page size and orientation:
<script type="text/javascript">
function beforeInit(args) {
// Customize the default page size and orientation.
args.state.pageSetup.paperKind = "A4";
args.state.pageSetup.landscape = true;
}
function CustomizeWizard(s, e) {
if (e.Type === "ReportWizard") {
e.Wizard.events.addHandler("beforeInitialize", beforeInit)
}
}
</script>
@Html.DevExpress().ReportDesigner(settings => {
settings.Name = "ReportDesigner";
settings.ClientSideEvents.CustomizeWizard = "CustomizeWizard";
// ...
}).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
The resulting Specify Page Settings page:
The FullscreenReportWizard and FullscreenDataSourceWizard classes implement the functionality for the Report Wizard and Data Source Wizard, respectively.
The wizard architecture includes the following main elements:
Global State
Local State
State Manager
Page Iterator
Page Factory
Page
To customize the Report/Data Source Wizard, handle the client-side ASPxClientReportDesigner.CustomizeWizard event. The event’s argument has the following properties:
The following table lists wizard events and describes how to use them to customize the wizard:
|
Wizard Event
|
Description
| | --- | --- | |
|
Occurs before the FullscreenReportWizard.initialize/FullscreenDataSourceWizard.initialize method is called.
Handle this event to customize the predefined settings for the wizard’s global state. For instance, you can change the default page settings, the default report type, etc.
| |
|
Occurs after the FullscreenReportWizard.initialize/FullscreenDataSourceWizard.initialize method is called.
Handle this event to change the page count and / or sequence. For instance, you can remove a specific wizard page or register a new page.
| |
|
Occurs before the page’s initialize method is called.
Handle this event to customize the page’s content and state. For instance, you can remove a specific element from the start page or remove a specific section from other pages.
| |
|
Occurs after the page’s initialize method is called.
Handle this event to customize the page’s settings to display in the UI.
| |
|
Occurs before the wizard’s onFinish method is called.
Handle this event to customize the resulting wizard settings and generate a report/data source based on them. For instance, you can specify your custom report title if a user did not specify it.
| |
|
Occurs after the wizard’s onFinish method is called.
Handle this event to customize the generated report. For instance, you can change the report name and display name.
|
Each fullscreen page except the start page has its own events listed below.
|
Page Event
|
Description
| | --- | --- | |
|
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.
| |
|
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).
|
<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>
@Html.DevExpress().ReportDesigner(settings => {
settings.Name = "ReportDesigner";
settings.ClientSideEvents.CustomizeWizard = "CustomizeWizard";
// ...
}).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
The following image illustrates the order in which events are raised:
The table below lists the Fullscreen Report Wizard’s pages, their IDs, and the corresponding classes.
Each Report Wizard page except the Select Report Type page consists of sections. The tables below list the page sections.
Note
The ‘Specify Data Source Settings’ Page (Object Data Source) page is used only in full screen mode and has private section identifiers.
'Select Data Source' Page
| Section | ID | Class |
|---|---|---|
| Choose Existing Data Source | FullscreenReportWizardSectionId.ChooseAvailableDataSourcePage | ChooseAvailableDataSourcePage |
| Select Data Source Type | FullscreenReportWizardSectionId.ChooseDataSourceTypePage | ChooseDataSourceTypePage |
'Specify Data Source Settings' Page (Database)
| Section | ID | Class |
|---|---|---|
| Choose Data Connection | FullscreenReportWizardSectionId.ChooseSqlConnectionPage | ChooseSqlConnectionPage |
| Choose Queries | FullscreenReportWizardSectionId.ConfigureQueryPage | MultiQueryConfigurePage |
| Configure Master-Detail Relationships | FullscreenReportWizardSectionId.ConfigureMasterDetailRelationshipsPage | ConfigureMasterDetailRelationshipsPage |
| Configure Query Parameters | FullscreenReportWizardSectionId.ConfigureQueryParametersPage | MultiQueryConfigureParametersPage |
'Specify Data Source Settings' Page (JSON)
| Section | ID | Class |
|---|---|---|
| Specify JSON Data Connection | FullscreenReportWizardSectionId.SpecifyJsonConnectionPage | SpecifyJsonConnectionPage |
| Choose JSON Source | FullscreenReportWizardSectionId.ChooseJsonSourcePage | ChooseJsonSourcePage |
| Select Data Fields | FullscreenReportWizardSectionId.ChooseJsonSchemaPage | ChooseJsonSchemaPage |
'Define Report Layout' Page
| Section | ID | Class |
|---|---|---|
| Select Queries | FullscreenReportWizardSectionId.SelectDataMembersPage_Members | SelectDataMembersPage |
| Select Data Fields | FullscreenReportWizardSectionId.SelectDataMembersPage_Fields | SelectDataMembersPage |
| Add Group Fields | FullscreenReportWizardSectionId.AddGroupFieldsPage | AddGroupFieldsPage |
| Add Summary Fields | FullscreenReportWizardSectionId.AddSummaryFieldsPage | AddSummaryFieldsPage |
'Specify Page Settings' Page
| Section | ID | Class |
|---|---|---|
| Page Settings and Color Scheme | FullscreenReportWizardSectionId.ConfigurePageSettingsPage | ConfigurePageSettingsPage |
| Specify Report Title | FullscreenReportWizardSectionId.SpecifyReportTitlePage | SpecifyReportTitlePage |
'Specify Page Settings' Page (Label)
| Section | ID | Class |
|---|---|---|
| Select Label Type | FullscreenReportWizardSectionId.SelectLabelTypePage | SelectLabelTypePage |
| Customize Label Parameters | FullscreenReportWizardSectionId.CustomizeLabelPage | CustomizeLabelPage |
The following table lists the Fullscreen Data Source Wizard’s pages, their IDs, and the corresponding classes:
The Specify Data Source Settings page contains the sections listed below depending on the selected data source type.
'Specify Data Source Settings' Page (Database)
| Section | ID | Class |
|---|---|---|
| Choose Data Connection | FullscreenDataSourceWizardSectionId.ChooseSqlConnectionPage | ChooseSqlConnectionPage |
| Choose Queries | FullscreenDataSourceWizardSectionId.ConfigureQueryPage | MultiQueryConfigurePage |
| Configure Master-Detail Relationships | FullscreenDataSourceWizardSectionId.ConfigureMasterDetailRelationshipsPage | ConfigureMasterDetailRelationshipsPage |
| Configure Query Parameters | FullscreenDataSourceWizardSectionId.ConfigureQueryParametersPage | MultiQueryConfigureParametersPage |
'Specify Data Source Settings' Page (JSON)
| Section | ID | Class |
|---|---|---|
| Specify JSON Data Connection | FullscreenDataSourceWizardSectionId.SpecifyJsonConnectionPage | SpecifyJsonConnectionPage |
| Choose JSON Source | FullscreenDataSourceWizardSectionId.ChooseJsonSourcePage | ChooseJsonSourcePage |
| Select Data Fields | FullscreenDataSourceWizardSectionId.ChooseJsonSchemaPage | ChooseJsonSchemaPage |
The following example demonstrates how to hide the Select Data Source page from the Report Wizard and enable users to create SQL data sources only:
<script type="text/javascript">
function beforeInit(args) {
args.state.dataSourceType = 1;
}
function afterInit(args) {
// Remove the "Select Data Source" page's metadata from the factory.
args.wizard.pageFactory.unregisterMetadata(DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SelectDataSourcePage);
// Override the navigation logic to skip the "Select Data Source" page.
var defaultGetNextPageId = args.wizard.iterator.getNextPageId;
args.wizard.iterator.getNextPageId = function (pageId) {
if (pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SelectReportTypePage) {
return DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SpecifySqlDataSourceSettingsPage;
} else {
return defaultGetNextPageId.apply(this, [pageId]);
}
}
}
function CustomizeWizard(s, e) {
if (e.Type === "ReportWizard") {
e.Wizard.events.addHandler("beforeInitialize", beforeInit)
e.Wizard.events.addHandler("afterInitialize", afterInit)
}
}
</script>
@Html.DevExpress().ReportDesigner(settings => {
settings.Name = "ReportDesigner";
settings.ClientSideEvents.CustomizeWizard = "CustomizeWizard";
// ...
}).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
The resulting Report Wizard:
The following example demonstrates how to hide the Select Data Source page’s section that displays available data sources:
<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>
@Html.DevExpress().ReportDesigner(settings => {
settings.Name = "ReportDesigner";
settings.ClientSideEvents.CustomizeWizard = "CustomizeWizard";
// ...
}).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
The resulting Select Data Source page:
The following example demonstrates how to remove the Empty Report and Label Report types:
<script type="text/javascript">
function beforePageInit(args) {
if(args.pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SelectReportTypePage) {
args.page.typeItems.splice(0, 1);
args.page.typeItems.pop();
}
}
function CustomizeWizard(s, e) {
if(e.Type === "ReportWizard") {
e.Wizard.events.addHandler("beforePageInitialize", beforePageInit)
}
}
</script>
@Html.DevExpress().ReportDesigner(settings => {
settings.Name = "ReportDesigner";
settings.ClientSideEvents.CustomizeWizard = "CustomizeWizard";
// ...
}).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
The resulting Select Report Type page:
<script type="text/javascript">
function beforeSectionInit(args) {
if(args.sectionId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ChooseDataSourceTypePage) {
args.section.typeItems.pop();
}
}
function beforePageInit(args) {
if(args.pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SelectDataSourcePage) {
args.page.events.addHandler("beforeSectionInitialize", beforeSectionInit);
}
}
function CustomizeWizard(s, e) {
if(e.Type === "ReportWizard") {
e.Wizard.events.addHandler("beforePageInitialize", beforePageInit)
}
}
</script>
@Html.DevExpress().ReportDesigner(settings => {
settings.Name = "ReportDesigner";
settings.ClientSideEvents.CustomizeWizard = "CustomizeWizard";
// ...
}).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
The resulting Select Data Source page:
<script type="text/javascript">
function beforeSectionInit(args) {
// Indetify the section that allows users to select available data sources.
if (args.sectionId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ChooseAvailableDataSourcePage) {
// Disable the capability to create new data sources (hide the radio group with a choice).
args.section.canCreateNew(false);
}
}
function beforePageInit(args) {
// Identify the "Select Data Source" page.
if(args.pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SelectDataSourcePage) {
// Remove the "Select the data source type" section.
args.page.unregisterSection(DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ChooseDataSourceTypePage);
// Make the remaining section occupy the entire page.
args.page.setSectionPosition(DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ChooseAvailableDataSourcePage);
// Handle the page's beforeSectionInitialize event.
args.page.events.addHandler("beforeSectionInitialize", beforeSectionInit)
// // Override the navigation logic to skip the removed section.
args.page.getNextPageId = function(pageId) {
if(!pageId) return DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.ChooseAvailableDataSourcePage;
}
}
}
function afterInit(args) {
// Remove the "Specify Data Source Settings (Database)" page's metadata from the factory.
args.wizard.pageFactory.unregisterMetadata(DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SpecifySqlDataSourceSettingsPage);
// Remove the "Specify Data Source Settings (JSON)" page's metadata from the factory.
args.wizard.pageFactory.unregisterMetadata(DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SpecifyJsonDataSourceSettingsPage);
// Override the navigation logic to skip the removed pages.
var defaultGetNextPageId = args.wizard.iterator.getNextPageId;
args.wizard.iterator.getNextPageId = function (pageId) {
if (pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.SelectDataSourcePage) {
return DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.DefineReportLayoutPage;
} else {
return defaultGetNextPageId.apply(this, [pageId]);
}
}
}
function CustomizeWizard(s, e) {
if(e.Type === "ReportWizard") {
e.Wizard.events.addHandler("afterInitialize", afterInit)
e.Wizard.events.addHandler("beforePageInitialize", beforePageInit)
}
}
</script>
@Html.DevExpress().ReportDesigner(settings => {
settings.Name = "ReportDesigner";
settings.ClientSideEvents.CustomizeWizard = "CustomizeWizard";
// ...
}).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
The resulting Report Wizard:
<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");
// Uncomment this line to remove all color schemes.
// 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>
@Html.DevExpress().ReportDesigner(settings => {
settings.Name = "ReportDesigner";
settings.ClientSideEvents.CustomizeWizard = "CustomizeWizard";
// ...
}).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
The resulting color scheme set:
The following example demonstrates how to select all data members and fields on the Define Report Layout page:
<script type="text/javascript">
function afterSectionInit(args) {
if (args.sectionId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardSectionId.SelectDataMembersPage_Members) {
args.section.selectAllDataFields();
// Uncomment these lines to select specific data fields.
//args.section.selectDataField("Categories.CategoryID")
//args.section.selectDataField("Categories.CategoryName")
// Uncomment this line to select the 'Products' table's fields.
//args.section.selectDataFields("Products")
}
}
function afterPageInit(args) {
if(args.pageId === DevExpress.Reporting.Designer.Wizard.FullscreenReportWizardPageId.DefineReportLayoutPage) {
args.page.events.addHandler("afterSectionInitialize", afterSectionInit);
}
}
function CustomizeWizard(s, e) {
if(e.Type === "ReportWizard") {
e.Wizard.events.addHandler("afterPageInitialize", afterPageInit)
}
}
</script>
@Html.DevExpress().ReportDesigner(settings => {
settings.Name = "ReportDesigner";
settings.ClientSideEvents.CustomizeWizard = "CustomizeWizard";
// ...
}).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
The Define Report Layout page’s initial state:
The following example demonstrates how to:
specify a custom report title if a user did not specify it;
update the resulting report’s name and display name based on the report title.
<script type="text/javascript">
function beforeFinish(s) {
if(!s.wizardModel.ReportTitle) {
s.wizardModel.ReportTitle = "My Report"
s.state.reportTitle = "My Report "
}
}
function afterFinish(s) {
s.wizardResult.name(s.state.reportTitle.replace(/ /g, ""))
s.wizardResult.displayName(s.state.reportTitle)
}
function CustomizeWizard(s, e) {
if(e.Type === "ReportWizard") {
e.Wizard.events.addHandler("beforeFinish", beforeFinish)
e.Wizard.events.addHandler("afterFinish", afterFinish)
}
}
</script>
@Html.DevExpress().ReportDesigner(settings => {
settings.Name = "ReportDesigner";
settings.ClientSideEvents.CustomizeWizard = "CustomizeWizard";
// ...
}).Bind(new DevExpress.XtraReports.UI.XtraReport()).GetHtml()
The resulting report:
The Report Wizard Customization API allows you to specify a custom template to generate a report, and make adjustments to the generated report (such as report branding, header/footer formatting, font settings) in the Report Wizard.
For this, you should register your own implementation of the ReportWizardCustomizationService class.
The CustomizeReportTypeList and CustomizeReportTypeListAsync methods allow you to add custom report types and remove existing report types from the Select Report Type wizard page, as the following image illustrates: