Hi,
I´m looking for some example like the Document bellow "how to access the OpenEdge backend using the JSDO from the Kendo UI Grid component in Kendo UI for Angular 2", but I need an example with AngularJS 1.5.x. What´s the best way to do it?
https://community.progress.com/community_groups/mobile/m/documents/3124
I created the example bellow, but I didn´t know that is the best way to use it.
<!DOCTYPE hml>
<html ng-app="customersApp">
<head>
<link rel="stylesheet" href="kendo.cdn.telerik.com/.../kendo.common-material.min.css" />
<link rel="stylesheet" href="kendo.cdn.telerik.com/.../kendo.material.min.css" />
<link rel="stylesheet" href="kendo.cdn.telerik.com/.../kendo.material.mobile.min.css" />
<script src="kendo.cdn.telerik.com/.../script>
<script src="kendo.cdn.telerik.com/.../script>
<script src="kendo.cdn.telerik.com/.../script>
<script src="oemobiledemo.progress.com/.../script>
<script src="oemobiledemo.progress.com/.../script>
<script src="oemobiledemo.progress.com/.../script>
</head>
<body>
<div ng-controller="CustomersController">
Search <input type="text" ng-model="searchText" />
{{searchText}}
<br />
<h3>Customers:</h3>
<table>
<tr ng-repeat="cust in customers | filter:searchText">
<td>{{ cust.CustNum}}</td>
<td>{{ cust.Name}}</td>
<td>{{ cust.Phone}}</td>
</tr>
</table>
<br>
<kendo-grid options="mainGridOptions" ng-delay="mainGridOptions"></kendo-grid>
</div>
<script>
var app = angular.module('customersApp', ["kendo.directives"]);
var jsdo;
session = new progress.data.Session();
session.login("oemobiledemo.progress.com/MobilityDemoService", "", "");
session.addCatalog( 'oemobiledemo.progress.com/.../MobilityDemoService.json' );
jsdo = new progress.data.JSDO({ name: 'dsCustomer' });
jsdo.subscribe('AfterFill', onAfterFillCustomers, this);
function onAfterFillCustomers(jsdo, success, request) {
jsdo.deferred.resolve(jsdo.getData());
}
app.factory('customersFactory', function($q) {
var factory = {};
factory.getCustomers = function(callback) {
var deferred = $q.defer();
jsdo.deferred = deferred;
jsdo.fill();
return deferred.promise;
};
return factory;
});
app.controller('CustomersController', function($scope, customersFactory) {
customersFactory.getCustomers().then(function(customers) {
$scope.customers = customers;
$scope.mainGridOptions = {
dataSource: {
data: $scope.customers,
pageSize: 5
},
sortable: true,
pageable: true,
columns: [{
field: "CustNum",
title: "CustNum",
width: "50px"
},{
field: "Name",
title: "Name",
width: "150px"
}]
};
});
});
</script>
</body>
</html>
Best Regards,
William Pavei Antero
Hello William,
The sample code that you looked at, shows how to use the JSDO directly with Kendo UI and Angular 2.
The JSDO is used directly because a datasource is not present with Angular 2.
Please notice that the sample code uses the synchronous version of the Session object, login() and addCatalog().
Here is a link to a sample program that uses asynchronous versions: JSDOSession, login(), and addCatalog():
oemobiledemo.progress.com/.../example013.html
oemobiledemo.progress.com/.../example014.html
oemobiledemo.progress.com/.../
With Angular 1.5.x, you can use the Kendo UI DataSource and specify "jsdo" as the datasource type (this is sometimes called the JSDO dialect for the Kendo UI DataSource).
The following link provides a sample on using the Kendo UI DataSource and Angular 1.5.x.
You should be able to adapt this example and change type from "odata" to "jsdo".
Please let me know if you have comments or questions.
I hope this helps,
Edsel