AngularJS + Slider bound properties

4 posts, 0 answers
  1. Dédé
    Dédé avatar
    60 posts
    Member since:
    May 2009

    Posted 14 Oct 2014 Link to this post

    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.
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 16 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. UI for ASP.NET AJAX banner
  4. Dédé
    Dédé avatar
    60 posts
    Member since:
    May 2009

    Posted 16 Oct 2014 in reply to Kiril Nikolov Link to this post

    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

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 20 Oct 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
UI for ASP.NET AJAX banner