How to Edit .NET Reports with the ActiveReports ProDesigner (Video)

ActiveReports continues to offer a complete desktop-based reporting experience to end-users. With the introduction of the ActiveReports ProDesigner, we have extended our report design capabilities to the web. The ActiveReports ProDesigner is available for both web and WinForms applications. With flexible data-binding in this .NET Web Designer, you can create new reports with the designer’s drag-and-drop interface. The HTML5-based Web Designer allows you to give the power of ad hoc reporting to your end-users. Your users can view, create, and edit reports all in a single application. You can easily embed the ProDesigner in your website or application with just a few lines of code.

In another article, we discuss how to embed the ActiveReports ProDesigner for Web in an ASP.NET app.

Here, we'll show you how to open a report in ProDesigner to edit, update, and save the changes using the web-based portal (using a Finance company as an example).

Open and Edit a .NET Report using the ActiveReports ProDesigner

To open a report for editing in the ProDesigner, you will need the following:

1. Define the report's location in project middleware, here Startup.cs

public class Startup
 {
private static readonly DirectoryInfo ResourcesRootDirectory = new DirectoryInfo(String.Format(@"{0}.\resources\", HttpRuntime.AppDomainAppPath));

public void Configuration(IAppBuilder app) {
app.UseDesigner(config =>  config.UseFileStore(ResourcesRootDirectory));
}
 }

2. Provide the report information to the "designerOptions" API of the ProDesigner on the view page, here Index.cshtml

<script>     
var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi); 

    designerOptions.reportInfo = 'Myreport.rdlx";
   GrapeCity.ActiveReports.WebDesigner.renderApplication('designerId', designerOptions);
</script>

Saving the Changes to a .NET Report using the ProDesigner

To save the changes in the report using the ProDesigner, you'll need to define a function for the designerOptions.onSave method on the view page. The function should call the "saveReport" API providing the report ID or name (to the save the definition).

<script>
    designerOptions.onSave = function onSAve(options) {
            GrapeCity.ActiveReports.WebDesigner.api.saveReport({
                reportInfo: {
                    id: options.reportInfo.id,
                    name: options.reportInfo.name,
                },
            });;
    });
<script>

That’s all you need to edit the report and then save the changes using the ActiveReports ProDesigner. If you have any questions, please leave them in the comment thread below.

Download Sample

Happy coding!