This is a migrated thread and some comments may be shown as answers.

problem with kendo ui class implementation

2 Answers 137 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Morgan asked on 02 Dec 2013, 07:52 PM

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 Answers, 1 is accepted

answered on 02 Dec 2013, 09:31 PM

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>