Need to display the Grid row data using report viewer ~ From 179987

[Charles]

Hi Pavithra,

1. I have read through many documentations about bold reports in which l have replicated what l found on this link https://www.boldreports.com/blog/create-report-viewer-component-in-angular-app-with-aspnet-core . See Sample file attached below. So when l click on print button (on any grid row) it should display the report view for that row.  
   
2. Also In the Sample the bold report css reference is affecting the appearance of other component controls. Grid and sidebar buttons are not displaying correctly but as soon as l remove every line of codes pertaining to bold report these controls display well. Kindly assist
   

Regards

Charles

[Arumugasami Murugesan]

Hi Charles,

Thanks for contacting Bold Reports support.

Please find the details in the below table

Query	Response
I have read through many documentations about bold reports in which l have replicated what l found on this link https://www.boldreports.com/blog/create-report-viewer-component-in-angular-app-with-aspnet-core . See Sample file attached below. So when l click on print button (on any grid row) it should display the report view for that row.	Yes, we can display the grid row data using the Bold Reports Report Viewer. You have to use an RDLC report for this requirement and set the processing mode to Local. Please refer to the below documentation for your reference.   https://help.boldreports.com/embedded-reporting/angular-reporting/report-viewer/rdlc-report/ https://help.boldreports.com/embedded-reporting/javascript-reporting/report-viewer/rdlc-report/
Also In the Sample the bold report css reference is affecting the appearance of other component controls. Grid and sidebar buttons are not displaying correctly but as soon as l remove every line of codes pertaining to bold report these controls display well. Kindly assist	While using the Bold Reports styles with ej2 you have refer the compatibility scripts in “angular.json” file in the angular application. Please refer the below code snippet and snap for your reference. Can you add the below compatibility scripts in your “angular.json” file and check the issue? ./node_modules/@syncfusion/ej2/styles/compatibility/material.css, ./node_modules/@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.compatibility.min.css   SNAP:

Regards,
Arumugasami M

[Charles]

Hi Arumugasami,

The links you had provided is in ASP.NET and it didn't explain any where on how to pass grid selected row to report viewer. My project is in angular with ASP.NET core. I'll appreciate it if you can provide a sample on how to display selected grid row to report viewer using angular as client side.

Regards

Charles

[Arumugasami Murugesan]

Charles,

We have prepared and attached a sample application in ASP.NET Core with Angular to display the selected grid row in the report viewer. Please refer to the snapshot below for your reference.

Attachment: Sample_e288d4d0.zip

[Charles]

Hi  Arumugasami,

Thank you for the solution as it works with local data. Now, I'm trying to work with data from database to report viewer but no success. Kindly assist.

#ReportViewer

public object PostReportAction([FromBody] Dictionary<string, object> jsonResult)

        {

            jsonArray = jsonResult;

            if (jsonArray != null)

            {

                if (jsonArray.ContainsKey("customData"))

                {

                    //Get client side custom data and store in local variable.

                    var CustomerId = jsonResult["customData"].ToString();

                }

            }

            return ReportHelper.ProcessReport(jsonResult, this, this._cache);

        }

        // Method will be called to initialize the report information to load the report with ReportHelper for processing.

        public void OnInitReportOptions(ReportViewerOptions reportOption)

        {

            string basePath = _hostingEnvironment.WebRootPath;

            reportOption.ReportModel.ProcessingMode = ProcessingMode.Local;

            FileStream inputStream = new FileStream(basePath + @"\Resources\Customer.rdl", FileMode.Open, FileAccess.Read);

            MemoryStream reportStream = new MemoryStream();

            inputStream.CopyTo(reportStream);

            reportStream.Position = 0;

            inputStream.Close();

            reportOption.ReportModel.Stream = reportStream;

            reportOption.ReportModel.DataSources.Add(new BoldReports.Web.ReportDataSource { Name = "DataSet1", Value = "customer" });

        }

#Web API

using Microsoft.AspNetCore.Http;

using Microsoft.AspNetCore.Mvc;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using JapsPROBHF.Models;

namespace JapsPROBHF.Controllers

{

    [Route("api/[controller]")]

    [ApiController]

    public class customerAPIController : ControllerBase

    {

        private bhfdbContext _context;

        public customerAPIController(bhfdbContext context)

        {

            _context = context;

        }

        [HttpGet]

        public object Get()

        {

            return new { Items = _context.Customer, Count = _context.Customer.Count() };

        }

    }

}

#Class

