Kendo JS UI control, import from web page to Teperik report

[Andrey]

Hi,
I have a web page that is using several Kendo UI controls (charts, lists) in MVC 5 project. The code example is below.
Now I have to create a Telerik report to display all of them in PDF. I've found that there is no a simple conversion from Kendo js UIs to report.
My question is, what is the better way to have/convert the existing Kendo js UIs into Telerik report?
Thanks.

                        <script>
                            function createChartOtmPerf() {
                                $("#chartOTMPerf").kendoChart({
                                    dataSource: {
                                        data: otmBenchmarkData
                                    },
                                    chartArea: {
                                        margin: {
                                            top: -50,
                                            bottom: 0,
                                            left: 0,
                                            right: 0
                                        },
                                        padding: 0
                                        //background: "beige"
                                    },
                                    seriesDefaults: {
                                        type: "area",
                                        stack: true,
                                        missingValues: "gap"
                                    },
                                    series: [
                                        {
                                            type: "line",
                                            missingValues: "gap",
                                            field: "Vlu",
                                            color: "black",
                                            markers: {
                                                visible: false
                                            },
                                            tooltip: {
                                                visible: true,
                                                template: "#= dataItem.DtTxt # - #= kendo.format('{0:C0}',dataItem.CurrentValue)  #"
                                            },
                                            stack: false
                                        },
                                        {
                                            type: "line",
                                            field: "TopLine",
                                            color: "black",
                                            width: 0.1,
                                            markers: {
                                                visible: false
                                            },
                                        },
                                        {
                                            field: "Band5",
                                            color: "red",
                                            tooltip: {
                                            }
                                        },
                                        {
                                            field: "Band6",
                                            color: "yellow",
                                            tooltip: {
                                            }
                                        }, {
                                            field: "Band7",
                                            color: "green",
                                            tooltip: {
                                            }
                                        }, {
                                            field: "Band8",
                                            color: "blue",
                                            tooltip: {
                                                visible: false
                                            }
                                        }
                                    ],
                                    valueAxis: {
                                        labels: {
                                            visible: false
                                        },
                                        line: {
                                            visible: true
                                        },
                                        majorGridLines: {
                                            visible: false
                                        },
                                        axisCrossingValue: -8
                                    },
                                    dataBound: onDB,
                                    categoryAxis: {
                                        field: "Yr",
                                        majorGridLines: {
                                            visible: false
                                        },
                                        majorTicks: {
                                            visible: false
                                        },
                                        labels: {
                                            visible: true,
                                            rotation: 315,
                                            step: 12
                                        },
                                        line: {
                                            visible: true
                                        }
                                    }
                                });
                                function onDB(e) {
                                    e.sender.options.categoryAxis.labels.skip = labelSkip;
                                }
                            }
                        </script>

[Mads]

Hi Andrey,

As you mention there is no simple way of directly converting Kendo UIs to reports. But hopefully, we can find some solutions to achieve the same result. I will list some ideas which I believe could work in this scenario.

Looking through the Kendo UI Chart control, it has the ability to export the chart to different formats, one of them being images. One approach to achieving the desired result could be to export the controls as images and implementing them into the report. More information about exporting Kendo UI charts can be found in the "Export" article. You mention there are several UI controls you want to be converted, so an idea could be to export them as images, then create a report that takes in a JSON data-source with the Base64-encoding of the images, or URIs of the images, and displays them in PictureBoxes. 

Another approach could be to use the data supplied to each control, in this scenario with the script provided the otmBenchmarkData, and supply that directly to the report. In this case, the report would have to be designed to take in that data and create similar elements from the Kendo UI, like a Graph-chart in the reporting software. This would require creating/designing elements for each data-source. Multiple data-sources components can be attached to one report and then each of them set to different data-items, e.g. charts, lists, and tables.

The final idea I have to solve this is to create a bit more custom solution which is demonstrated in this demo "Reporting Integration / Drill-Down Grid Report". In this demo, the data is read from the UI control using JQuery and supplied with the request to the Reporting REST Service. Then custom functionality is implemented in the controller of the REST Service to handle this request and convert the supplied data into a data-source the report can utilize. The code for this implementation is available in the "View Source" tab of the demo. In this demo, the report is already created and configured based on the design of the data, which makes this approach similar to the one above.

The custom handling of report-requests in this last approach could also program the entire report definition based on the JS object passed to the kendoChart in the .kendoChart method. Though this solution would require a lot of code to convert the Kendo object/properties into Reporting elements, but would also remove the need to pre-make reports based on each UI control.

If the goal is to only create PDFs of several different charts/lists and so on, ReportProcessor can be used directly to render PDFs, avoiding the need for the REST Service.

I hope I have provided some ideas on how to solve this challenge. If you want, let me know which approach sounds the most interesting and I can try explaining ideas for implementation further. I hope to hear from you.

Regards, Mads Progress Telerik

[Andrey]

Mads,

Thanks for detailed answer!