Edit this page

Perform DropDownList Selection in AngularJS Only If Confirmed

Environment

Product Progress Kendo UI DropDownList

Description

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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy