Questions on Kendo UI for jQuery Forum

1 answer

124 views

direction of sliding transition is wrong with 3+ tabs

The direction of the sliding transitions in kendo mobile is all messed up when you have 3+ tabs.

The direction of the page transition should always correspond to the relative position of a newly selected tab button in relation to the previously selected tab button. If a newly selected tab button is to the right of the previously selected tab button, the transition should be from right to left. If a newly selected tab button is to the left of the previously selected tab button, the transition should be from left to right.

But in kendo mobile say you have a TabStrip with three tabs (from left to right), call them A, B, and C.

The app initializes with tab A selected. If you click tab B, the page transition moves from right to left (correct). Then if you click tab C, the page transition moves from right to left (correct). Then if you click on tab A, the page transition moves from right to left (INCORRECT).

TabStrip (Mobile)

answered on 01 Apr 2013

3 answers

223 views

Listview generated from large data set causes app to crash on iPad and iPhone.

Hi,

I am using Icenium Graphite for dev and I have listview bound to a Remote data set with server side paging enabled that is showing 30 rows in one page. Scrolling to 2 page the application crashes on iPad and iPhones due to "Received memory warning." . When I modify the page size to 10 then the application crashes after scrolling 4 pages. It works fine in the Stimulator.

You can easily reproduce this error in iPad using the JS Bin example given at http://jsbin.com/iyodux/32/edit
It crashes in iPad and iPhone if you load 500+ items giving multiple "Received memory warning" messages.

Regards,
Amit

Alternatively, here is an example code :

<!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="http://maps.google.com/maps/api/js?sensor=true"></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>
<div data-role="view" id="home" data-title="Home">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<ul id="mainlist"
data-role="listview"
data-source="category"
data-click="onClick"
data-template="home-lw-template"
data-style="inset">
</ul>
</div>

<script id="home-lw-template" type="text/x-kendo-template">
#: name #
</script>


<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>
</div>
</div>
</div>

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

<script>
var app = new kendo.mobile.Application(),
category = new kendo.data.DataSource({
data: [
{id: 1, name: "drinks"},
{id: 2, name: "fruits"}

// ADD MORE ITEMS HERE TO REPRODUCE THIS ERROR...


]
});

</script>
</body>
</html>

General Discussions

answered on 01 Apr 2013

1 answer

397 views

Click bind in a nested template doesn't work properly

Hi All,
I have the next to two pieces of code:

<div id="application">

</div>

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

<div id="command-bar" data-bind="source:this" data-template="command-bar-template"> </div>

</script>

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

<button id="nextButton" class="k-button barButton" data-bind="click: next">Next</button>

<button id="backButton" class="k-button barButton" data-bind="click: back">Back</button>

</script>

and this:

var appViewModel = kendo.observable({

next: function()

{

console.log("next pushed");

},

back: function()

{

console.log("back pushed");

}

});

var appLayout = new kendo.Layout("application-layout", {model: appViewModel});

appLayout.render("#application");

The thing is that only works (in this case ) the next button (It prints "next pushed" in the console). So , I say in this case , because when I put the "<button id="backButton"..." first in the "command-bar-template", then only works the back button. What am I doing wrong?. Here is the jsbin: http://jsbin.com/edamuj/631

Templates

answered on 01 Apr 2013

1 answer

92 views

ListView Won't Read Template

What am I doing wrong here? The ListView named #month_list won't render. I'm trying to piece together a solution from a couple of solutions I found in the blogs and example code.

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

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

<link href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.common.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.default.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.1.226/js/kendo.all.min.js"></script>

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

</head>

<body>

<script type="text/javascript">

navigator = {

months        : ["January","February","March","April","May","June","July","August","September","October","November","December"],

setDate : function(newDate) {

this.selected = {

date : newDate,

year : newDate.getFullYear(),

month : newDate.getMonth(),

day : newDate.getDate()

}

return this;

},

initMonthView : function(e) {

e.view.header.find('[data-role=view-title]').text(navigator.months[navigator.selected.month]);

e.view.header.find('#previous').on("click", navigator.prevMonth);

e.view.header.find('#next').on("click", navigator.nextMonth);

// e.view.datasource.filter();

},

initDayView : function(e) {

e.view.header.find('[data-role=view-title]').text(navigator.months[navigator.selected.month]+' '+navigator.selected.day);

e.view.header.find('#previous').on("click", navigator.prevDay);

e.view.header.find('#next').on("click", navigator.nextDay);

// e.view.datasource.filter();

},

initAttendance: function(e) {

e.view.header.find('[data-role=view-title]').text(navigator.months[navigator.selected.month]+' '+navigator.selected.day);

},

prevMonth : function(e) {

navigator.setDate(navigator.selected.date.setMonth( navigator.selected.date.getMonth()-1 ));

},

nextMonth : function(e) {

navigator.setDate(navigator.selected.date.setMonth( navigator.selected.date.getMonth()+1 ));

},

prevDay : function(e) {

navigator.setDate(navigator.selected.date.setDate( navigator.selected.date.getDate()-1 ));

},

nextDay : function(e) {

navigator.setDate(navigator.selected.date.setDate( navigator.selected.date.getDate()+1 ));

},

};

navigator.setDate(new Date());

</script>

<script type="text/javascript">

classes = kendo.observable({

dataSource : new kendo.data.DataSource(

[

{ "user_id" : 1, "report_id" : 1, "report_submitted" : 0, "report_date" : "March 28 2013", "period_code" : "A", "class_title" : "Basic I" }

]

)

});

</script>

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

<li class="class">

<span class="period" data-bind="text:period_code"></span>

<span class="title" data-bind="text:class_title"></span>

