Class instance combine with data-click and data-attributes

6 posts, 2 answers
  1. Morgan
    Morgan avatar
    8 posts
    Member since:
    Nov 2013

    Posted 03 Dec 2013 Link to this post

    Hello :)

    I did post the same kind of question in the kendo ui framework general Discussions and i got an answer but i fact my question is more about kendo ui mobile ...

    I was wondering if it was possible to use the data-click property to call a method that is inside a class that i instanciate and also using the data-attributes to pass data to this method.

    i did try some things but it doesn't work. someone gave an example of this in the kendo ui framework general section but it uses the data-bind property and i do want to use the data-click one : 

    <!DOCTYPE html>
      
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <link href="./styles/kendo.common.css" rel="stylesheet" />
        <link href="./styles/kendo.default.css" rel="stylesheet" />
        <script src="./lib/jquery.min.js"></script>
        <script src="./lib/kendo.all.min.js"></script>
          
        <script>
            var Test = kendo.Class.extend({
                myAlert: function (e) {
                    alert("test");
                }
            })
      
            $(document).ready(function () {
                var test = new Test();
      
                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>
    i simply tried to remove the bind cause it wasn't what i wanted and replace the data-bind by a data-click but it of course doesn't work.

    so would it be possible to provide an example that uses the things i said before please ? 

    thank you so much for helping.

  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 04 Dec 2013 Link to this post

    Hello Morgan,

    The class is JavaScript object. In order to bind event handler function that is part of an object you should use the dot notation syntax. Here is an example:
    <div data-role="view" id="test">
        <a href="#test" class="button"
            data-role="button"
            data-click="test.myAlert"
            data-icon="search">buttonTest</a>
    </div>
    <script>
        var Test = kendo.Class.extend({
            myAlert: function (e) {
                alert("test");
            }
        });
     
        var test = new Test();
        var app = new kendo.mobile.Application();
    </script>


    It is important the test object to be available in the global scope.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Morgan
    Morgan avatar
    8 posts
    Member since:
    Nov 2013

    Posted 05 Dec 2013 Link to this post

    Thank you for helping Alexander :)
  4. Morgan
    Morgan avatar
    8 posts
    Member since:
    Nov 2013

    Posted 05 Dec 2013 Link to this post

    There is still something i don't get ..

    when i adapt your example for my use, it works like this : 

    var Test = kendo.Class.extend({
     
        monTest: function (e) {
            var dataSourceSearch;
            var dataSourceDetails;
            var pos;
            var data = e.button.data();
            if (data.relayControlerCommand === "rechercheRelais"){
                var myFilterObject = buildFilterObject("FALSE", "FALSE", "FALSE", "FALSE", "FALSE");
                if (data.searchWay === "usingData"){
                    pos = getLatLongFromAdress(myFilterObject);
                }
                else if (data.searchWay === "usingPos"){
                    pos = getLatLongFromCordova(myFilterObject);
                }
                $("#scrollerRelais").show();
                $("#map-canvas").hide();
            }
        }
    });
    But the simple fact of adding another method in the class like this, has my app crashing ...

    var Test = kendo.Class.extend({
     
        monTest: function (e) {
            var dataSourceSearch;
            var dataSourceDetails;
            var pos;
            var data = e.button.data();
            if (data.relayControlerCommand === "rechercheRelais"){
                var myFilterObject = buildFilterObject("FALSE", "FALSE", "FALSE", "FALSE", "FALSE");
                if (data.searchWay === "usingData"){
                    pos = getLatLongFromAdress(myFilterObject);
                }
                else if (data.searchWay === "usingPos"){
                    pos = getLatLongFromCordova(myFilterObject);
                }
                $("#scrollerRelais").show();
                $("#map-canvas").hide();
            }
        }
     
        test: function (e) {
            alert("test");
        }
    });
    Is there something special to do to have the possibility of setting several methods in the class ? 
    maybe a syntax thing i didn't get ..


    thank you .
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 05 Dec 2013 Link to this post

    Hello Morgan,

    There is a syntax error - a missing coma:
    var Test = kendo.Class.extend({
        monTest: function (e) {
            //...
        },
        test: function (e) {
            //...
        }
    });


    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Morgan
    Morgan avatar
    8 posts
    Member since:
    Nov 2013

    Posted 05 Dec 2013 Link to this post

    Thank you again Alexander for you answers and thank you for answering as quick as you did ;)
Back to Top