New to Telerik Reporting? Download free 30-day trial

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, or kendo.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.

  1. In the initializaion of the report viewer,{component}.html, specify the parameterEditors 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>
    
  2. Then in the {component}.ts implement the match and createEditor functions. The visibility of the report viewer can be set to true once kendo.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");
                }
            };
        }
    }
    

See Also

In this article