Kendo UI Angular JS and AutoComplete with a service

Question

I'm making an Angular App and I'm starting to use some of the Kendo UI controls. I'm having some issues wiring up the AutoComplete control. I would like to use a factory that will return the list of "auto complete" values from my database.

I have iincluded the auto complete control and I'm trying to use the k-options attribute:

<input kendo-auto-complete ng-model="myFruit" k-options="FruitAutoComplete"  />

In my controller the following hard coded list of fruits work:

 $scope.FruitAutoComplete = {
            dataTextField: 'Name',
            dataSource:[
                { id: 1, Name: "Apples" },
                { id: 2, Name: "Oranges" }
            ]
}

When I move this over to use my factory I see it calling and returning the data from the factory but it never get bound to the screen.

 $scope.FruitAutoComplete = {
            dataTextField: 'Name',
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: function () {
                        return    FruitFactory.getYummyFruit($scope.myFruit);
                    }
                }
            })
        }

I end up with the request never being fulfilled to the auto complete.

My factory is just returning an array of fruit [ my Fruit Factory Code:

     getYummyFruit: function (val) {
                    return $http.get('api/getFruitList/' + val)
                        .then(function (res) {                          
                            var fruits= [];
                            angular.forEach(res.data, function (item) {
                                fruits.push(item);
                            });
                            return fruits;
                        });
                }

Sizar

Can you show FruitFactory code ? Any errors ? – Foredeck

I just updated the original post No errors from the FruitFactory it returns an array of fruits. – Sizar

$http.get actually returns a $promise and not data. – Foredeck

also I noticed your read {} I think it should be read { data: } – Foredeck

Kendo API Documentation:docs.telerik.com/kendo-ui/api/web/autocomplete – Sizar

Answer 1

Here is your solution

http://plnkr.co/edit/iOq2ikabdSgiTM3sqLxu?p=preview

For the sake of plnker I did not add $http (UPDATE - here is http://plnkr.co/edit/unfgG5?p=preview with $http) UPDATE 2 - http://plnkr.co/edit/01Udw0sEWADY5Qz3BnPp?p=preview fixed problem as per @SpencerReport

The controller

$scope.FruitAutoCompleteFromFactory = {
            dataTextField: 'Name',
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: function (options) {
                        return  FruitFactory.getYummyFruit(options)

                    }
                }
            })
        }

The factory -

factory('FruitFactory', ['$http',
  function($http) {
    return {
      getYummyFruit: function(options) {
        return $http.get('myFruits.json').success(
          function(results) {
            options.success(results);
          });

      }
    }
  }

Foredeck

Thank you so much for your help. I didn't realize that I needed to 'populate' the options.success object. This is a great example of how to get the kendo autocomplete working in angular. Thanks Again ! – Sizar

Thank you - Hope it also helps others. I will highlight the options.success. – Foredeck

Thanks for this example. However I don't understand why you're passing in the myFruits array to the getYummyFruit function. Could you explain what the purpose is here? – Tallia