This is a migrated thread and some comments may be shown as answers.

How do I make the multi select default to the first value if there is only one when the datasource is filtered

3 Answers 1289 Views

MultiSelect

This is a migrated thread and some comments may be shown as answers.

Patrick asked on 21 Apr 2016, 01:35 AM

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

answered on 23 Apr 2016, 06:39 AM

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>

<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>