Kendo Ui single javascript list

[Paolo]

Kendo ui examples on telerik sites often include kendo.all.min.js.

Is there a list of files to include instead on all.min.js when you use only some widgets?

Kendo.all.min.js is a large file of 700kB, and it makes no sense to download it every time you display a page.

For a page using charts I tried to use kendo.dataviz.chart.min.js but I got an error KendoChart is not a function.

Any lists of the single files to include?

I see js in the framework have semantic names, but since I got errors I need explanations about how to use them.

Thanks

 

Paolo

[Paolo]

I have found the list:

http://docs.telerik.com/kendo-ui/intro/supporting/scripts-dataviz

Paolo

[Paolo]

Using only needed scripts I had a visible improvement in the performance of my test application.

[Paolo]

I have removed kendo.all.min.js and included all the scripts in the list for the widget I use, but now I get two errors:

1. Without .all.min.js culture does not work anymore:

I have this script in the page:

<script src="assets/lib/kendojs/js/cultures/kendo.culture.it-IT.min.js"></script>

<script type="text/javascript">
kendo.culture("it-IT")
</script>

This does not work without kendo.all.min.js

2. The second problem I have is with timepicker:

I added these scripts

 jquery.js
kendo.core.js
kendo.popup.js
kendo.timepicker.js

as descriped here

It works in firefox and chrome for linux but in android there are displaying problems:

The values are displayed in the popup but also below the popup: the 48 values remain displayed.

Also here if I add kendo.all.min.js the problem is solved, but I want to do things without kendo all for evident optimization needs.

Paolo

 

[T. Tsonev]

Hello,

I'm sorry to hear the individual scripts are not working for you.

First, I verified that using only the kendo.dataviz.min.js script is sufficient to initialize the chart. See my test snippet here.

Cultures should be loaded after loading kendo.core.min.js:
    <script src="assets/lib/kendojs/js/kendo.core.min.js"></script>
    <script src="assets/lib/kendojs/js/cultures/kendo.culture.it-IT.min.js"></script>

 

The last problem turned out to be a bug. You can follow our progress here.
The workaround for the moment is to include the kendo.mobile.scroller script and its dependencies as well:
    <script src="assets/lib/kendojs/js/kendo.core.min.js"></script>
    <script src="assets/lib/kendojs/js/kendo.popup.min.js"></script>
    <script src="assets/lib/kendojs/js/kendo.timepicker.min.js"></script>
    <script src="assets/lib/kendojs/js/kendo.fx.min.js"></script>
    <script src="assets/lib/kendojs/js/kendo.userevents.min.js"></script>
    <script src="assets/lib/kendojs/js/kendo.draganddrop.min.js"></script>
    <script src="assets/lib/kendojs/js/kendo.mobile.scroller.min.js"></script>

Last, but not least, feel free to use the Download Builder to generate the list of scripts that you need.

I've updated our Telerik points as a token of gratitude for your involvement.

Regards,
T. Tsonev
Telerik

 

 

 

[Paolo]

Thanks for your reply.

Yes, the first problem was easily solved because there was a problem with the sequence of javascript inclusions.

The second problem persisted, so to have this feature working I had to switch to another solution (a simple html <select> with hours, then styled with twitter bootstrap ).

Kind regards

Paolo

[Paolo]

Thanks for suggesting me to use the download builder.

I'll manage to use it but I think also that also the file list you provide here maybe needs some changes.

I have now a line chart which is working, and I want to add PDF export feature.

The list says there is a need to include also kendo.pdf.min.js and that's what I did.

But when I click on the button that executes this code:

$("#exportPDFLineChartButton").click(function () {
    $("#chart").getKendoChart().saveAsPDF();
});

Firebug says:

TypeError: function saveAsPDF does not exists.

If include kendo.all.min.js the export works, but I do not want to include a 700+ kB file in a page.

I think your examples in telerik website should avoid using kendo.all and include only the needed javascript.

It would be easier for programmer to optimize applications avoiding unneeded code inclusion, and a set of inclusione only for needed scripts in the example would be helpful.

[Paolo]

I have solved. This was a problem of correctly stack inclusions:

The way it works for me is this:

<script src="{{asset('assets/lib/kendojs/js/kendo.data.min.js')}}"></script>
<script src="{{asset('assets/lib/kendojs/js/kendo.userevents.min.js')}}"></script>
<script src="{{asset('assets/lib/kendojs/js/kendo.color.min.js')}}"></script>
<script src="{{asset('assets/lib/kendojs/js/kendo.drawing.min.js')}}"></script>
<script src="{{asset('assets/lib/kendojs/js/kendo.dataviz.core.min.js')}}"></script>
<script src="{{asset('assets/lib/kendojs/js/kendo.pdf.min.js')}}"></script>
<script src="{{asset('assets/lib/kendojs/js/kendo.dataviz.themes.min.js')}}"></script>
<script src="{{asset('assets/lib/kendojs/js/kendo.dataviz.chart.min.js')}}"></script>

<script src="{{asset('assets/lib/kendojs/js/jszip.min.js')}}"></script>

If you put kendo.pdf.min.js at the top or at the bottom of the list it does not work.