public partial class Customer

    {

        public int CustomerId { get; set; }

        public string CustomerName { get; set; }

        public string Company { get; set; }

        public string Address { get; set; }

        public string State { get; set; }

        public string Phone { get; set; }

        public string Email { get; set; }

    }

Regards

Charles

[Susmitha Murugesan]

Charles,

If you are using RDL report processing, you not need to bind the dataset. Please refer to the below documentation for your reference.

https://help.boldreports.com/embedded-reporting/aspnet-core-reporting/report-viewer/display-ssrs-rdl-report-in-asp-net-core-application/

https://help.boldreports.com/embedded-reporting/angular-reporting/report-viewer/display-ssrs-rdl-report-in-angular-application/

If you are using the WEBAPI data source report in your Bold Reports Viewer application, you need to install the BoldReports.Data.WebData and BoldReports.Data.Csv NuGet packages, as shown in the snapshot below. You also need to register the custom report item extension in the application startup, as shown in the code snippet below. We have prepared a sample application in ASP.NET Core for your reference and have attached it.

using BoldReports.Web;

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

{

     //Use the below code to register extensions assembly into report designer

      ReportConfig.DefaultSettings = new ReportSettings().RegisterExtensions(new List<string> { "BoldReports.Data.WebData", "BoldReports.Data.Csv" });

}

Attachment: ASP.NET_Core_Report_Viewer_f06100c3.zip

[Charles]

Hi Susmitha,

Thank you for the solution. I have a hierarchy grid (parent and child) which l tried to apply the above sample scenario for this project but was not successful.  kindly assist. see my codes below.

Component.ts

import { Component, OnInit, Inject, ViewChild } from '@angular/core';

import { DataManager, Query, WebApiAdaptor, UrlAdaptor, ODataV4Adaptor } from '@syncfusion/ej2-data';

import { AddEventArgs, CommandModel, EditSettingsModel, GridComponent, GridModel, IEditCell, ToolbarItems } from '@syncfusion/ej2-angular-grids';

import { DialogComponent, PositionDataModel } from '@syncfusion/ej2-angular-popups';

@Component({

selector: 'app-invoice-list',

templateUrl: './invoice-list.component.html',

styleUrls: ['./invoice-list.component.css']

})

export class InvoiceListComponent implements OnInit {

title = 'Reportviewer';

public serviceUrl: string;

public reportPath: string;

public reportData: any;

public processingMode: string;

public toolbarSettings: any;

public data1: DataManager;

public commands: CommandModel[];

@ViewChild('confirmDialog',{static:false})

public confirmDialog: DialogComponent;

public confirmHeader: string = 'Bold Report Viewer';

public confirmCloseIcon: Boolean = true;

public animationSettings: Object = { effect: 'None' };

public target: string = '.control-section';

public confirmDlgButtons: Object[] = [{ click: this.onClick.bind(this), buttonModel: { content: 'Cancel', isPrimary: true } }];

public editSettings: EditSettingsModel;

public toolbar: ToolbarItems[] | Object;

public pageSettings: Object;

@ViewChild('gridhiera', { static: false })

public gridhiera: GridComponent;

public dataManager: DataManager = new DataManager({

url: 'api/Invoice1',

adaptor: new WebApiAdaptor()

});

public ddlfields: Object = { text: 'type', value: 'Id' };

public data: any;

public key: string = null;

public childGrid: GridModel = {

dataSource: new DataManager(

{

url: 'api/Invoice1',

adaptor: new WebApiAdaptor() },

new Query().take(100)

),

queryString: 'InvoiceNo',

width:'1100px',

columns: [

{ field: 'Id', headerText: 'ID', isPrimaryKey: true, visible :false, width: 60 },

{ field: 'InvoiceNo', headerText: 'InvoiceNo', visible :false, width: 60 },

{ field: 'Item', headerText: 'Item detail', width: 70 },

{ field: 'UnitPrice', headerText: 'UnitPrice', width: 50, textAlign: 'Center', format:'N2' },

],aggregates: [{

columns: [{

type: 'Sum',

field: 'Amount',

format: 'N2',

footerTemplate: 'Total: ${Sum}'

}]

}],

actionBegin(args: AddEventArgs) {

if (args.requestType === 'add') {

const InvoiceNo = 'InvoiceNo';

(args.data as object)[InvoiceNo] = this.parentDetails.parentKeyFieldValue;

}

}

};

ngOnInit(): void {

this.data = this.dataManager;

this.pageSettings = { pageSize: 10 };

this.commands = [

{

title: 'Print',

buttonOption: {

cssClass: 'e-flat',

iconCss: 'e-icons e-print',

click: this.onClick.bind(this),

},

},

];

}

onClick(e: any) {

this.confirmDialog.hide();

}

commandClick(args) {

this.confirmDialog.show(true);

console.log(args.rowData);

this.serviceUrl = 'api/ReportViewer';

this.reportPath = 'Invoicebhf.rdl';

this.processingMode = "Local";

this.reportData = [{

value: [

{ InvoiceNo: args.rowData.InvoiceNo, CustomerName: args.rowData.CustomerName, Company: args.rowData.Company, Item: args.rowData.Item,

UnitPrice: args.rowData.UnitPrice, Email:args.rowData.Email},

],

name: 'DataSet1'

}];

}

}

 

