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);
}