Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Class instance combine with data-click and data-attributes

5 Answers 71 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Morgan
Top achievements
Rank 1
Morgan asked on 03 Dec 2013, 08:45 PM
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.

5 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 04 Dec 2013, 04:54 PM
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!
0
Morgan
Top achievements
Rank 1
answered on 05 Dec 2013, 01:16 PM
Thank you for helping Alexander :)
0
Morgan
Top achievements
Rank 1
answered on 05 Dec 2013, 01:34 PM
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 .
0
Accepted
Alexander Valchev
Telerik team
answered on 05 Dec 2013, 01:51 PM
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!
0
Morgan
Top achievements
Rank 1
answered on 05 Dec 2013, 02:13 PM
Thank you again Alexander for you answers and thank you for answering as quick as you did ;)
Tags
General Discussions
Asked by
Morgan
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Morgan
Top achievements
Rank 1
Share this question
or