Cascading DropDownLists by Using Transport Binding with AngularJS and WebAPI
Environment
Product | Progress® Kendo UI® DropDownList for jQuery |
Operating System | Windows 10 64bit |
Browser | Google Chrome |
Browser Version | Lastest |
Description
How can I implement cascading DropDownLists which are configured with the transport
data binding, together with WebAPI in an AnguarJS application?
Solution
Configure the child DropDownList by setting the k-cascade-from
and k-cascade-from-field
. As a result, it "becomes aware" of its parent DropDownList from whose fields it will cascade.
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<input kendo-drop-down-list
id="dropdownlist1"
options="dropDownOptions"
k-data-text-field="'Name'"
k-data-value-field="'Id'"/>
<input kendo-drop-down-list
id="dropdownlist1"
k-data-text-field="'Name'"
k-data-value-field="'Id'"
k-cascade-from="'dropdownlist1'"
k-cascade-from-field="'ProductType'"
options="subDropDownOptions"/>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.dropDownOptions = {
optionLabel: "select",
dataSource: {
type: "webapi",
serverFiltering: true,
transport: {
read: {
url: "api/products/get"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
}
}
};
$scope.subDropDownOptions = {
dataSource: {
type: "webapi",
serverFiltering: true,
transport: {
read: {
url: "api/products/getchild"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
}
}
};
})
</script>
---------Controller Implementation-------------
public class ProductsController : ApiController
{
[Route("api/Products/Get")]
[HttpGet]
public DataSourceResult Get([ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)
{
var products = new List<ProductType>
{
new ProductType { Name = "Product 1", Id = 1 },
new ProductType{ Name = "Product 2", Id = 2},
new ProductType { Name = "Product 3", Id = 3 }
};
return products.ToDataSourceResult(request);
}
[Route("api/Products/GetChild")]
[HttpGet]
public DataSourceResult GetChild([ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)
{
var products = new List<Product>
{
new Product { Name = "Sub of Type 1 -1", Id = 1, ProductType= 1},
new Product { Name = "Sub of Type 1 -2", Id = 2 , ProductType= 1},
new Product { Name = "Sub of Type 1 -3", Id = 3 , ProductType= 1},
new Product { Name = "Sub of Type 2 -1", Id = 4, ProductType= 2},
new Product { Name = "Sub of Type 2 -2", Id = 5 , ProductType= 2},
new Product { Name = "Sub of Type 2 -3", Id = 6 , ProductType= 2},
new Product { Name = "Sub of Type 3 -1", Id = 7, ProductType= 3},
new Product { Name = "Sub of Type 3 -2", Id = 8 , ProductType= 3},
new Product { Name = "Sub of Type 3 -3", Id = 9 , ProductType= 3},
};
return products.ToDataSourceResult(request);
}
}