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

[Solved] Creating a button at runtime

2 Answers 113 Views

General Discussion

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

This question is locked. New answers and comments are not allowed.

2 Answers, 1 is accepted

answered on 10 Jan 2013, 09:26 AM

Create your link/button as suck
_x = '<a class="something">Something</a>';
_x += '<a class="something">Something</a>';
_x += '<a class="something">Something</a>';
Append to doc
$('#general').html(_x);
Init buttons
$('.something').kendoMobileButton({click:action_call});

funcion action_call(e) {
}

The only problem I've encountered, is that you can't add 'data-click' directly to the <a>, it doesn't initialise. Not a problem if all items being added do the same thing, but I've had to add a data-action then process the click based on the action.

answered on 14 Jan 2013, 02:36 PM

Hello Mat-Moo,

I think you can use Kendo templates to achieve this functionality. I wrote a small sample to demonstrate the idea.

HTML:

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<script src="scripts/hello-world.js"></script>

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="styles/main.css" rel="stylesheet" />

</head>

<body>

<script type="text/x-kendo-template" id="customListViewTemplate">

<div class="actionButton" data-role="button" data-click="${func}">${action}</div>

</script>

<div data-role="view" id="tabstrip-home" data-title="Hello World!">

<ul id="custom-listview"></ul>

</div>

<script>

var app = new kendo.mobile.Application(document.body, {});

</script>

</body>

</html>

JavaScript:

// JavaScript Document

// Wait for PhoneGap to load

document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is ready

function onDeviceReady() {

$("#custom-listview"

).kendoMobileListView({

dataSource: kendo.data.DataSource.create({data: [

{func:"test",action:"Call function test1"

},

				{func:

"test2",action:"Call function test2"

}

		]}),

template: $("#customListViewTemplate").html()

})

}

var test=function() {

alert("test1");

};

var test2=function() {

alert("test2");

};

All the best,
kdimitrov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.