Questions on Kendo UI for jQuery Forum

16 answers

625 views

app.navigate error Cannot call method 'navigate' of undefined v2013.1.514

My javascript code was working fine before I upgraded my kendo.mobile.js to v2013.1.514.

Now, when I attempt to use the app object to navigate to a remote view, I get a javascript error "Cannot call method 'navigate' of undefined". I debugged the issue and found that the error is being thrown from kendo.mobile.js "this.pane.navigate(url, transition);" this.pane is undefined.

Is there anything I need to change to get this to work with the new version of kendo.mobile?

<script>

var isLoggedIn = false;

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

initial: "rootView"

});

function verifyLogin() {

app.navigate("http://192.168.1.129/Mobile/Account/Login");

}

</script>

Application

answered on 30 Sep 2013

3 answers

1.1K+ views

Grid Detail Template expanding on row click

At the moment, a detail tempate expands when clicking the little arrow to the left of the row.

I've look at the events/config/methods available for a grid and had a tinker but cannot work out how I would expand the detail template when clicking on a row and not necessarily the arrow. Calling the method that contains the logic for the 'detailInit' works, but you can't attach the events required like 'detailRow' for example.

Any ideas?

Grid

answered on 29 Sep 2013

1 answer

267 views

Styling of Kendo Mobile Switch

I have tried this a couple of ways but the styling of the switch is not right. First with the "Blank" template and manually adding my own kendo files, and then with the Kendo Mobile template. The result is the same with both templates and also with the flat skin.

http://jsfiddle.net/jeangentile/nnXQm/

Kendo UI Mobile 2013.2.918
Jquery 1.9.1
Cordova 3.0

In all cases, the "on" position of the switch seems to be too far to the right, leaving some of the "off" background visible.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="kendo/kendo.icenium.min.css" />
<title>Hello World</title>
</head>
<body>

<div class="app">
<ul>
<li>Password never expires <input id="wink-switch" /></li>
</ul>
</div>

<script type="text/javascript" src="cordova.js"></script>
<script src="kendo/jquery.min.js"></script>
<script src="kendo/kendo.mobile.min.js"></script>

<script type="text/javascript">

var mobileApp = new kendo.mobile.Application(document.body, {
skin: "flat"
});

$("#wink-switch").kendoMobileSwitch();

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

General Discussions

answered on 29 Sep 2013

8 answers

619 views

Datasource Group then sort

Hello,

I have a data set similar to this:

Name:Joe Smith, Rank:Captain, RankNum: 3
Name:Jane Doe, Rank:Chief, RankNum: 1
Name:Paul Smith,Rank:FF, RankNum:4

I have a datasource that pulls into a MobileUI ListView. What I am having an issue is that I am grouping the data based on Rank, but I want the ListView to be sorted by RankNum. If I just apply the sort with no grouping the ListView displays sorted by RankNum, but if I add a group then I loose my sort. Is there a way to solve this?

Data Source

answered on 28 Sep 2013

2 answers

112 views

Touch friendlier toolbar

Is there an easy way to make the toolbar buttons bigger for tablet screens?

Thanks

Editor

answered on 27 Sep 2013

1 answer

97 views

Using jquery to add to model

Not sure this is the right forum for this but here goes. I have a mobile app that gets an image via the camera. It puts the contents of the image into the variable 'imageData' I then use jquery:

$('#smallImage').attr('src', "data:image/jpeg;base64," + imageData);

into the image:

<img id="smallImage" width="100%" data-bind="attr: { src: Robot.Picture }">

that works fine as far as display goes. It does not however add it to "Robot"

I am using jaydata to save the data to a local database and the model has a lot of fields (all text inputs) and they all data-bind fine.

Any ideas?

MVVM

answered on 27 Sep 2013

2 answers

128 views

Column Series - how to set CategoryMemberName using MVC helper

Hi
I'm trying to set the CategoryMemberName in MVC using the chart builder - ChartSeriesFactory. I see in the API docs there is an overload of column that is supposed to take 4 string arguments, yet I am getting compilation errors that no overload of column takes 4 strings. How can I set the CategoryField on my series to a string using MVC helper?

from the api docs

Column(System.String,System.String,System.String,System.String)
Defines bound bar series.
Parameters
valueMemberName System.String The name of the value member.
colorMemberName System.String The name of the color member.
categoryMemberName System.String The name of the category member.
noteTextMemberName System.String The name of the note text memberFrom <http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/ChartSeriesFactory>

