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

[Solved] Using a Kendo UI DataSource with IBM Worklight Adapter

4 Answers 101 Views

Data Source

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

John asked on 25 Dec 2014, 09:54 AM

I am building a mobile app using Kendo UI, Angular and IBM Worklight. I am required to use IBM Worklight Adapters to retrieve data from a REST Service. The overall design of the app is following the example at Tutorial: Building applications with Kendo UI Mobile and AngularJS. I can't seem to get the view to get populated with the data from the Worklight Adapter properly. Some code snippets are below. Please advise on the recommended approach to make this work. Thanks.

index.html

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>My Mobile App</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

<!--

<link rel="shortcut icon" href="images/favicon.png">

<link rel="apple-touch-icon" href="images/apple-touch-icon.png">

-->

<link rel="stylesheet" href="css/main.css">

<link href="js/libs/kendoui/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="js/libs/kendoui/js/jquery.min.js"></script>

<script src="js/libs/angular/1.3/angular.min.js"></script>

<script src="js/libs/kendoui/js/kendo.all.min.js"></script>

<script src="js/app.js"></script>

<script src="js/controllers/controllers.js"></script>

<script src="js/controllers/accounts.js"></script>

<script src="js/controllers/metrics.js"></script>

</head>

<body style="display:none;" kendo-mobile-application k-hash-bang="true" ng-app="myApp">

<kendo-mobile-view id="accounts" k-title="'Customer Accounts'" k-layout="'default'" ng-controller="AccountsController">

<kendo-mobile-list-view id="accountslist" class="item-list"

k-template="templates.accountsTemplate" k-data-source="myAccounts.accountsDataSource">

</kendo-mobile-list-view>

</kendo-mobile-view>

<kendo-mobile-layout k-id="'default'">

<kendo-mobile-header>

<kendo-mobile-nav-bar>

<kendo-view-title></kendo-view-title>

<!--                    <kendo-mobile-button class="about-button" k-align="'right'" href="views/about.html">About</kendo-mobile-button> -->

</kendo-mobile-nav-bar>

</kendo-mobile-header>

<kendo-mobile-footer>

<kendo-mobile-tab-strip>

<a href="#!accounts" data-icon="home">Home</a>

<a href="#!" data-icon="organize">View All</a>

<a href="#!" data-icon="more">More</a>

</kendo-mobile-tab-strip>

</kendo-mobile-footer>

</kendo-mobile-layout>

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

<kendo-mobile-button data-item-id="{{dataItem.custno}}">

{{ dataItem.custname }}

</kendo-mobile-button>

</script>

<script src="js/initOptions.js"></script>

<script src="js/main.js"></script>

<script src="js/messages.js"></script>

<script type="text/javascript">

WL.Logger.debug("Loading main page");

</script>

</body>

</html>

controllers.js

myApp

.run(['myAccounts', function(myAccounts){

myAccounts.init();

}])

.service('myAccounts', function() {

this.init = function() {

// the application DataSource

this.accountsDataSource = new kendo.data.DataSource({

data : [{custname: 'JK',custno:'123'},{custname: 'DH',custno:'1234'}]

});

// invoke adapter to get data

var invocationData = {

adapter : 'AccountsAdapter', // adapter name

procedure : 'getAccounts', // procedure name

parameters : [] // parameters if any

};

WL.Client.invokeProcedure(invocationData,{

onSuccess : function(result) {

// REST service results data is in result.invocationResult.customers

},

onFailure : function(result) {

WL.SimpleDialog.show("Error","The service is temporarily not available. Please try again later.",[{text: "OK"}]);

}

});

// observable array that will be used to store accounts that user has selected

this.added = new kendo.data.ObservableArray([]);

// field that will hold reference to the last selected account (used for displaying the details)

this.currentItem = null;

};

this.setCurrentItem = function(id) {

this.currentItem = this.accountsDataSource.get(id);

};

})

.factory('templates', function() {

return {

accountsTemplate: $("#accountsTemplate").html()

};

});

accounts.js

myApp

.controller('AccountsController', ['$scope', 'myAccounts', 'templates',

function($scope, myAccounts, templates) {

$scope.myAccounts = myAccounts;

$scope.templates = templates;

}]);

4 Answers, 1 is accepted

answered on 25 Dec 2014, 12:21 PM

Hello John,

I am not sure I understand at which party exactly you struggle. I noticed that you have a success callback defined for your adapter but you do not do anything inside of it. I assume you are looking for a way to set this data as data for the dataSource. is that right?

If so then you can use the data method of the dataSource:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-data

e.g.

this.accountsDataSource = new kendo.data.DataSource({

data : [{custname: 'JK',custno:'123'},{custname: 'DH',custno:'1234'}]

});

// invoke adapter to get data

var invocationData = {

adapter : 'AccountsAdapter', // adapter name

procedure : 'getAccounts', // procedure name

parameters : [] // parameters if any

};

WL.Client.invokeProcedure(invocationData,{

onSuccess : function(result) {

this.accountsDataSource.data(result.invocationResult.customers)

// REST service results data is in result.invocationResult.customers

},

onFailure : function(result) {

WL.SimpleDialog.show("Error","The service is temporarily not available. Please try again later.",[{text: "OK"}]);

}

});

If this is not what you are looking for please elaborate on your issue.

Kind Regards,
Petur Subev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 26 Dec 2014, 02:27 PM

Thanks for the response. I had done what you suggested with varying degrees of success. Worked ok in Chrome. Didn't work in Firefox or when running in XCode. I somehow suspect that there is a timing issue here. Maybe the interface to the Worklight server isn't always initialized prior to executing the adapter.

I am going to work with this some more. Maybe put the <script> tags that perform the angular work(and call the adapter) at the end of the html file. I know that you support Kendo UI, and not Worklight. Do you have any suggestions about how to structure the code when retrieving remote data that could possibly take some time to retrieve? Thanks.