Pure JavaScript Integration

Let us create an ASP.NET Core application using ActiveReports and render the reports in the Web Designer.

To use npm packages, your project must contain a package.json file. Open the Tools menu > NuGet Package Manager and run the following command in the Package Manager before installing any code dependencies:

npm init -y
Next, run the following command in the Package Manager Console, to download and install the Web Designer-related files and folders from NPM
npm install @grapecity/ar-designer
The designer files/folders will be downloaded in your current directory: .\node_modules\@grapecity\ar-designer\dist
Copy the following designer files/folder and paste it to your sample project wwwroot subfolder. If you don't see the 'wwwroot' folder, create the folder with the same name.
- web-designer.css
- web-designer.js
- vendor folder
In Solution Explorer, right-click 'wwwroot' folder and select Add > New Item.
Select HTML Page item type, input index.html and click Add.

In Solution Explorer, find newly-added index.html and modify its content as follows:

index.html	Copy Code
<!DOCTYPE html> <html> <head> <title>Web Designer Sample</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- No Virtual Directory --> <base href="/"> <!-- designer-related css --> <link rel="stylesheet" href="vendor/css/bootstrap.min.css" /> <link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css"> <link rel="stylesheet" href="web-designer.css" /> </head> <body> <!-- designer-related js --> <script src="web-designer.js"></script> <!-- designer root div --> <div id="designer-id" style="width: 100%; height: 100%;"></div> <script> // create designer options var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(); /* Optional: Save Report / designerOptions.saveButton.visible = true; / Optional: Save Report As / designerOptions.saveAsButton.visible = true; / Optional: Open Report / designerOptions.openButton.visible = true; / Optional: Add/Edit/Remove Data Sets / designerOptions.dataTab.dataSets.canModify = true; / Optional: Add/Edit/Remove Data Sources */ designerOptions.dataTab.dataSources.canModify = true; // render designer application GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions); </script> </body> </html>

index.html

Copy Code

<!DOCTYPE html>
<html>
<head>
    <title>Web Designer Sample</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- No Virtual Directory -->
    <base href="/">
    <!-- designer-related css -->
    <link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
    <link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
    <link rel="stylesheet" href="web-designer.css" />
</head>
<body>
    <!-- designer-related js -->
    <script src="web-designer.js"></script>
    <!-- designer root div -->
    <div id="designer-id" style="width: 100%; height: 100%;"></div>
    <script>
    // create designer options
    var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions();
 
    /* Optional: Save Report */
    designerOptions.saveButton.visible = true;
 
    /* Optional: Save Report As */
    designerOptions.saveAsButton.visible = true;
 
    /* Optional: Open Report */
    designerOptions.openButton.visible = true;

    /* Optional: Add/Edit/Remove Data Sets */
     designerOptions.dataTab.dataSets.canModify = true;
             
    /* Optional: Add/Edit/Remove Data Sources */
    designerOptions.dataTab.dataSources.canModify = true;
 
    // render designer application
    GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
    </script>
</body>
</html>

Build your solution (Build> Build Solution) and run it. Web Designer with a blank RDL report opens in your browser.