kendo.all.min.js not working in mobile application

[King Wilder]

I'm trying to get a DropDownList to work in my mobile application and when I set the script reference to kendo.all.min.js, I get a blank view.  But when I change it to kendo.mobile.min.js, the view renders properly but I don't get my DropDownList.  Any thoughts?

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>

Here is my loadGroups() javascript method.  It doesn't get past the "if" statement - kendo.ui.DropDownList.

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

Any ideas how I can get a DropDownList to work in my mobile application?

Thanks.

[Sebastian]

Hello King,

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

[King Wilder]

Hi Sebastian,

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

[King Wilder]

Hi Sebastian,

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

Any ideas?  This seems like it should be trivial, but obviously I'm missing something.  I ultimately want to show my edit form with data values and the Groups dropdown that the user can select from.

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

 

[Kamen Bundev]

Hello King,

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

[King Wilder]

Hi Kamen,

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>

And this is my loadDetails() javascript function.

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

Again, the details view appears without a problem when I use the layout reference of kendo.mobile.min.js but not with kendo.all.min.js.

Any ideas?

Thanks,

King Wilder

[King Wilder]

Kamen,

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

What am I missing?

Thanks,

King Wilder

[Petyo]

Hi King,

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. 

Regards,
Petyo
Telerik

[King Wilder]

Hi Petyo,

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

[Alexander Valchev]

Hi,

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. 

Regards,
Petyo Ivanov

Telerik