
Here is my mobile layout head section.
<
link
href
=
"@Url.Content("
~/Content/kendo/2013.2.801/kendo.common.min.css")"
rel
=
"stylesheet"
/>
<
link
href
=
"@Url.Content("
~/Content/kendo/2013.2.801/kendo.default.min.css")"
rel
=
"stylesheet"
/>
<
link
href
=
"@Url.Content("
~/Content/kendo/2013.2.801/kendo.mobile.all.min.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
"@Url.Content("
~/Content/mobile/mobile-styles.css")"
rel
=
"stylesheet"
/>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/2013.2.801/jquery.min.js")"
type
=
"text/javascript"
></
script
>
<
script
src
=
"@Url.Content("
~/Scripts/kendo/2013.2.801/kendo.all.min.js")"
type
=
"text/javascript"
></
script
>
<
script
src
=
"@Url.Content("
~/Scripts/json2.min.js")"
type
=
"text/javascript"
></
script
>
01.
var
body = $(
".km-pane"
);
02.
03.
function
loadGroups() {
04.
console.log(
"trying to load the groups..."
);
05.
if
(kendo.ui.DropDownList) {
06.
$(
"#group-editor"
).kendoDropDownList({
07.
popup: { appendTo: body },
08.
animation: { open: { effects: body.hasClass(
"km-android"
) ?
"fadeIn"
: body.hasClass(
"km-ios"
) || body.hasClass(
"km-wp"
) ?
"slideIn:up"
:
"slideIn:down"
} },
09.
dataSource: {
10.
transport: {
11.
url:
'/api/group/getgroupsforuser'
,
12.
type:
'GET'
,
13.
dataType:
'json'
14.
}
15.
},
16.
dataTextField:
"GroupName"
,
17.
dataValueField:
"Id"
18.
});
19.
}
20.
}
Thanks.
9 Answers, 1 is accepted
When you register kendo.all.min.js (as depicted here), this should be sufficient to use the scripts of our Web, DataViz and Mobile widgets.
I noticed that you registered kendo.mobile.min.js and kendo.all.min.js afterwards - can you check whether removing the mobile js file registration or the json2 script registration makes a difference? Additionally, you may consider switching to the 2013.2.918 version (Q2 2013 SP) version of the scripts instead of using an outdated internal build.
Kind regards,
Sebastian
Telerik

Where do you see me registering both kendo.mobile.min.js AND kendo.all.min.js in my code? I've tried both, but not together.
I'll try removing the json2.js reference and see if that makes a difference, but I do need it. I'll let you know my findings.
Thanks,
King Wilder

