AngularJS + Slider bound properties

[Dédé]

Hi,

I am trying to use the Slider widget with AngularJS.
I want to bind the enabled state of the slider to my scope.

I have used :

<div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl">
        <div style="position: relative; width: 300px; height: 300px; overflow: visible; margin: 0 auto;">

            <div kendo-slider ng-model="width" k-tooltip="{ enabled: false }"
                style="position: absolute; left: 25px; bottom: 0; width: 270px;"></div>

            <div kendo-slider ng-model="height" k-tooltip="{ enabled: false }" k-orientation="'vertical'"
                style="position: absolute; bottom: 25px; left: 0; height: 270px;" k-enabled="{{vEnabled}}"></div>

            <img style="position: absolute; left: 60px; bottom: 60px;
            width: {{100 + width * 10}}px;
            height: {{100 + height * 10}}px;"
            src="../content/shared/images/foods/200/72.jpg" />
          
        </div>
      <input type="checkbox" ng-model="vEnabled" />
vEnabled:{{vEnabled}}
    </div>
    <style scoped>
        .demo-section {
            width: 300px;
        }
    </style>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ]);
  function MyCtrl($scope) {
      $scope.width = 0;
      $scope.height = 0;
    $scope.vEnabled = true;
  }
</script>

The enabled state bound to "vEnabled" is correctly taken at startup, but when changed is not live.
Do I have a correct usage ?

Thanks.

[Kiril Nikolov]

Hello Damien,

The Kendo UI Slider does not have enabled configuration property, so there is no way to bind to it. As you can see in our documentation there is no such property:

http://docs.telerik.com/kendo-ui/api/javascript/ui/slider

The state of the widget can be controlled via the enabled method like this:

http://dojo.telerik.com/ijal

Regards,
Kiril Nikolov
Telerik

 

 

[Dédé]

Hi,

So why the slider handles the k-enabled="{{vEnabled}}" at startup ?

I mean if my $scope initialisation has vEnabled as true, slider is enabled, but with vEnabled as false, slider start disabled ?
This is why I thought there was a bindable property...

A workaround that can be done would be to add :
$scope.$watch("vEnabled", function(newVal, oldVal) {
      $scope.slider.enable(newVal);

But it seams that the slider object is initialized at a later time (leading to errors).
So the working workaround is :

$timeout(function(){
    $scope.$watch("vEnabled", function(newVal, oldVal) {
      $scope.slider.enable(newVal);
      });}, 10);

So, to have a "bindable enabled property", do you think there can be a better solution ?

Thanks

[Kiril Nikolov]

Hello Damien,

The default value for the enabled property is true. As for your workaround - the widget is initialized with a timeout statement, so in order to add the $watch you will need to implement a small timeout as well.

Regards,
Kiril Nikolov
Telerik