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 in Angular Report Viewer. This approach allows the selection of date and time for the DateTime report parameters.
Solution
Telerik kendoDateTimePicker widget is not included in the Kendo UI JavaScript distributed by Telerik Reporting through telerikReportViewer.kendo-x.x.x.min.js file, or kendo.subset.2015.3.930.min.js in 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.
Also, you need to make sure that Kendo all is loaded after jQuery. Because of that, we will use a special logic that sets the visibility of the viewer after Kendo all is loaded:
-
In the initializaion of the viewer, specify the parameterEditors option.
<tr-viewer #viewer1 *ngIf="visible" [containerStyle]="viewerContainerStyle" [serviceUrl]="'http://localhost:59654/api/reports/'" [reportSource]="{ report: 'MyReport.trdp', parameters: {} }" [parameterEditors]="[{ match: match, createEditor: createEditor }]" </tr-viewer>
-
Then in the app.component.ts implement the createEditor function. You see that we set the visibility of the viewer to True once
kendo.all.min.js
is loaded:export class AppComponent implements OnInit { @ViewChild('viewer1', { static: false }) viewer: TelerikReportViewerComponent; private visible: boolean = false; ... ngOnInit() { this.loadScript("http://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js") .then(() => { this.visible = true; }); } ... match(parameter) { return parameter.type === "System.DateTime"; } createEditor (placeholder, options){ var dateTimePicker = $(placeholder).html('<input type="datetime"/>'), parameter, valueChangedCallback = options.parameterChanged, dropDownList; function onChange() { var val = dropDownList.value(); valueChangedCallback(parameter, val); } return { beginEdit: function (param) { parameter = param; $(dateTimePicker).find("input").kendoDateTimePicker({ dataTextField: "name", dataValueField: "value", value: parameter.value, dataSource: parameter.availableValues, change: onChange }); dropDownList = $(dateTimePicker).find("input").data("kendoDateTimePicker"); } }; } }