Ok, here are my results, with the json2.js file reference removed. (Note: only one of these references are set at a time, not both):
- kendo.all.min.js - when I set the reference to just kendo.all.min.js, my details view is blank, which it shouldn't be.
- kendo.mobile.min.js - all the views render fully, except I get no DropDownList.
In my referenced javascript method below, the "if" statement on line 4 always returns undefined when using kendo.mobile.min.js reference. When I use the kendo.all.min.js reference, I get a blank details view but when I set a breakpoint on this line, the "kendo.ui.DropDownList" item does return a function, but I don't see the datasource being called. That's beside the fact that the details page is blank, as in none of the form elements appear.
01.
// Load the Groups in the editor view.
02.
function
loadGroups() {
03.
console.log(
"trying to load the groups..."
);
04.
if
(kendo.ui.DropDownList) {
05.
console.log(
"...inside..."
);
06.
$(
"#group-editor"
).kendoDropDownList({
07.
popup: { appendTo: body },
08.
animation: { open: { effects: body.hasClass(
"km-android"
) ?
"fadeIn"
: body.hasClass(
"km-ios"
) || body.hasClass(
"km-wp"
) ?
"slideIn:up"
:
"slideIn:down"
} },
09.
dataSource: {
10.
transport: {
11.
url:
'/api/group/getgroupsforuser'
,
12.
type:
'GET'
,
13.
dataType:
'json'
14.
}
15.
},
16.
dataTextField:
"GroupName"
,
17.
dataValueField:
"Id"
18.
});
19.
}
20.
}
I've attached a number of screenshots to show what it is doing and what it is not. The numbered screenshots are what the application should look like, but notice, the Groups field is empty, when it should be showing a "select" element of groups.
Any help is appreciated.
Thanks,
King Wilder
Seems a JavaScript error is occurring, which leads to the blank screen. Can you check the Chrome Developer Tools what the errors are and post them here?
On a side note, you don't need these two rows - there is a comment in the demo, that they are needed just for the demo (where the application lives in a DIV container):
popup: { appendTo: body },
animation: { open: { effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") || body.hasClass("km-wp") ? "slideIn:up" : "slideIn:down" } },
You can safely remove them (and check if this helps).
Regards,
Kamen Bundev
Telerik

Ok, I updated the Kendo files from 2013.2.801 to 2013.2.918. The problem still persists. I haven't used the Chrome Developer tools that much, but I'm not seeing any errors at all.
I also removed those to ajax properties and still no change.
This is my details view...
01.
<!--data-show="loadDetails"-->
02.
<
div
data-role
=
"view"
id
=
"password-details"
data-title
=
"Password Details"
data-show
=
"loadDetails"
>
03.
<
header
data-role
=
"header"
>
04.
<
div
data-role
=
"navbar"
>
05.
<
a
data-align
=
"left"
data-role
=
"button"
class
=
"nav-button"
href
=
"#passwords-listview"
>Back</
a
>
06.
<
span
data-role
=
"title"
>Password Details</
span
>
07.
<
a
class
=
"button"
data-role
=
"button"
data-align
=
"right"
data-click
=
"addnew"
>Add New</
a
>
08.
</
div
>
09.
</
header
>
10.
<
ul
data-role
=
"listview"
data-style
=
"inset"
id
=
"details-view"
>
11.
<
li
>WebSiteName: <
span
id
=
"websitename-value"
data-bind
=
"value: WebSiteName"
></
span
></
li
>
12.
<
li
>Login: <
span
id
=
"login-value"
data-bind
=
"value: Login"
></
span
></
li
>
13.
<
li
>Password:
14.
<
input
type
=
"text"
id
=
"password-value"
data-bind
=
"value: Password"
/></
li
>
15.
<
li
>Url: <
a
id
=
"url-value"
data-bind
=
"value: URL"
href
=
"#"
target
=
"_blank"
></
a
></
li
>
16.
<
li
>Notes: <
span
id
=
"notes-value"
data-bind
=
"value: Notes"
class
=
"notes"
></
span
></
li
>
17.
<
li
>Group: <
span
id
=
"group-value"
data-bind
=
"value: GroupName"
></
span
></
li
>
18.
<
li
>Date Created: <
span
id
=
"datecreated-value"
data-bind
=
"value: DateCreated"
></
span
></
li
>
19.
<
li
>Date Updated: <
span
id
=
"dateupdated-value"
data-bind
=
"value: DateUpdated"
></
span
></
li
>
20.
</
ul
>
21.
<
a
data-role
=
"button"
class
=
"km-button km-listinset"
id
=
"editpasswordbutton"
data-click
=
"loadPassword"
>Edit</
a
>
22.
</
div
>
01.
// Load the details for the selected password.
02.
function
loadDetails(e) {
03.
selectedId = e.view.params.id;
04.
console.log(
"id: "
+ selectedId);
05.
if
(selectedId > 0) {
06.
$.ajax({
07.
url:
"/api/passwords/single"
,
08.
data: { Id: selectedId },
09.
dataType:
"json"
,
10.
type:
"GET"
,
11.
cache:
false
,
12.
success:
function
(data) {
13.
console.log(
"Websitename: "
+ data.WebSiteName);
14.
$(
"#websitename-value"
).html(data.WebSiteName);
15.
$(
"#password-value"
).val(data.Password);
16.
$(
"#login-value"
).html(data.Login);
17.
$(
"#url-value"
).text(truncateUrl(data.URL));
18.
$(
"#url-value"
).attr(
"href"
, data.URL);
19.
$(
"#group-value"
).html(data.GroupName);
20.
$(
"#datecreated-value"
).html(data.DateCreated);
21.
$(
"#dateupdated-value"
).html(data.DateUpdated);
22.
$(
"#notes-value"
).html(data.Notes);
23.
copyPasswordToClipboard($(
"#password-value"
));
24.
}
25.
});
26.
}
27.
}
Any ideas?
Thanks,
King Wilder

I got the Details view to work using kendo.all.min.js. I had a viewModel reference bound to that view as well as the loadDetails method and when I removed the viewmodel binding, the view became visible.
But now I'm back to the original issue which is with the edit view. Now I can't see the edit view because I get the error:
Requested URL: /Scripts/kendo/2013.2.918/jquery-1.9.1.js cannot be found. 404
This occurs when it hits line 6 in the following script. When I try to initialize the kendoDropDownList, it throws that jquery error. 404. Why doesn't it pick up the jquery.min.js? Instead it's trying to load the un-minified jquery file, which obviously doesn't exist. Why is it trying to load that file?
01.
// Load the Groups in the editor view.
02.
function
loadGroups() {
03.
console.log(
"trying to load the groups..."
);
04.
if
(kendo.ui.DropDownList) {
05.
console.log(
"...inside..."
);
06.
$(
"#group-editor"
).kendoDropDownList({
07.
//popup: { appendTo: body },
08.
//animation: { open: { effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") || body.hasClass("km-wp") ? "slideIn:up" : "slideIn:down" } },
09.
dataSource: {
10.
transport: {
11.
url:
'/api/group/getgroupsforuser'
,
12.
type:
'GET'
,
13.
dataType:
'json'
14.
}
15.
},
16.
dataTextField:
"GroupName"
,
17.
dataValueField:
"Id"
18.
});
19.
}
20.
}
Thanks,
King Wilder
I am not sure what is the problem with your case, but please refer to this live demo, which pretty much does everything you have outlined as requirements. kendo.mobile.all.js is used, and a dropdownlist widget is initialized in the view init event handler. In general, it is highly unlikely that Kendo UI requests the jQuery script.
I would like to suggest that you use this example as a starting point for your implementation.
Petyo
Telerik

I have looked at that Demo resource, that's where I got the instructions that I'm using.
I hope you are not suggesting that I'm making up the jQuery error. It's an error I came across and not something I manufactured. When I have a moment, I'll make a short video to show you what it's doing.
King Wilder
a video won't be necessary. I am certain that the error is happening.
What I am suggesting is that the error is not caused by Kendo UI itself. As far as I can see, the demo in question does not trigger it.
In case you think otherwise, you may consider reproducing it in a jsbin. Once we can witness it in an isolated case, we will be able to assist you further.
Petyo Ivanov
Telerik