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

Action for active tab

7 Answers 152 Views

HTML5, CSS, JavaScript

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

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

7 Answers, 1 is accepted

answered on 18 Jan 2013, 05:27 PM

Hi,

You can use the Kendo Mobile "data-show" attribute and some templates. Here is a small sample that illustrates using Kendo "data-show" and templating:

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="stackStatsTemplate" >

<div>Answers per minute #= answers_per_minute#</div>

<div>Questions per minute #= questions_per_minute#</div>

<div>Total number of votes is #= total_votes#</div>

</script>

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

<h1>Welcome!</h1>

<p>

Icenium™ enables you to build cross-platform device applications regardless of your

development platform by combining the convenience of a local development toolset with the

power and flexibility of the cloud.

</p>

</div>

<div data-role="view" id="tabstrip-ajax" data-title="UI Interaction" data-show="showAjaxView">

<ul id="stackStats" data-role="listview" data-style="inset"></ul>

</div>

<div data-role="layout" data-id="mobile-tabstrip">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#tabstrip-home" data-icon="home">Home</a>

<a href="#tabstrip-ajax" data-icon="share">Ajax</a>

</div>

<script>

var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });

</script>

</body>

</html>

JavaScript:

// JavaScript Document

// Wait for PhoneGap to load

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

// PhoneGap is ready

function onDeviceReady() {

}

//=======================Ajax View=======================//

function showAjaxView() {

getAjax();

}

function getAjax(){

$.ajax({

type:"GET",

url: "https://api.stackexchange.com/2.1/info?site=stackoverflow"

}).done(function( data ) {

updateStackStatListView(data);

});

}

function updateStackStatListView( data ) {

$("#stackStats").kendoMobileListView({

dataSource: kendo.data.DataSource.create({data: data.items}),

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

});

}

Regards,
kdimitrov
the Telerik team

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

answered on 19 Jan 2013, 07:42 PM

One more trouble.

ListView style with js don't working.

Where i need to past listview:

<div data-role="view" id="tabstrip-news" data-title="Новости" data-show="showNews">
<ul id="listv" data-role="listview" data-style="inset" data-type="group">
</ul> </div>

Function to read and paste data:
function showNews() {
$.ajax({
url: 'http://apps.liftsite.ru/rgsu/index.php?tag=timetab&idgroup=1',
dataType: 'json',
cache: false,
type: 'GET',
success: function(data) {
var txt = "";

if (typeof data != "undefined") {
txt += "";
for (var i = 0; i < data.length; i++ ){

txt += "<li>" +data[i].wdname + "<ul><li data-icon=globe><a>"+ data[i].dtime +"<br />"
+ data[i].dfulln + "<br />" + data[i].clname + "</a></li></ul></li>" ;
}
}
$('#listv').html(txt);

},
error: function(data) {
$('#simpleBlock p').html("Произошла ошибка при получении JSON!");
}
});
}

In result i have a simple list without style. What is wrong?

answered on 21 Jan 2013, 01:25 PM

Hi,

Kendo Mobile evaluates the html, when it is first loaded, to apply its style and to perform the operations specified by the "data" attributes. To achieve what you want you need to use Kendo templates. You can read more about that here.

Once you create your template and DataSource, you just init the list-view.

When the ajax call is made and the new data is received and set to the DataSource, the list-view will automatically apply the change and template over new data.

Here is the example code:

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="stackStatsTemplate" >

<div>Answers per minute #= answers_per_minute#</div>

<div>Questions per minute #= questions_per_minute#</div>

<div>Total number of votes is #= total_votes#</div>

</script>

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

<h1>Welcome!</h1>

<p>

Icenium™ enables you to build cross-platform device applications regardless of your

development platform by combining the convenience of a local development toolset with the

power and flexibility of the cloud.

</p>

</div>

<div data-role="view" id="tabstrip-ajax" data-title="UI Interaction" data-show="showAjaxView">

<ul id="stackStats" data-role="listview" data-style="inset"></ul>

</div>

<div data-role="layout" data-id="mobile-tabstrip">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#tabstrip-home" data-icon="home">Home</a>

<a href="#tabstrip-ajax" data-icon="share">Ajax</a>

</div>

<script>

var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });

</script>

</body>

</html>

JavaScript:

// Wait for PhoneGap to load

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

var stackDataSource = new kendo.data.DataSource();

// PhoneGap is ready

function onDeviceReady() {

$("#stackStats").kendoMobileListView({

dataSource: stackDataSource,

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

});

}

//=======================Ajax View=======================//

function showAjaxView() {

$.ajax({

type: "GET",

url: "https://api.stackexchange.com/2.1/info?site=stackoverflow"

})

.done(function( data ) {

stackDataSource.data(data.items);

});

}

Greetings,
kdimitrov
the Telerik team

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

answered on 21 Jan 2013, 05:25 PM

Template is good thing. But did not help. The same result.

...
<body>

<script type="text/x-kendo-template" id="snTemplate" >
<li>#= wdname#
<ul><li>#= dtime#<br />
#= dfulln#<br />
#= clname#
</li></ul>
</li>

</script>

<div data-role="view" id="tabstrip-news" data-title="Новости" data-show="showNews">

<ul id="listv" data-role="listview" data-style="inset" data-type="group"></ul>

</div>
...

...
function onDeviceReady() {

$("#listv").kendoMobileListView({
dataSource: snDataSource,
template: $("#snTemplate").html()
});

}
...

answered on 22 Jan 2013, 01:21 PM

Hi,

You can have a look at the demo here for a grouped listview. If thats not the case try setting the data-role of the inner-list in your template and remove the first "li" that wraps the whole thing like so:

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

#= wdname#

<ul data-role="listview" data-style="inset"><li>#= dtime#<br />

#= dfulln#<br />

#= clname#

</li></ul>

</script>

All the best,
Kristian D. Dimitrov
the Telerik team

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