devexpress-examples/reporting_web-report-designer-how-to-add-edit-remove-datasourses-in-the-web-report-designer-t196136

.NET, ASP.NET Web Forms, XtraReports Suite

Reporting for Web Forms - Report Data Source Editor (up to v15.1)

Important: This example is relevant for versions prior to 15.1. Current versions provide a built-in Data Source Wizard in the designer's menu. Review the Register Data Connections and Register Data Sources topics for more information on how to add data sources to the built-in Wizard.

Overview

This example demonstrates how you can modify the list of DataSources that is passed to the ASPxReportDesigner on the fly.

To run the DataSource wizard, open the ASPxReportDesigner menu and click Run Report DataSource Editor:

The Report Data Source Editor is displayed:

This form displays the list of data sources. Select a data source and the list box on the right shows its queries. You can add, edit and remove data sources and queries.

Click the Apply button to post the data sources to the server. In case of any exception, an error message is displayed. The data sources are available in the Report Designer.

To add data sources, click the + (plus) button in the Field List:

Implementation Details

The main idea of this approach is to use the ASPxReportDesigner.DataSources property to pass the set of DataSources to ASPxReportDesigner. To update the set of DataSources passed to the designer dynamically, the ASPxReportDesinger control is placed in the ASPxCallbackPanel control. The callbacks are used to update the ASPxReportDesigner. 

The designer's DataSource list is populated on the server dynamically with the CustomQueryWizardModel class. This class is converted to JSON format and passed to the client in the CustomJSProperties event handler (review the How to Access Server Data on the Client Side topic for more information).

When the Wizard popup form opens, JSON data passed to the client is converted to the JavaScript object and used to populate a Wizard form. This object is used to edit the data source collection on the client side.

When the user clicks the Apply button, the modified CustomQueryWizardModel object is converted to JSON and passed back to the server as a callback parameter. The server-side ASPxCallbackPanel.Callback event handler restores the CustomQueryWizardModel class and updates the data source collection.

To save the report layout, the client-side ASPxClientReportDesigner.PerformCallback method triggers a callback and raises the server-side ASPxReportDesigner.SaveReportLayout event that saves the report layout to Session. Subsequently the ASPxCallbackPanel callback is triggered, and the saved report layout is restored from the Session in the ASPxReportDesigner.Init event handler.

When the user clicks the Save button, the ASPxCallback control sends a non-visual callback to the server to validate the data source or query. The data source and query instances are created. If any errors occur, the error message is sent back to the client. The client-side ASPxClientCallback.CallbackComplete event handler analyzes data that is sent back to the client and displays an error message.

Files to Look At

• CustomQueryWizardClasses.cs (VB: CustomQueryWizardClasses.vb)
• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)
• DataSourceFormEventHandlers.js (VB: DataSourceFormEventHandlers.js)
• HelperMethods.js (VB: HelperMethods.js)
• QueryFormEventHandlers.js (VB: QueryFormEventHandlers.js)
• WizardFormEventHandlers.js (VB: WizardFormEventHandlers.js)

Documentation

• Data Source Wizard