Questions on Kendo UI for jQuery Forum

2 answers

263 views

I'm evaluating Kendo mobile for an upcoming project and am not having much luck getting a select handler on the tab strip to work as it should. I have this very simple page set up (using PhoneGap) and whenever I try to add a select handler, the UI completely fails to render and all I see is a white page with the text from all the views (no tab strip, no header, etc). If I remove the select handler, things render fine.

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

<meta charset="utf-8">

<!-- iPad/iPhone specific css below, add after your main css >

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

-->

<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->

<script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.1.js"></script>

<script>

if (typeof window._nativeReady === "undefined")

window._nativeReady = true;

</script>

<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8" src="js/app.js"></script>

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

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

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

<script type="text/javascript">

// If you want to prevent dragging, uncomment this section

/*

function preventBehavior(e)

{

e.preventDefault();

};

document.addEventListener("touchmove", preventBehavior, false);

*/

/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.

see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html

for more details -jm */

/*

function handleOpenURL(url)

{

// TODO: do something with the url passed in.

}

*/

function onBodyLoad()

{

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

}

/* When this function is called, PhoneGap has been initialized and is ready to roll */

/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.

see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html

for more details -jm */

function onDeviceReady()

{

// do your thing!

App.requireSession();

}

</script>

</head>

<body onload="onBodyLoad()">

<div data-role="view" id="tabstrip-card" data-init="cardViewInit" data-title="My card" data-layout="mobile-tabstrip">

card

</div>

<div data-role="view" id="tabstrip-providers" data-title="Providers" data-layout="mobile-tabstrip">

providers!

</div>

<div data-role="view" id="tabstrip-savings" data-title="My savings" data-layout="mobile-tabstrip">

savings!

</div>

<div data-role="view" id="tabstrip-logout" data-title="Log out" data-layout="mobile-tabstrip">

log out!

</div>

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

<header data-role="header">

<div data-role="navbar">

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

<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>

</div>

</header>

<footer data-role="footer">

<div data-role="tabstrip" id="footer-tabs">

<a href="#tabstrip-card" data-icon="contacts">My card</a>

<a href="#tabstrip-providers" data-icon="history">Providers</a>

<a href="#tabstrip-savings" data-icon="favorites">My savings</a>

<a id="logout" href="#tabstrip-logout" data-icon="settings">Log out</a>

</div>

</footer>

</div>

<script>

$(document).ready(function() {

var tabStrip = $("#footer-tabs").data("kendoMobileTabstrip");

tabStrip.bind("select", function(e) { alert(1); })

});

</script>

<script>

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

</script>

</body>

</html>

TabStrip (Mobile)

answered on 14 Feb 2012

2 answers

86 views

Right tab selected, wrong data showing!

Hello,

I have been playing with this for a few days now. I have a window with a tab strip in it. There are 2 buttons to open the window, each button corresponds to a tab in my tab strip. When I click the buttons, I am able to open the window and display the appropriate tab as selected, but for some reason, the information being shown does not track along.

For example. I open the window to tab 2, but the data for tab 1 is being displayed.
Here's a very simplistic reproduction of the issue: http://jsfiddle.net/jkappel/6UXZs/

As always, any help will be greatly appreciated!

TabStrip

answered on 13 Feb 2012

1 answer

116 views

Initialisation of an empty PanelBar / Some questions

Hi,

When you remove the last item in a panel bar it seems to remove the container as well (if it is a UL). Additionally I notice that you only seem to be able to add an item if you provide an existing item to a insert before/insert after/append to.

The only way around this seems to be to provide a datasource to construct the panel bar from (essentially allowing initialisation of an empty DOM node). However, how do I then change the items completely (eg. remove all of the items and add others? Do I need to destroy and replace the container to do this?

Also, if the container is a DIV and not a UL, you get a DIV with LI subitems in it, which seems to display fine, but which is probably not correct. Perhaps this should be checked on initialisation of the control and a wrapper constructed/initialisation aborted??

These issues also seem to affect the Menu control as well.

Regards,
Cuinn.

PanelBar

answered on 13 Feb 2012

6 answers

260 views

List not Dropping Down

I have a DropDownList in a Window, It has 2 elements. When clicked on, it is not expanding downwards (well, it does a tiny bit). I can use the arrow keys to select the 2nd element. Any idea why it is not expanding downwards? A tab panel is located just under it (with a couple of<br's in between).

DropDownList

answered on 13 Feb 2012

1 answer

249 views

How to style a List Item

How can I style a list-item without using the custom-template option?

I'm think of something like the tabstrip:

#custom-tabstrip .km-state-active .km-icon

{

background:-moz-linear-gradient(top, #ffffff, #2468A5); /* Firefox */

background : -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#2468A5)); /* Safari, Chrome */

}

ListView (Mobile)

answered on 13 Feb 2012

1 answer

63 views

[bug report] CSS may cause KendoUI malfunction

When we test kendoUI datepicker widget under internet explorer 8.0 / 9.0
It cannot collapses correctly

Finally we found a css setting in demo code example.css

html,

body

{

height:100%

;

}

We add this setting to userdefined css, it works like a charm

General Discussions

answered on 13 Feb 2012

3 answers

472 views

Clickable listview

Hi,

Great work for KendoUI mobile developers!

How can I make the items in a listview clickable (as shown in the Basic usage) example?
I use the databinding method.

My goal: when a user clicks on an item, slide in a remote view.

Thanks,
Koen

ListView (Mobile)

answered on 13 Feb 2012

0 answers

70 views

Kendo grid with odata. Add row error

Hi

I'm using kendo grid with odata.
My datasource is classical (many options have been tested). Something like:

var

myDS = new kendo.data.DataSource({

type: "odata",

transport: {

read: { url: "http://localhost:2000/Ajax/Lists/PassageDataService.svc/Passages/"

//, dataType: "json"
}},

schema: {

data: "d.results", model: {id: "SeqId", fields: myObject}

},

pageSize: 10,

serverPaging: true,

serverFiltering: true,

serverSorting: true,

sort: { field: "SeqId" }

});

When i Try to add objet to my data source with

myDS.add(myObject);

the object is added (I can see it on firebug), all goes fine but when i look at the page the new object is not on the kendo grid and firebug show an error "d.d is not defined"

If i use Json instead of odata, add object works fine but the rest is broken (pagging filtering etc with dataservice).

Anyone has ever tried to add row on buton click event to kendo grid using odata and dataservice?

thanks,
Laurent

Grid