Posted 16 April 2025, 3:17 am EST - Updated 16 April 2025, 3:23 am EST
I tried to use a column Named Errors and put Action Type Jump to a url in that column property and i provided a url in that case, but what i actually want is if i can have a link click event or cell clicked event then i will be able to make the row data downloadable,
my whole idea is user should be able to download individual row data in json format file.
export class PublishRoutesComponent implements OnInit {
updateSourceReportTemplate: Core.Rdl.Report = report;
accountID: number | undefined;
routeType: string | undefined;
opsUnit: string | undefined;
startDate: string | undefined;
endDate: string | undefined;
public availableExports: string[] = availableExports; //ZRP-1658 use for the Rename the file before export
@ViewChild(ViewerComponent, { static: false }) ref: ViewerComponent = new ViewerComponent();
reportViewer: ReportViewer.Viewer | undefined;
exportsSettings: Record<string, ReportViewer.ExportSettings> = {
pdf: {
title: 'Zignex-Report',
author: 'Zignex',
subject: 'Update Source Report',
pdfVersion: '1.7',
autoPrint: false,
filename: 'Update-Source-Report-' + timeStamp
},
xlsx: {
creator: 'Zignex',
size: 'Letter',
orientation: 'Landscape',
sheetName: 'Page',
MultiSheet: false,
filename: 'Update-Source-Report-' + timeStamp
},
// eslint-disable-next-line @typescript-eslint/naming-convention
'tabular-data': {
outputType: 'plain',
filename: 'Update-Source-Report-' + timeStamp
// default value for other TabularData export settings
}
};
constructor(
public spinner: SpinnerService,
private _route: ActivatedRoute,
private _http: HttpService,
private _toast: HotToastService
) {}
ngOnInit(): void {
this._route.queryParams.subscribe((params: IZPRRRouteParams) => {
this.accountID = params['accountID'];
this.routeType = params['routeType'];
this.opsUnit = params['opsUnit'];
this.startDate = params['fromDate'];
this.endDate = params['toDate'];
});
this._http.setTitle(`Update Source`);
}
/**
* Initializes the report viewer and fetches report data based on provided parameters.
*
* This method performs the following steps:
* 1. Assigns the report viewer reference.
* 2. Checks if all required parameters (`accountID`, `opsUnit`, `routeType`, `startDate`, `endDate`) are present.
* - If parameters are valid:
* - Sends an HTTP GET request (`publishRoutesReport`) to fetch the report data.
* - Formats the `published_dtm` and `creation_dtm` fields for each data entry.
* - Updates the report template with the fetched data.
* - Configures and renders the report viewer.
* - If parameters are missing:
* - Clears the report template connection string.
* - Displays an error toast notification.
*
* @returns {Promise<void>}
*/
async onViewerInit(): Promise<void> {
this.reportViewer = this.ref.ref;
if (this.accountID && this.opsUnit && this.routeType && this.startDate && this.endDate) {
const params: (string | number)[] = [this.accountID, this.opsUnit, this.routeType, this.startDate, this.endDate];
this._http
.getRequest<IZPublishRoutesData[], null, { responseType: 'json' }>('publishRoutesReport', {
responseType: { responseType: 'json' },
requestParams: params
})
.subscribe({
next: (data: IZPublishRoutesData[]) => {
// data = sampleUpdateSource;
console.log('Publish Routes Report Data:', data);
sampleUpdateSource.map((e: IZPublishRoutesData) => {
e.linkName = '';
if (e.errors && toUpper(e.trans_st) === 'FAILED') {
e.url = this.downloadErrorJson(e);
e.linkName = 'View Error';
}
if (e.trans_st === 'Success') {
e.textColor = '#008000'; //Success green color
} else {
e.textColor = '#FF0000'; //Failed Red color
}
e.published_dtm = formatDate(new Date(e.published_dtm), 'yyyy-MM-dd HH:mm:ss', 'en-us');
e.creation_dtm = formatDate(new Date(e.creation_dtm), 'yyyy-MM-dd HH:mm:ss', 'en-us');
return e;
});
this.spinner.removeSpinner();
if (this.updateSourceReportTemplate?.DataSources) {
const routeDetailReportTemplate0: DataSource | undefined = this.updateSourceReportTemplate.DataSources[0];
if (routeDetailReportTemplate0?.ConnectionProperties)
routeDetailReportTemplate0.ConnectionProperties.ConnectString =
'jsondata=' + JSON.stringify(sampleUpdateSource);
} else {
// Handle the case where updateSourceReportTemplate is a string or undefined
console.error('updateSourceReportTemplate is not a valid report template');
}
if (this.reportViewer) {
this.reportViewer.renderMode = 'Paginated';
this.reportViewer.viewMode = 'SinglePage';
this.reportViewer.zoom = 'FitToWidth';
this.reportViewer.toolbar.updateLayout({
default: [
'$openDesigner',
'$split',
'$navigation',
'$split',
'$refresh',
'$split',
'$history',
'$split',
'$zoom',
'$fullscreen',
'$split',
'$print',
'$split'
// "$galleymode",
]
});
if (this.updateSourceReportTemplate)
this.reportViewer.open(this.updateSourceReportTemplate).catch((err: Error) => {
console.error(err);
});
}
},
error: (error: Error) => {
console.error(error);
this.spinner.removeSpinner();
}
});
} else {
if (this.updateSourceReportTemplate?.DataSources) {
const routeDetailReportTemplate0: DataSource | undefined = this.updateSourceReportTemplate.DataSources[0];
if (routeDetailReportTemplate0?.ConnectionProperties)
routeDetailReportTemplate0.ConnectionProperties.ConnectString = '';
}
this._toast.error(this._http.reqParamsError);
}
}
downloadErrorJson(errorData: IZPublishRoutesData): string {
const blob: Blob = new Blob([JSON.stringify(errorData, null, 2)], {
type: 'application/json'
});
return URL.createObjectURL(blob);
// const url: string = URL.createObjectURL(blob);
// const a: HTMLAnchorElement = document.createElement('a');
// a.href = url;
// a.download = `${fileName}.json`;
// document.body.appendChild(a);
// a.click();
// // Cleanup
// document.body.removeChild(a);
// URL.revokeObjectURL(url);
}
}in this you might can see that for download i will require a click event or somehow i can add html to the rows, or else so that i can download it
Please provide me any solution what i can do in that case