<a data-role="detailbutton" data-style="detaildisclose"></a>

</li>

</script>

<div id="month" data-role="view" data-title="Month" data-model="classes" data-show="navigator.initMonthView">

<div id="calendar" data-role="calendar"></div>

<ul id="month_list" data-role="listview" data-template="class_list" data-source="classes.dataSource" data-use-native-scroller="true"></ul>

</div>

<div data-role="layout" data-id="main-layout" data-platform="android">

<div data-role="footer">

<button id="current_period" style="float:right">

#=current_period#

</button>

<button id="current_view" style="float:left">

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

<span class="icon-bottom-right-corner"></span>

</button>

<menu id="view_menu">

<menuitem id="view_menu_month"><a href="#month">Month #=current_month#</a></menuitem>

<menuitem id="view_menu_day"><a href="#day">Day #=current_day#</a></menuitem>

<menuitem id="view_menu_attendance"><a href="#attendance">Period #=current_period#</a></menuitem>

</menu>

</div>

<div data-role="layout" data-id="main-layout" data-platform="ios">

<div data-role="header">

<div data-role="navbar">

<a id="previous" href="#"><img class="icon-left-arrow" src="images/left-arrow.png" width="16" height="22" /></a>

<a id="next" href="#"><img class="icon-right-arrow" src="images/right-arrow.png" width="16" height="22" /></a>

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

</div>

<div data-role="footer">

<ul data-role="buttongroup">

<a href="#month"><li>Month</li></a>

<a href="#day"><li>Day</li></a>

<a href="#attendance"><li>Class</li></a>

</ul>

</div>

<script type="text/javascript">

$(document).ready(function(){

});

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

// initial: "login",

icon: "images/FAWeb_favicon_32-16.png",

layout: "main-layout"

});

</script>

</body>

</html>

Thanks,
Pete

ListView (Mobile)

answered on 01 Apr 2013

1 answer

95 views

treeview conversion from telerik MVC to Kendo UI

Hi,

We are converting each control on our telerik MVC project to Kendo UI.
The first one we have taken is Treeview to convert and then later will take the next one. We included the Kendo js and css files in the project, made changes in the view of the treeview to use the appropriate events and methods. BUt we have an issue with the treeview after conversion.
1. The expand/collapse button and the check box gets overlapped. Found the cause of it that the html for checkbox comes in first before the the expand span due to which it gets overlapped.
Q: What are we missing ? By default it should be so that the Span of the expand/collapse should come first

2. If we remove the checkbox from the treeview and then try to expand a node, but it does not do so. Nothing happens when we click on it.
Q: What r we missing ?

Thanks..

TreeView

answered on 01 Apr 2013

3 answers

185 views

Dropdownlist Validation showing up as alert box versus other fields

Hello all,

I have an editor template popup and on it I have two dropdownlist controls on it. On another popup I have the validations show up as yellow messages on the popup form. On this one these show a "Message from web page" alert box and "Errors:" showing the error messages. How do I make this show similar to the other textboxes for example where it shows it hovering over the control the yellow validation messages?

<div class="editor-label">
@Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
@(Html.Kendo().DropDownList()
.Name("UserName")
.DataValueField("UserName")
.DataTextField("UserName")
.OptionLabel("--Select Value--")
.BindTo((System.Collections.IEnumerable)ViewData["ADUserList"])
)

@Html.ValidationMessageFor(model => model.UserName)
</div>

DropDownList

answered on 01 Apr 2013

6 answers

187 views

Scrolling through a list of inputs checks the input

I know this is an issue on an app for android, (I am not sure about iOS). I have a view with a large number of checkboxes for the user to select multiple items. However if you attempt to scroll the view down and you touch a checkbox and scroll, that checkbox value will toggle, is there a way to prevent this?

To reproduce this you can make an view with the following ...

<ul data-role="listview" data-type="group">

<li>

Heading 1

<ul>

<li><label><input type="checkbox" checked="checked" />Lettuce</label></li>

<li><label><input type="checkbox" checked="checked" />Carrots</label></li>

<li><label><input type="checkbox" checked="checked" />Peas</label></li>

<li><label><input type="checkbox" checked="checked" />Bread</label></li

>

    <!-- repeat until you have enough to fill the whole screen -->

</ul>

</li>

</ul>

If you try to scroll anywhere except for header you will inadvertently select a checkbox, is there a way to work around this?

ListView (Mobile)

answered on 01 Apr 2013

3 answers

201 views

How to make tabstrip remember current view?

I have a tabstrip with two buttons -- call them A and B. The content of tab A lets the user click on a button and go to another view, and a back button appears.

If the user then clicks on tab B, and then on tab A, the content of tab A should still show the second view with the back button (this is how native tabstrips work). But that isn't happening -- the view gets changed to the initial view of tab A, forcing the user to re-navigate to where they were before.

How do i make it work so that the view in each tab is preserved when a user clicks a different tab button and then back again?

TabStrip (Mobile)

answered on 01 Apr 2013

2 answers

127 views

Responsive Components

Hello,

I've been reading the documentation of KendoUI mobile but there are things I couldn't find anywhere.

In this particular case I'm trying to find out how we're supposed to make a UI flexible for different screens. Take the ScrollView demo for example (http://demos.kendoui.com/mobile/scrollview/index.html#/), the height of the photos is fixed, and if you change that and use "100%" instead, it collapse and no photo is shown (at least using icenium's simulators).

What am I missing? How do you tune the UI so it works for different devices with different screens? I'm particular interested in tablets (both orientations) but I also wants to support phones (yeah, I think I can target them using custom styles for each device but I suppose it's not the idea)..

Thanks,
Matt

ScrollView (Mobile)