[progress Communities] [progress Openedge Abl] Wiki Page: Kendo Ui Builder Sample Using...

[Ricardo Perdigao]

Here is a more complex sample integrating with Google Maps using Kendo UI Builder. Video explaining the sample: (Please visit the site to view this video) HTML (can placed inside a CustomHTML component or in the TopSection.html file): onshow code for the controller.public.js (please change Google API keys to your own): onShow($scope) { console.log('Show'); this.scope = $scope; $scope.vm.$window.initMap = function(initMap) { var mapProp = {center:new google.maps.LatLng(0,0), zoom:6, }; this.empMap = new google.maps.Map(document.getElementById("gmap"),mapProp); angular.element('#employeeGrid').data("kendoGrid").select('tr[data-uid]:eq(0)'); }; } onEmployeeChange code for the controller.public.js: onEmployeeChange on controller.public.js for your view: onEmployeeChange($scope) { var dataGrid = this.$components.employeeGrid.widget; var selectedLine = dataGrid.select(); var lineData = dataGrid.dataItem(selectedLine); var empAddress = lineData.Address + ", " + lineData.Address2 + ", " + lineData.City + ", " + lineData.State + ", " + lineData.PostalCode; if (typeof geocoder === 'undefined') { var geocoder = new google.maps.Geocoder(); } geocoder.geocode( { "address": empAddress }, function(results, status) { if (status == google.maps.GeocoderStatus.OK && results.length > 0) { this.empMap.setCenter(results[0].geometry.location); if (angular.isDefined(this.marker)) { this.marker.setPosition(results[0].geometry.location); this.empMap.panTo(results[0].geometry.location); } else { this.marker = new google.maps.Marker({ map: this.empMap, position: results[0].geometry.location }); } } }); } } Hope it helps! Ricardo Perdigao

Continue reading...