problem with kendo ui class implementation

3 posts, 0 answers
  1. Morgan
    Morgan avatar
    8 posts
    Member since:
    Nov 2013

    Posted 02 Dec 2013 Link to this post

    Hello !

    i'm currently running some test on kendo ui Class to get a clean code in one of my project but i'm getting some errors i don't know how to solve.

    here is my simple sample of code : 

    <!DOCTYPE html>
    <html>
    <head>
      <title>Test</title>
      <link href="styles/kendo.common.min.css" rel="stylesheet" />
      <link href="styles/kendo.default.min.css" rel="stylesheet" />
      <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
      <link href="styles/index.css" rel="stylesheet" />
    </head>
    <body onload="onBodyLoad()" style="height:100%; padding-bottom: 100%">
      <div data-role="view" id="test">
          <a href="#test" class="button" data-role="button" data-click="test.myAlert" data-att="attributeTest" data-icon="search">buttonTest</a>
      </div>
      <script src="lib/jquery.min.js"></script>
      <script src="lib/kendo.all.min.js"></script>
      <script src="init/cordovaInit.js"></script>
     
    <script type="text/javascript">
      var Test = kendo.Class.extend({
     
        init: function() {
        }
     
        myAlert: function(e) {
          alert("test");
        }
    });
    </script>
     
        <script>
        var app = new kendo.mobile.Application($(document.body), { skin: "flat" });
        var test = new Test();
        test.myAlert();
        </script>
      </body>
      </html>
    and here are the error i'm getting when i run it on chrome 

    Uncaught SyntaxError: Unexpected identifier index.html:24
    Uncaught ReferenceError: Test is not defined index.html:32
    Uncaught TypeError: Cannot read property 'myAlert' of undefined
    i really don't know how to get through that ..

    my wish is to implement a class that does simple class's job like methods, attributes and so on. i want to combine that with data-clic properties and the data-attribute feature that kendo ui implements.

    thank you for helping  and sorry if i'm posting in the wrong place but i haven't seen any section about kendo ui class .. :)
  2. Marcel
    Marcel avatar
    42 posts
    Member since:
    Apr 2011

    Posted 02 Dec 2013 Link to this post

    You can do it as easy as this:
    Make sure you reference the right scripts and stylesheets and it should work
    <!DOCTYPE html>
     
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <link href="~/Content/kendo.common.css" rel="stylesheet" />
        <link href="~/Content/kendo.default.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-2.0.3.js"></script>
        <script src="~/Scripts/kendo.web.js"></script>
         
        <script>
            var Test = kendo.Class.extend({
                myAlert: function (e) {
                    alert("test");
                }
            })
     
            $(document).ready(function () {
                var test = new Test();
                test.myAlert();
     
                kendo.bind($("#test"), test);
            })
        </script>
     
    </head>
    <body>
        <div data-role="view" id="test">
            <a href="#test" class="button"
               data-role="button"
               data-bind="events: { click: myAlert }"
               data-icon="search">buttonTest</a>
        </div>
    </body>
    </html>


  3. Morgan
    Morgan avatar
    8 posts
    Member since:
    Nov 2013

    Posted 02 Dec 2013 Link to this post

    Hi, thank you for helping.

    i can see that you referenced the kendo.web.js script ..
    i'm personnaly using kendo mobile, does your example still work with it ? 
    do i have to reference the kendo ui web javascript file and also the kendo ui mobile javascript file ? 

    couple weeks ago someone here told me that i had to use de data-click to fire my event since i'm using kendo ui mobile and this was way much better with touch and i also had to use data-attributes to pass data to my functions. is it working with the way you implement the class ? 
    thanks again mate ;)
Back to Top