html

<div class="control-section">

<ejs-grid #gridhiera [dataSource]=' data' id="gridhiera" [childGrid]='childGrid' (commandClick)="commandClick($event)"

>

<e-columns>

<e-column field='InvoiceNo' headerText='Invoice#' isPrimaryKey='true' width='150'> e-column>

<e-column field="CustomerName" headerText="Customer" width="180"> e-column>

<e-column field='Company' headerText='Company' width='160'> e-column>

<e-column headerText="Actions" width="100" [commands]="commands">

<div class=”control-section”>

<ejs-dialog #confirmDialog [buttons]='confirmDlgButtons' [visible]='false' [header]='confirmHeader'[animationSettings]='animationSettings' [showCloseIcon]='confirmCloseIcon' [target]='target'>

<ng-template #content>

<bold-reportviewer id="reportViewer" [dataSources] = "reportData" [processingMode] = "processingMode"style="width: 100%;height: 950px"

[reportServiceUrl]="serviceUrl" [reportPath]="reportPath">

bold-reportviewer>

ng-template>

ejs-dialog>

div>

e-column>

e-columns>

ejs-grid>

div>

Bold report

SELECT [dbo].[Invoice1].[InvoiceNo],

[dbo].[Invoice1].[CustomerName],

[dbo].[Invoice1].[Company],

[dbo].[Invoice2].[InvoiceNo] AS [Invoice2_InvoiceNo],

[dbo].[Invoice2].[Item],

[dbo].[Invoice2].[UnitPrice],

[dbo].[Invoice2].[Amount] FROM [dbo].[Invoice1] INNER JOIN [dbo].[Invoice2] ON [dbo].[Invoice1].[InvoiceNo]=[dbo].[Invoice2].[InvoiceNo]

Regards

Charles

[Arumugasami Murugesan]

Charles,

We have checked the reported issue. In that shared snap, you have used the processing mode as local. Could you please confirm whether you are using the RDL or RDLC report. If you are using the RDL report, you need to use the set the local processing mode as remote as shown in the below code snippet.

constructor() {

        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';

        this.reportPath = 'AreaCharts.rdl';

        this.processingMode = "Remote";

         }

If you still facing the issue, is it possible to share your issue reproducible sample with us? It will be helpful for us to validate and provide the solution at the earliest. If this is not possible, please share additional details of the issue along with a snapshot of the issue with us to validate further.

[Charles]

Hi,

Like l said in my last post, I'm using hierarchy grid (parent and child grid) to display selected row in my report viewer, but it's showing blank report viewer page. Whenever l try it with a single grid is display fine in my report viewer. I don't know how to accomplish this with hierarchy grid. See sample project attached that l have tried. Kindly assist.

Regards

Charles

Attachment: Sample_Report_viewer_dd7616ad.zip

[Arumugasami Murugesan]

Charles,

Sorry for the delay,

We have prepared and attached a sample application in ASP.NET Core with Angular to display a hierarchy grid (parent and child grid) and to display the selected grid row in the report viewer. Please refer to the snapshot below for your reference.

Attachment: Modified_sample_4bd7de61.zip

[Charles]

Hi Arumugasami,

Thank you for your response. My requirement to to make use of herarchy grid with two different tables from the database. The main problem is that the child grid is not displaying its data in the report viewer. It only display the parent row data while the child part on the report viewer is blank. In my report designer I linked the InvoiceNo of parent grid (sales1 table) to InvoiceId of child grid (sales2 table) so that when l click on any row on the parent grid it should display the data for both parent and its binded child on the report viewer. See snap shot and codes that l have tried below. Kindly assist

`/// `

import { Component, OnInit, ViewChild } from '@angular/core';

import { EditService, CommandColumn, ToolbarService, PageService, parentsUntil, CommandColumnService, CommandModel, DetailRowService, GridModel, GridComponent, AddEventArgs } from '@syncfusion/ej2-angular-grids';

import { employeeData } from '../data';

