This is a migrated thread and some comments may be shown as answers.

Grocery List Tutorial

7 Answers 154 Views
Sample Applications
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Gareth
Top achievements
Rank 1
Gareth asked on 16 Aug 2015, 07:42 PM

Hi guys 

 

I am on step 2 of the grocery list tutorial. 

I added the following code(bold text) and ran the app in the ios emulator. The emulator, runs but the grocery list does not load. All I see is the loader icon.

Also how do I see runtime errors?

function initialize() {
        var app = new kendo.mobile.Application(document.body, {
            skin: "flat",
            transition: "slide"
        });
        
        $("#grocery-list").kendoMobileListView({
            dataSource: groceryDataSource,
            template: "#: Name #"
        });

        navigator.splashscreen.hide();
    }

7 Answers, 1 is accepted

Sort by
0
Toma
Telerik team
answered on 19 Aug 2015, 01:08 PM
Hello Gareth,

The code fragment is correct and it should work properly however I believe that the API key might not be setup correctly.  Could you check line 2 in app.js and look for var apiKey = ... If the apiKey has a value of 'YOUR API KEY' then you should change it and set your Backend Services API key. To do so please follow these steps:
  • Find and click the “Data” link on the right-hand side of the screen.
  • In the Data Navigator (the panel on the right-hand side of the screen), expand “Backend Services”, and then right click on “Grocery List Backend” (or whatever you named your Backend Services project). Select “Properties” from the context menu.
  • In the Properties menu (bottom right-hand side of the screen), find the project's API key and copy it. 
  • Click the “Solution” link on the right-hand side of the screen to switch back to this project's files  h.
  • Open app.js in the scripts folder. 
  • Replace the 'YOUR API KEY' string with your project's API key that you copied to the clipboard.
You can see the steps I am referring to in the attachment.

Also could you check if you have inserted groceries to your database - this is another scenario when the loading indicator could appear without displaying items. If this is indeed the case, then you should check the BackendServices project settings. Go to your project workspace and choose the project (in the tutorial it is named 'Grocery List Backend'). Then in the left-side pane chose the Data option and in the drop down select Types - that's where you can check if the database is actually populated. In case there are no entries perform these steps to add new entries:
  • Click the blue “Create a Content Type” button.
  • Type “Groceries” in the “Type name” input box.
  • Under “Add a field”, type “Name”, leave the dropdown set to “Text”, and then click the blue “Add” button.
  • Click the green “Save” button.
  • Click the blue “Add an item” button.
  • In the right pane, enter a grocery into the text box (e.g. Bananas, Apples, and so forth), and then press the green “Save” button.
  • Repeat steps the last two steps so that you have at least 5 groceries in the list.
If both suggestions don't resolve the issue on your side, please send us the tutorial project you have on your side so we can test its behavior locally. Also, you can compare it with the completed version of the tutorial available here.

Regards,
Toma
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Maxime
Top achievements
Rank 1
answered on 18 Dec 2015, 09:16 AM

I have the same problem. In fact, I paste the following code ( $("#grocery-list").kendoMobileListView({
            dataSource: groceryDataSource,
            template: "#: Name #"
        });)

in the initialize() function (after the var app = ...; line). And all I have is the loading indicator. Can you help me ?

0
Martin Yankov
Telerik team
answered on 22 Dec 2015, 04:29 PM
Hi Maxime,

From your post I couldn't get if you tried the solutions suggested by Toma in the previous post. If you tried them and they didn't fix the problem, please send the tutorial project, so that we can take a look.

Regards,
Martin Yankov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Bruno
Top achievements
Rank 1
answered on 05 Jan 2016, 02:38 PM

Hi guys,

I'm having some trouble on step 3 of this same tutorial, when is said to replace the groceryDataSource declaration, which is:

var groceryDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "https://api.everlive.com/v1/" + MYapiKey + "/Groceries",
                dataType: "jsonp"
            }
        },
        schema: {
            data: function (response) {
                return response.Result;
            }
        }
    });

To this code:

var groceryDataSource = new kendo.data.DataSource({
    type: "everlive",
    transport: {
        typeName: "Groceries"
    }
});

This causes the app to keep on waiting for information, which I suspect happens because I remove the API Key from the infos.

Can you tell me the best way to proceed in this situation?

0
Martin
Telerik team
answered on 07 Jan 2016, 11:36 AM

Hi Bruno,

You can examine the error by running the app in the Telerik Platform Simulator, pressing the F12 key on the keyboard and then selecting the "Console" tab.

In order the DataSource  of type "everlive" to load the data from  the "Groceries" content type properly, make sure you have an Everlive instance, initialized prior to the groceryDataSource variable.

You can read more about the Everlive instance here and about using “everlive” data source here.

The completed code for step 3 in app.js should look like this (use your actual App ID):

(function () {
    var apiKey = "XXXXXXXXXXXXX";
    var el = new Everlive(apiKey);
 
    var groceryDataSource = new kendo.data.DataSource({
        type: "everlive",
        transport: {
            typeName: "Groceries"
        }
    });
 
    function initialize() {
        var app = new kendo.mobile.Application(document.body, {
            skin: "flat",
            transition: "slide"
        });
        $("#grocery-list").kendoMobileListView({
            dataSource: groceryDataSource,
            template: "#: Name #"
        });
        navigator.splashscreen.hide();
    }
 
    window.addView = kendo.observable({
        add: function () {
            if (!this.grocery) {
                navigator.notification.alert("Please provide a grocery.");
                return;
            }
 
            groceryDataSource.add({
                Name: this.grocery
            });
            groceryDataSource.one("sync", this.close);
            groceryDataSource.sync();
        },
        close: function () {
            $("#add").data("kendoMobileModalView").close();
            this.grocery = "";
        }
    });
 
    document.addEventListener("deviceready", initialize);
}());

Let me know if this helps.


Regards,
Martin
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Bruce
Top achievements
Rank 1
answered on 09 Jan 2016, 02:48 PM

I was having the exact same issue as you were experiencing. I had gone through all of the Admin's suggested tips without success. I had finally figured out that the issue was due to the following error: "The server understood the request, but is refusing to fulfill it". I proceeded to change the URL call from a HTTPS to just HTTP. This change resolved the issue. See the final code snippet below:

var groceryDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://api.everlive.com/v1/" + apiKey + "/Groceries",
                dataType: "jsonp"
            }
        },
        schema: {
            data: function (response) {
                return response.Result;
            }
        }
    });

 
 
0
Anton Dobrev
Telerik team
answered on 13 Jan 2016, 05:31 PM

@Bruce

Thanks for your input and reporting your findings.

Perhaps the calls to the Everlive API over HTTPS is not included in the Telerik Platform subscription you are using hence the error?

Also, the jsonp setting as shown in the tutorial (will be reported to the tutorial contributors) is not needed, json will suffice:
var groceryDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "https://api.everlive.com/v1/" + apiKey + "/Groceries",
                            dataType: "json"
                        }
            // ommitted for brevity


Regards,
Anton Dobrev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Sample Applications
Asked by
Gareth
Top achievements
Rank 1
Answers by
Toma
Telerik team
Maxime
Top achievements
Rank 1
Martin Yankov
Telerik team
Bruno
Top achievements
Rank 1
Martin
Telerik team
Bruce
Top achievements
Rank 1
Anton Dobrev
Telerik team
Share this question
or