fully qualified data-role not resolving in a template or in the presence of the dataviz library

2 posts, 0 answers
  1. Chris
    Chris avatar
    5 posts
    Member since:
    Jun 2012

    Posted 02 Aug 2013 Link to this post

    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!
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 06 Aug 2013 Link to this post

    Hello Chris,

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