Using KendoDateTimePicker in the Angular Report Viewer
Environment
Product | Progress® Telerik® Reporting |
Project Type | Angular |
Report Viewer | Angular Report Viewer |
Description
This article describes how to use the KendoDateTimePicker as a custom parameter editor for the Angular Report Viewer.
This approach allows the selection of date and time for the DateTime
Report Parameters that do not have available values.
Solution
The kendoDateTimePicker widget is not included in the Kendo UI JavaScript distributed by Telerik Reporting through the
telerikReportViewer.kendo.min.js
file, orkendo.subset.2015.3.930.min.js
and older versions. For that reason, you will have to replace the Kendo UI subset with the full Kendo UI JavaScript e.g.kendo.all.min.js
.
-
In the initializaion of the report viewer,
{component}.html
, specify theparameterEditors
option.<tr-viewer #viewer1 *ngIf="visible" [containerStyle]="viewerContainerStyle" [serviceUrl]="'https://demos.telerik.com/reporting/api/reports/'" [reportSource]="{ report: 'Product Line Sales.trdx', parameters: {} }" [parameterEditors]="[{ match: match, createEditor: createEditor }]" > </tr-viewer>
-
Then in the
{component}.ts
implement thematch
andcreateEditor
functions. The visibility of the report viewer can be set totrue
oncekendo.all.min.js
is loaded:export class AppComponent implements OnInit { @ViewChild('viewer1', { static: false }) viewer: TelerikReportViewerComponent; public visible: boolean = false; ngOnInit(): void { this.loadScript("http://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js") this.visible = true; } match(parameter) { return parameter.type === "System.DateTime"; } createEditor (placeholder, options){ let input = document.createElement('input'); input.classList.add("trv-parameter-value"); //@ts-ignore $(placeholder).parent().append(input); let dateTimePicker; let valueChangedCallback = options.parameterChanged; let parameter; function onChange(e) { //@ts-ignore var date = $(input).data("kendoDateTimePickerPicker"); var val = date.value(); valueChangedCallback(parameter, val); } return { beginEdit: function (param) { parameter = param; //@ts-ignore $(input).kendoDateTimePicker({ value: param.value, format: "dd/MM/yyyy", change: onChange }); //@ts-ignore dateTimePicker = $(input).data("kendoDateTimePicker"); } }; } }