How do I make the multi select default to the first value if there is only one row in the datasource view when the datasource is filtered
In angular i have tried many things, last thing I tried was a watch. Here is code that is not working where ddlRegion is my angular multiselect
$scope.$watch("dsRegions.view().length",
function handledsRegionsChange(newValue, oldValue) {
values = [];
if (($scope.dsRegions.view().length == 1) && ($scope.selectedRegion == null)) {
values[0] = $scope.dsRegions.view()[0].RegionId.toString()
$scope.selectedRegion = $scope.dsRegions.view()[0].RegionId;
$scope.ddlRegion.value(values);
}
}
);
3 Answers, 1 is accepted
Hello Patrick,
My suggestion is to use the dataBound event of the Kendo UI MultiSelect widget. Please refer to the http://dojo.telerik.com/UhAsU example that shows this approach in action.
Regards,Boyan Dimitrov
Telerik
Rank 1
Thanks Boyan, I am not able to figure this out from the sample. I tried to update the sample to display items 4 and 7 when there are 77 products but the code does not seem to work. An alert is fired so the 77 matches but the setting the scope variable is not appearing to take in the data bound event. Do you have any suggestions? In my case i want to select the first record if there is only one record.
My attempt at following your suggestion is below.
<!DOCTYPE html><html><head> <base href="http://demos.telerik.com/kendo-ui/multiselect/angular"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css" /> <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css" /> <script src="//kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script> <script src="//kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script></head><body><div id="example" ng-app="KendoDemos"> <div class="demo-section k-content" ng-controller="MyCtrl"> <h4>Select product</h4> <select kendo-multi-select="multiSelect" k-options="selectOptions" k-ng-model="selectedIds"></select> <p ng-show="selectedIds.length" style="padding-top: 1em;">Selected: {{ selectedIds }}</p> </div></div> <script> angular.module("KendoDemos", [ "kendo.directives" ]) .controller("MyCtrl", function($scope){ $scope.selectOptions = { placeholder: "Select products...", dataTextField: "ProductName", dataValueField: "ProductID", valuePrimitive: true, autoBind: false, dataBound: function(e) { console.log(this.dataSource.view().length); if (this.dataSource.view().length == 77) {$scope.selectedIds = [ 4, 7 ]; alert('There are 77 products'); } }, dataSource: { type: "odata", serverFiltering: true, transport: { read: { url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products", } } } }; //$scope.selectedIds = [ 4, 7 ]; })</script></body></html>Hello Patrick,
There is an error with because $scope.selectedIds because is not defined (it is undefined) so trying to access the length of undefined throws an error. To avoid initial selection the $scope.selectedIds should be defined as empty array. I modified the http://dojo.telerik.com/EwAFA example in order to work with ng-show.
Regards,Boyan Dimitrov
Telerik