CODEWITHSUNDEEP
kendo-ui
bikeman
bikeman

Reputation: 41

kendo ui core trouble getting started

I am trying to get started with kendo ui core. I followed the instructions at

http://docs.telerik.com/kendo-ui/getting-started/introduction?utm_source=telerik&utm_medium=email&utm_campaign=kuicore1

which say to include a link to the file js/kendo.web.min.js but this file was not in the kendoui.core download.

I tried substituting js/kendo.web.min.js for js/kendo.core.min.js which was in the download but that doesn't work either.

I am also getting a javascript console error on a file I've not even called. GET /telerik.kendoui.2014.1.416.core/js/jquery-1.9.1.js 404 (Not Found)

I tried including both a local copy of jquery-1.9.1.js and a link to google cdn which removed the 404 error but still the kendo ui components don't work.

Please help me get started, thanks

<!doctype html>
<html>
    <head>
        <title>Kendo UI Web</title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.core.min.js"></script>

    </head>
    <body>
        <input id="datepicker" />
        <script>
            $(function() {
                $("#datepicker").kendoDatePicker();
            });
        </script>
    </body>
</html>

Upvotes: 3

Views: 5098

Answers (1)

OnaBai
OnaBai

Reputation: 40887

If you use Kendo UI Professional then you can use core and you have all the JavaScript needed in one single file (kendo.web.min.js) -except jQuery- but this includes a lot of code that you might not need. That's why Telerik also distributes the separate files making your life harder but your web more efficient.

You can use the following example and then you don't need to setup anything else. If you copy this to a file and open it in a browser it should work...

<!doctype html>
<html>
<head>
    <title>Kendo UI Web</title>
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.ui.core.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
    $(function() {
        $("#datepicker").kendoDatePicker();
    });
</script>
</body>
</html>

But this is not efficient because you are loading all the widgets and you are bringing them from internet.

BUT if you want to use Kendo UI CORE the file that you need to include with all the widgets (included in this core) is NOT kendo.core.min.js but kendo.ui.core.min.js. So your code should be:

<!doctype html>
<html>
<head>
    <title>Kendo UI Web</title>
    <link href="./styles/kendo.common.min.css" rel="stylesheet" />
    <link href="./styles/kendo.default.min.css" rel="stylesheet" />
    <script src="./js/jquery.min.js"></script>
    <script src="./js/kendo.ui.core.min.js"></script>

</head>
<body>
<input id="datepicker" />
<script>
    $(function() {
        $("#datepicker").kendoDatePicker();
    });
</script>
</body>
</html>

BUT it seems that you want to deploy it in your server / computer instead of from internet. Then you need to copy to your system:

JavaScript:

js/jquery.min.js
js/kendo.ui.core.min.js

CSS:

styles/kendo.common.min.css
styles/kendo.default.min.css

plus files used by Default style:

styles/Default/editor.png
styles/Default/imagebrowser.png
styles/Default/indeterminate.gif
styles/Default/loading.gif
styles/Default/loading-image.gif
styles/Default/loading_2x.gif
styles/Default/slider-h.gif
styles/Default/slider-v.gif
styles/Default/sprite.png
styles/Default/sprite_2x.png

All this files are referenced by kendo.default.min.css and you will find them in the downloaded zip containing Kendo UI Core.

Upvotes: 7

Related Questions