import { DataManager, Query, WebApiAdaptor, UrlAdaptor, ODataV4Adaptor } from '@syncfusion/ej2-data';

import { DialogComponent, PositionDataModel } from '@syncfusion/ej2-angular-popups';

@Component({

selector: 'app-fetch-data',

templateUrl: './fetch-data.component.html',

providers: [ToolbarService, EditService, PageService, CommandColumnService, DetailRowService]

})

export class FetchDataComponent {

public childGrid: GridModel;

title = 'Reportviewer';

public serviceUrl: string;

public reportPath: string;

public reportData: any;

public processingMode: string;

public commands: CommandModel[];

public data: DataManager;

@ViewChild('grid', {static:false})

public grid: GridComponent;

public childData: any;

@ViewChild('confirmDialog', {static:false})

public confirmDialog: DialogComponent;

public confirmHeader: string = 'Bold Report Viewer';

public confirmCloseIcon: Boolean = true;

public animationSettings: Object = { effect: 'None' };

public target: string = '.control-section';

public confirmDlgButtons: Object[] = [{ click: this.onCancelClick.bind(this), buttonModel: { content: 'Cancel', isPrimary: true } }];

public dataManager: DataManager = new DataManager({

url: 'sales1/UrlDatasource',

adaptor: new UrlAdaptor()

});

public ngOnInit(): void {

this.data = this.dataManager;

this.childGrid = {

dataSource: new DataManager(

{

url: 'sales2/UrlDatasource',

adaptor: new UrlAdaptor() },

new Query().take(100)

),

queryString: 'InvoiceNo',

width:'1100px',

columns: [

{ field: 'Id', headerText: 'ID', isPrimaryKey: true, visible :false, width: 60 },

{ field: 'InvoiceId', headerText: 'Invoice ID', visible :false, width: 60 },

{ field: 'Name', headerText: 'Item detail', width: 70 },

{ field: 'UnitPrice', headerText: 'UnitPrice', width: 50, textAlign: 'Center', format:'N2' },

{ field: 'Amount', headerText: 'Amount', width: 50, textAlign: 'Center', format:'N2'},],

aggregates: [{columns: [{type: 'Sum', field: 'Amount', format: 'N2', footerTemplate: 'Total: ${Sum}'}]

}],

};

this.commands = [

{

title: 'Print',

buttonOption: {

cssClass: 'e-flat',

iconCss: 'e-icons e-print',

click: this.onClick.bind(this),

},

},

];

}

onClick(e: any) {

this.confirmDialog.show();

}

onCancelClick(e: any) {

this.confirmDialog.hide();

}

commandClick(args) {

this.confirmDialog.show(true);

console.log(args.rowData);

this.serviceUrl = '/api/ReportViewer';

this.reportPath = 'Invoice.rdl';

this.processingMode = "Local";

this.reportData = [{

value: [

{ Id: args.rowData.Id, InvoiceNo: args.rowData.InvoiceNo, CustomerName: args.rowData.CustomerName,

Name: args.rowData.Name, UnitPrice: args.rowData.UnitPrice, Amount: args.rowData.Amount,}

],

name: 'DataSet1'

}];

}

}

<div class="control-section">

<ejs-grid #grid [dataSource]='data'[childGrid]="childGrid" (commandClick)="commandClick($event)">

<e-columns>

<e-column field='InvoiceNo' headerText='Invoice#' isPrimaryKey='true' width='150'> e-column>

<e-column field="CustomerName" headerText="Customer" width="180"> e-column>

<e-column field="Company" headerText="Company" width="180"> e-column>

<e-column headerText="Actions" width="100" [commands]="commands">

<div class=”control-section”>

<ejs-dialog #confirmDialog [buttons]='confirmDlgButtons' [visible]='false' [header]='confirmHeader'[animationSettings]='animationSettings' [showCloseIcon]='confirmCloseIcon' [target]='target'>

<ng-template #content>

<bold-reportviewer id="reportViewer" [dataSources] = "reportData" [processingMode] = "processingMode"style="width: 100%;height: 950px"

[reportServiceUrl]="serviceUrl" [reportPath]="reportPath">

bold-reportviewer>

ng-template>

ejs-dialog>

div>

e-column>

e-columns>

ejs-grid>

div>

<style>

.control-section {

height: 100%;

min-height: 350px;

}

style>

Regards

Charles

[Arumugasami Murugesan]

Charles,

We have created a support ticket for this issue by using the below link. We will update the further details in the created ticket. If you face any other issues, we suggest you open a new ticket using your account.

https://support.boldreports.com/create