UPDATE: I have provided a link to reproduce the issue here
RELATED: A similar issue with Kendo UI Map was discussed in another one of my questions, which might offer some insights to help resolve this one! This question has both a failing and a working version.
In my Angular single-page application, I am utilizing Kendo UI's DataSource, DropDownList, and Map components.
I am attempting to use the same DataSource object for both the DropDownList and the Map. However, the behavior of the Map component is proving to be quite unpredictable.
- When I place the DropDownList before the Map in the template, only the DropDownList is populated. Upon inspecting the network traffic, it is evident that only one request is being made. However, if I place the Map first, both components are populated with two requests being made.
- When I do not utilize any promises in
transport.read, and simply calloptions.successimmediately with a static value, everything functions as expected with two calls being made.
I have been struggling with this issue throughout the work day, so any assistance would be greatly appreciated.
The data source service:
m.factory('ourDataSource', function(foo, bar, baz) {
return new kendo.data.DataSource({
transport: {
read: function(options) {
foo().then(function (result) {
return bar(result);
}).then(function (result) {
return baz(result);
}).then(function (result) {
options.success(result);
}).catch(function (err) {
options.error(err);
});
}
}
});
});
The controller:
m.controller('ourController', ['ourDataSource', function(ourDataSource) {
// Assign the data source to the dropdownlist
this.ourDataSource = ourDataSource;
// Configure the map layers
this.mapLayers = [{
type: 'tile',
urlTemplate: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/#= zoom #/#= y #/#= x #',
}, {
type: 'marker',
dataSource: ourDataSource, // Same data source as above
locationField: 'Position',
titleField: 'Title'
}];
}]);
The view:
<div ng-controller="ourController as ctrl">
<select kendo-drop-down-list
k-data-text-field="'Title'"
k-data-value-field="'Title'"
k-data-source="ctrl.ourDataSource"></select>
<div kendo-map
k-zoom="2"
k-center="[1, 1]"
k-layers="ctrl.mapLayers">
</div>
</div>
What am I overlooking here?