Bind AutoComplete for AngularJS with WebAPI

Environment

Product	Progress Kendo UI AutoComplete
Operating System	Windows 10 64bit
Browser	Google Chrome
Browser Version	61.0.3163.100

Description

How can I bind a Kendo UI AutoComplete to the WebAPI in an AngularJS scenario?

Solution

Set the dataSource type to webapi and the transport read URL to the method in your controller.

<div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl">
        <h4>Autocomplete</h4>
        <input kendo-auto-complete  
               k-data-text-field="'Name'"
               k-data-value-field="'Id'"
               options="autoCompleteOptions" style="width: 21%;" />

    </div>
</div><script>
  angular.module("KendoDemos", [ "kendo.directives" ])
          .controller("MyCtrl", function($scope){
              $scope.autoCompleteOptions = {
                  dataSource: {
                      type: "webapi",
                      serverFiltering: true,
                      transport: {
                          read: {
                              url: "/api/products"
                          }
                      },
                      schema: {
                          data: "Data",
                          total: "Total",
                          errors: "Errors"
                      }
                  }
              };

          })              
</script>

----------- Controller implementation
// GET api/values
  public DataSourceResult Get([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)
  {            
      var products = new List<Product>
      {
          new Product { Name = "Product 1", Id = "1" },
          new Product { Name = "Product 2", Id = "2" },
          new Product { Name = "Product 3", Id = "3" }
      };

      return products.ToDataSourceResult(request);
  }