Kendo Ui single javascript list

8 posts, 0 answers
  1. Paolo
    Paolo avatar
    26 posts
    Member since:
    Nov 2015

    Posted 20 Nov 2015 Link to this post

    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

  2. Paolo
    Paolo avatar
    26 posts
    Member since:
    Nov 2015

    Posted 21 Nov 2015 in reply to Paolo Link to this post

    I have found the list:

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

    Paolo

  3. Kendo UI is VS 2017 Ready
  4. Paolo
    Paolo avatar
    26 posts
    Member since:
    Nov 2015

    Posted 21 Nov 2015 Link to this post

    Using only needed scripts I had a visible improvement in the performance of my test application.
  5. Paolo
    Paolo avatar
    26 posts
    Member since:
    Nov 2015

    Posted 21 Nov 2015 Link to this post

    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

     

  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 25 Nov 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     

     
  7. Paolo
    Paolo avatar
    26 posts
    Member since:
    Nov 2015

    Posted 25 Nov 2015 in reply to T. Tsonev Link to this post

    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

  8. Paolo
    Paolo avatar
    26 posts
    Member since:
    Nov 2015

    Posted 25 Nov 2015 in reply to Paolo Link to this post

    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.

  9. Paolo
    Paolo avatar
    26 posts
    Member since:
    Nov 2015

    Posted 25 Nov 2015 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready