Assume I've got a template using a data-role directive:
<link href="kui/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kui/styles/kendo.default.min.css" rel="stylesheet" />
<link href="kui/styles/kendo.flat.min.css" rel="stylesheet" />
<script src="kui/js/jquery.min.js"></script>
<script src="kui/js/kendo.web.min.js"></script>
...
<script type="text/x-kendoui-template" id="kitten-list-template">
<div
data-role="listview"
data-template="kitten-list-item-template"
data-bind="source: imageDataSource">
</div>
</script>
This works just fine. However, if I add the dataviz library, the listview role no longer creates a ListView control:
<link href="kui/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kui/styles/kendo.default.min.css" rel="stylesheet" />
<link href="kui/styles/kendo.flat.min.css" rel="stylesheet" />
<script src="kui/js/jquery.min.js"></script>
<script src="kui/js/kendo.web.min.js"></script>
<script src="kui/js/kendo.dataviz.min.js"></script><!-- breaks things! -->
...
<script type="text/x-kendoui-template" id="kitten-list-template">
<div
data-role="listview"
data-template="kitten-list-item-template"
data-bind="source: imageDataSource">
</div>
</script>
Further, if I attempt to resolve this issue by fully qualifying the data-role, it also doesn't work (regardless of whether the dataviz library is pulled in or not):
<link href="kui/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kui/styles/kendo.default.min.css" rel="stylesheet" />
<link href="kui/styles/kendo.flat.min.css" rel="stylesheet" />
<script src="kui/js/jquery.min.js"></script>
<script src="kui/js/kendo.web.min.js"></script>
...
<script type="text/x-kendoui-template" id="kitten-list-template">
<!-- also breaks things! -->
<div
data-role="kendo.ui.ListView"
data-template="kitten-list-item-template"
data-bind="source: imageDataSource">
</div>
</script>
Am I doing something wrong? Thanks!
<link href="kui/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kui/styles/kendo.default.min.css" rel="stylesheet" />
<link href="kui/styles/kendo.flat.min.css" rel="stylesheet" />
<script src="kui/js/jquery.min.js"></script>
<script src="kui/js/kendo.web.min.js"></script>
...
<script type="text/x-kendoui-template" id="kitten-list-template">
<div
data-role="listview"
data-template="kitten-list-item-template"
data-bind="source: imageDataSource">
</div>
</script>
This works just fine. However, if I add the dataviz library, the listview role no longer creates a ListView control:
<link href="kui/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kui/styles/kendo.default.min.css" rel="stylesheet" />
<link href="kui/styles/kendo.flat.min.css" rel="stylesheet" />
<script src="kui/js/jquery.min.js"></script>
<script src="kui/js/kendo.web.min.js"></script>
<script src="kui/js/kendo.dataviz.min.js"></script><!-- breaks things! -->
...
<script type="text/x-kendoui-template" id="kitten-list-template">
<div
data-role="listview"
data-template="kitten-list-item-template"
data-bind="source: imageDataSource">
</div>
</script>
Further, if I attempt to resolve this issue by fully qualifying the data-role, it also doesn't work (regardless of whether the dataviz library is pulled in or not):
<link href="kui/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kui/styles/kendo.default.min.css" rel="stylesheet" />
<link href="kui/styles/kendo.flat.min.css" rel="stylesheet" />
<script src="kui/js/jquery.min.js"></script>
<script src="kui/js/kendo.web.min.js"></script>
...
<script type="text/x-kendoui-template" id="kitten-list-template">
<!-- also breaks things! -->
<div
data-role="kendo.ui.ListView"
data-template="kitten-list-item-template"
data-bind="source: imageDataSource">
</div>
</script>
Am I doing something wrong? Thanks!
1 Answer, 1 is accepted
0
Hello Chris,
Regards,
Petyo
Telerik
Indeed the fully qualified data-role isn't working in your project. We managed to trace down and resolve this problem; the fix will be available in our next internal build.
The kendo.web.min.js and kendo.dataviz.min.js files share common functionality and should not be included in the same page. We recommend either including kendo.all.min.js or creating a custom kendo file using our custom download builder tool.
Including kendo.all.min.js fixes the problem in your app if you use the shorter data-role:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <!-- Kendo UI --> <link href="kui/styles/kendo.common.min.css" rel="stylesheet" /> <link href="kui/styles/kendo.default.min.css" rel="stylesheet" /> <link href="kui/styles/kendo.flat.min.css" rel="stylesheet" /> <script src="kui/js/jquery.min.js"></script> <script src="kui/js/kendo.all.min.js"></script> <!-- WebApplication2 --> <script src="default.js"></script> <link href="default.css" rel="stylesheet" /></head><body> <script type="text/x-kendoui-template" id="kitten-list-item-template"> <img data-bind="attr: {src: url}" width="150px" /> </script> <script type="text/x-kendoui-template" id="kitten-list-template"> <div data-role="listview" data-template="kitten-list-item-template" data-bind="source: imageDataSource"> </div> </script> <div id="image-list"></div></body></html>Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!