Charts

answered on 27 Sep 2013

4 answers

419 views

problem datasource with serverGrouping and grid

Hello,

I have a problem to work the serverGrouping in my datasource and the kendo grid (download my project).

this is my json result request :

{"data":[{"toto":2,"name":"la valeur de i0"},{"toto":2,"name":"la valeur de i1"}],"count":1,"groups":[{"field":"toto","value":"2","items":[{"toto":2,"name":"la valeur de i0"},{"toto":2,"name":"la valeur de i1"}],"hasSubgroups":false,"aggragates":{}}]}

and this my javascript :

var source = new kendo.data.DataSource({

type: "jsonp",

transport: {

read: "Home/GetResult"

},

schema: {

groups: "groups",

total: "count",

model: {

fields: {

toto: { type: "number" },

name: { type: "string" }

}

},

data: "result"

},

serverGrouping: true

});

$(document).ready(function

() {

$("#grid").kendoGrid({

dataSource: source,

height: 250,

groupable: true,

columns: [{

field: "toto",

title: "toto",

width: 100

},

{

field: "name",

title: "name",

width: 100

}

]

});

but I have an error => SCRIPT5007: Unable to get value of the property 'length': object is null or undefined

what's wrong with my kendo grid or my configuration ?

Thank you

Data Source

answered on 27 Sep 2013

1 answer

127 views

Custom Editor, NOT CHANGE THE MODEL

My Exemple: http://jsfiddle.net/rhvieira/FkP8z/

To show the error you need follow steps.
1- Click in Edit button
2 - click in the pencil in the first column
3 - type a value into html control and close the window.
4 - click in update button

Now occurs the error, in this step I try update the model, but when i did it the visual has been changed but the internal data is not marked as changed, then when
I send all informations to the server the record is not updated.

When I do the same steps in new record all works are done or when change the first and other column and save this work too.

Best Regards,
Vieira

Grid

answered on 27 Sep 2013

3 answers

88 views

Issue in display a date from JSON data, need to format inside kendo template with dynamic values

I am using dataSource and kendo template to populate a list of details from a api. Below code explain the view and viewmodel to display the data.
View:

<div data-role="view" id="myProjectView" data-title="Products List" data-init="myProjectListViewTemplatesInit">

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

<ul id="myProjectCustomListView"></ul>

</div>

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

<h3 class="item-title">Project Name: ${ProjectName}</h3>

<p class="item-info">Created Date: ${CreateDate}</p>

</script>

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

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

<script src="scripts/viewModel/myProjectsViewModel.js"></script>

<script>var app = new kendo.mobile.Application(document.body);</script>

viewModel - myProjectsViewModel.js

function myProjectListViewTemplatesInit(){

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://127.0.0.1/api/getProjectList",

dataType: "json",

}

},

});

$("#myProjectCustomListView").kendoMobileListView({

dataSource: dataSource,

template: $("#myProjectCustomListViewTemplate").html(),

});

};

The above api will return JSON data like below

[{"ProjectId":2,"ProjectCode":"TestProject","ProjectName":"TestProject","Description":"","CreateDate":"2013-09-13T00:00:00","Owner":"TestProject","StartDate":"2013-09-13T00:00:00","EndDate":"2013-09-13T00:00:00","StatusId":4,"IsActive":true,"ERPCompany":"","TemplateId":0,"DocumentTemplateID":0,"DocMetadataID":null,"IsDeleted":"","ERPCurrency":"$","ProjectMode":"L","DocumentListID":"","RowNum":3,"pagecount-1":null},{"ProjectId":1,"ProjectCode":"TemplateProject","ProjectName":"TemplateProject","Description":"","CreateDate":"2013-09-13T00:00:00","Owner":"Aurigo","StartDate":"2013-09-13T00:00:00","EndDate":"2013-09-13T00:00:00","StatusId":4,"IsActive":true,"ERPCompany":"","TemplateId":0,"DocumentTemplateID":0,"DocMetadataID":null,"IsDeleted":"","ERPCurrency":"$","ProjectMode":"L","DocumentListID":"","RowNum":4,"pagecount-1":null}]

I want to format the date column(CreateDate: 2013-09-13T00:00:00) like 13/09/2013. Help me in this.

General Discussions

answered on 27 Sep 2013