i am using kendo chart in mvc razor
#(Html.Kendo().Chart().Name("chart"))
using this js and cs files
<link href="~/Scripts/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="~/Scripts/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/kendo.all.min.js"></script>
How can i fix this issue ?
You are facing a problem because you are adding jquery twice in your code. Try removing <script src="~/Scripts/jquery-1.9.1.min.js"></script> and
your code should work fine.
Related
I am beginner in laravel, so can anyone help me to figure this out ?
In /public/app.blade.php look like this
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/bootstrap.min.js"></script>
Just add tether dependency in your code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
or download the Tether locally from
https://github.com/HubSpot/tether
add add to your project
<script src="path/to/dist/js/tether.min.js"></script>
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>
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.
I am unable to get Button() builder in view page, my page is designed as follows..
#using Kendo.Mvc.UI
<h2>ButtonKendoHelper</h2>
<html>
<head>
<link href="~/Scripts/Kendo/Styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/Scripts/Kendo/Styles/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery.1.8.3.js"></script>
<script src="~/Scripts/Kendo/kendo.web.min.js"></script>
</head>
<body>
#(Html.Kendo().**button()**
</body>
</html>
when i entered "b", it is showing MobileButton Controls.
may i know why i am unable to get Button Builder?
You are probably using an old version which doesn't yet support the Kendo Button. Try upgrading to the latest version.
I own a construction grid kendo.web.min.js with kendo.dataviz.min.js, but when I use the Using both collision occurs.
But it is interesting that the project jsfiddle it works well but when I run the project visual studio
I encountered the following error TypeError: s is undefined
jsfiddle code
<link href="css/themes.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/base.css" rel="stylesheet" />
<link href="js/kendo/src/styles/kendo.dataviz.css" rel="stylesheet" />
<link href="js/kendo/styles/kendo.silver.min.css" rel="stylesheet" />
<link href="js/kendo/styles/kendo.common.min.css" rel="stylesheet" />
<script src="js/kendo/js/kendo.web.min.js"></script>
<script src="js/kendo/js/kendo.dataviz.min.js"></script>
<script src="js/kendo/src/js/kendo.dataviz.sparkline.js"></script>
They conflict because they include the same files - kendo.data.js, kendo.core.js etc. You should never include them in the same page - use kendo.all.min.js or create a JavaScript file with only the required features.
More info is available in the Kendo UI documentation - JavaScript dependencies.
DataViz script must be put before the Web script.
<script src="js/kendo/js/kendo.dataviz.min.js"></script>
<script src="js/kendo/js/kendo.web.min.js"></script>
I have a doubt about kendo UI .I using Kendo chart and grid when ever i add the dataviz js script to my page and when ever loading the page grid is not displaying any columns.That is I can add only web or dataviz. Here are the script i added Is there any inter dependency between chart and grid.
<link href="KENDO/js/examples-offline.css" rel="stylesheet" type="text/css"/>
<link href="KENDO/styles/kendo.default.css" rel="stylesheet" type="text/css"/>
<link href="KENDO/styles/kendo.common.css" rel="stylesheet" type="text/css"/>
<script src="KENDO/js/jquery.min.js"></script>
<script src="KENDO/js/kendo.dataviz.stock.min.js"></script>
<script src="KENDO/js/kendo.web.min.js"></script>
<script src="KENDO/js/kendo.dataviz.min.js"></script>
<link href="KENDO/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css"/>
<script src="KENDO/js/console.js"></script>
This is what you should add for styling KendoUI web:
<link href="KENDO/styles/kendo.default.css" rel="stylesheet" type="text/css"/>
<link href="KENDO/styles/kendo.common.css" rel="stylesheet" type="text/css"/>
This is what you need for running KendoUI web:
<script src="KENDO/js/jquery.min.js"></script>
<script src="KENDO/js/kendo.web.min.js"></script>
This is for styling Kendo UI dataviz:
<link href="KENDO/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css"/>
And this is for running Kendo UI dataviz:
<script src="KENDO/js/kendo.dataviz.min.js"></script>
The others are for demos (you don't need them)