Preselect Items on Load
Important
The approach described in this article does not work with primitive values. This means that the values have to be of the complex type (objects). For more details on this issue, refer to:
The following example demonstrates how to preselect items in the Kendo UI MultiSelect without loading the whole source in AngularJS. To ensure the proper functioning of the example, run it in the Dojo.
<script src="https://cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/jquery.linq.min.js"></script>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div style="padding:10px">
<p>Pre-select items using static initial data:</p>
<select
kendo-multi-select
k-data-source="countryNames"
k-data-text-field="'ProductName'"
k-data-value-field="'ProductID'"
k-ng-model="products"
k-options="selectOptions"
k-value-primitive="false"></select>
<br/>
<p>Pre-select items using data loaded via ajax:</p>
<select
kendo-multi-select
k-data-source="productDataSource"
k-data-text-field="'ProductName'"
k-data-value-field="'ProductID'"
k-options="secondOptions"
k-ng-model="products2"
k-rebind="products2"></select>
</div>
</div>
<style scoped>
.demo-section {
width: 400px;
}
.demo-section p {
padding: 5px 0;
}
</style>
</div>
<script>
var kms;
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function ($scope,$http){
$scope.countryNames = {
type: "odata",
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
};
$scope.selectOptions = {
autoBind: false
};
$scope.products = [
{ ProductName: "Not Loaded 1", ProductID: 1 },
{ ProductName: "Not Loaded 2", ProductID: 11 }
];
$scope.productDataSource = {
type: "odata",
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
};
$scope.secondOptions = {
autoBind: false,
valuePrimitive: false
};
$scope.products2 = [];
function LoadValues(valuesToSelect) {
var filter = $.Enumerable.From(valuesToSelect)
.Select(function(x) { return "(ProductID eq "+x+")" })
.ToArray().join("or");
var success = function(data, status, headers) {
var values = $.Enumerable.From(data.d)
.Select(function(x) { return {ProductName: x.ProductName, ProductID: x.ProductID, } })
.ToArray();
$scope.secondOptions = {
autoBind: false,
valuePrimitive: false
};
$scope.products2 = values;
};
$scope.filter = filter;
$http.get('https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products?$filter='+filter).success(success);
}
setTimeout(function() {
LoadValues([3, 4]);
});
});
</script>
See Also
- MultiSelect JavaScript API Reference
- How to Cascade from DropDownList
- How to Filter Values in Widgets Sharing the Same Data
- How to Preselect Items Using MVVM Binding
- How to Select All Values with Single Selection
- How to Use MultiSelect with Bootstrap Modal Window
- How to Wire Blur Event of the Filter Input
For more runnable examples on the Kendo UI MultiSelect, browse its How To documentation folder.