New to Kendo UI for jQuery? Download free 30-day trial

Perform DropDownList Selection in AngularJS Only If Confirmed

Environment

Product Progress® Kendo UI® DropDownList for jQuery

Description

How can I cancel (or not) the actual selection of an item in the Kendo UI DropDownList depending on a selected option from a Kendo UI confirmation Dialog and implement the approach in AngularJS applications?

Solution

Save the old value and, then, revert back to it. Revert the value if the Cancel option was selected.

<div id="example" ng-app="KendoDemos">
  <div class="demo-section k-content" ng-controller="MyCtrl">
    <h4>Static data</h4>
    <select kendo-drop-down-list="catDropdown" k-options="catDropdownOptions"></select>
    <div kendo-dialog="dialog"
         k-title="'Select option'"
         k-on-open="dialogVisible = true"
         k-on-close="dialogVisible = false"
         k-width="300"
         k-height="150"
         k-actions="dialogActions"
         k-modal="true"
         k-visible="false">
      <p>Do you want to switch to category <strong ng-bind="text"></strong>?<p>
    </div>
  </div>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
    .controller("MyCtrl", function($scope, $window){            
    function onCancel(e) {
      $scope.catDropdown.value($scope.oldValue);
    }
    $scope.dialogActions = [{
      text: 'Cancel',
      action: onCancel
    }, {
      text: 'OK',
      primary: true
    }];
    $scope.text = '';
    $scope.oldValue = '';
    $scope.catDropdownOptions = {
      dataTextField: 'desc',
      dataValueField: 'id',
      optionLabel: 'Select a Category',
      dataSource: [
        {id:1, desc:'A'},
        {id:2, desc:'B'},
        {id:3, desc:'C'},
        {id:4, desc:'D'}
      ],
      select: function (e) {
        $scope.oldValue = e.sender.value();
        if (e.sender.value() != e.dataItem.id) {
          $scope.text = e.dataItem.desc;
        }
        $scope.dialog.open();
      },
    };
  })
</script>

See Also

In this article