Questions on Kendo UI for jQuery Forum

3 answers

227 views

Mobile Icons not displayed in Windows phone 8 emulator

Hi There,

I've wrapped my kendoui mobile application in PhoneGap and created a native application for Windows Phone 8. My issue now is that none of the kendo mobile icons are rendering when I test using tyyhe Windows Phone 8 emulator? I have double checked that all of the tff and woff files are in the correct place along with all the images but it still doesn't.

Is there something different I need to do to get icons to work and should I being expecting them to?

Finally there is also an issues that all of the views seem to be rendered too high so the top part of headings in the top toolbar are cut off and you have to manually scroll down. This seems to happen after an input has been used and the keyboard appears and then is closed. Is there a way I can fix this?

Thanks,

Rob

General Discussions

answered on 02 Apr 2013

5 answers

625 views

footerTemplate data

What does the data of the footer template represent? I am trying to access some custom properties that I added to the grid. It would make sense to me that the data parameter in the template function would somehow represent the grid.
If not, is there anyway to get the grid during template processing? I have a hierarchical grid and need to know which one is rendering when I render the template.

Thanks,
Eric

Grid

answered on 01 Apr 2013

3 answers

139 views

Graphing discontinuous data

Hi, when I have a discontinuous/sparse seriies of data (e.g. a date X-axis, and i have 1/1,1/2,1/5,1/6) on a line graph,etc there are 'breaks between the actual values on the 'missing' day. Is there an option to have the chart draw the line 'across' the missing values to the next 'dot'?

Charts

answered on 01 Apr 2013

2 answers

109 views

[Solved] cannot call method center of undefined.

I have this grid set up.

@model IEnumerable<MyDllClass.Account>

@{

ViewBag.Title = "User Management";

Layout = "~/Views/Shared/_Layout.cshtml";

}

@(Html.Kendo().Grid(Model)

.Name("UsersGrid")

.Columns(columns =>

{

columns.Bound(currentAccount => currentAccount.FirstName);

columns.Bound(currentUser => currentUser.LastName);

columns.Bound(currentUser => currentUser.Email);

columns.Bound(currentUser => currentUser.Phone1.PhoneNumber).Title("Primary Phone");

columns.Bound(currentUser => currentUser.Organization);

columns.Bound(currentUser => currentUser.Address.County.CountyName);

columns.Bound(currentUser => currentUser.Role);

columns.Bound(currentUser => currentUser.IsLocked);

columns.Bound(currentUser => currentUser.AccountLog.LastLogIn);

columns.Bound(currentUser => currentUser.IsActive).Title("Enabled");

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(300);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("AddEditUser").Window(window => window.Width(750)))

.Pageable(pages => pages.PageSizes(true))

.Sortable()

.DataSource(datasource => datasource

.Ajax()

.ServerOperation(true)

.Model(model => model.Id(currentAccount => currentAccount.UserName))

.Create(update => update.Action("AddAccount", "Account"))

.Update(update => update.Action("EditAccount", "Account"))

.Destroy(update => update.Action("DeletAccount", "Account"))

)

<script type="text/javascript">

$(document).ready(function () {

var grid = $('#UsersGrid').data("kendoGrid");

if (!grid)

console.log("Nothin");

else

grid.bind("edit", function (e) {

});

</script>

When I try to edit or add I get the following jquery/javascript error:
Uncaught TypeError: Cannot call method 'center' of undefined

Grid

answered on 01 Apr 2013

1 answer

165 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

245 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

441 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

137 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

136 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

240 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