Change Tick labels on a slider generated by helper

4 posts, 0 answers
  1. stephane
    stephane avatar
    10 posts
    Member since:
    Jan 2010

    Posted 16 Jun 2014 Link to this post

    I am succeding in changing tick labels on a slider called on javascript

      <script>
            $(document).ready(function () {
     
                var slider = jQuery("#slider").kendoSlider({
                    increaseButtonTitle: "Right",
                    decreaseButtonTitle: "Left",
                    showButtons: true,
                    min: 1,
                    max: 4,
                    largeStep: 1,
     
                    tooltip: {
                        enabled: false
                    },
                    orientation: "horizontal"
                });
     
                var steps = {};
                steps[0] = 'very low';
                steps[1] = 'medium';
                steps[2] = 'hight';
              
     
                var sliderItems = slider.siblings(".k-slider-items");
                 
                $.each(steps, function (index, value) {
                    var item = sliderItems.find("li:eq(" + (index) + ")");
                    item.attr("title", value);
                    item.find("span").text(value);
                });
     
            });
     
        </script>
     
     <div id="slider">
     
    </div>

    Work!
    But, I would like to do the same trick on a Slider generated by an asp helper

    @(Html.Kendo().Slider()
                          .Name("nameSlider")
                          .IncreaseButtonTitle("Right")
                          .DecreaseButtonTitle("Left")
                          .Min(0)
                          .Max(3)
                          .SmallStep(1)
                          .Value(0)
                          .Orientation(SliderOrientation.Horizontal)
                          .HtmlAttributes(new { @class = "balSlider" })
                          .Deferred()
    )
     
     
      @Html.Kendo().DeferredScripts()
     
     <script>
     
    $(document).ready(function () {
     
            var selectedSlider = $("#nameSlider").data("kendoSlider");
     
             var sliderItems = selectedSlider.siblings(".k-slider-items");
     
             $.each(steps, function (index, value) {
                    var item = sliderItems.find("li:eq(" + (index) + ")");
                    item.attr("title", value);
                    item.find("span").text(value);
                });
     
        });
     </script>

    unfortunately, it does not work.

    Any ideas?



  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2621 posts

    Posted 18 Jun 2014 Link to this post

    Hi Stephane,

    I believe the issue in the MVC version is caused by you are getting a reference to the slider widget, not to its input element. Please try the following: 
    $(document).ready(function () {
      var steps = {};
       steps[0] = 'very low';
       steps[1] = 'medium';
       steps[2] = 'hight';
          
       var selectedSlider = $("#nameSlider");
       var sliderItems = selectedSlider.siblings(".k-slider-items");
     
       $.each(steps, function (index, value) {
          var item = sliderItems.find("li:eq(" + (index) + ")");
          item.attr("title", value);
          item.find("span").text(value);
      });
    });


    Regards,
    Iliana Nikolova
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. stephane
    stephane avatar
    10 posts
    Member since:
    Jan 2010

    Posted 27 Jun 2014 in reply to Iliana Nikolova Link to this post

    Thanks for answer Iliana !
    yes I am not getting a reference to input element cause for moment, it is not possible with Kendo to change ticks label on slider, so i found a "hack" to change styles around input.



    <div class="k-widget k-slider k-slider-horizontal balSlider k-state-default">
        <div class="k-slider-wrap k-slider-buttons">
            <a class="k-button k-button-increase"><span class="k-icon k-i-arrow-e" title="Right">Right</span></a>
            <a class="k-button k-button-decrease"><span class="k-icon k-i-arrow-w" title="Left">Left</span></a>
            <ul class="k-reset k-slider-items"><li class="k-tick k-first k-tick-large" role="presentation" style="width: 39px;" title="1"><span class="k-label">1</span></li>
                <li class="k-tick k-tick-large" role="presentation" style="width: 79px;" title="2"><span class="k-label">2</span></li>
                <li class="k-tick k-tick-large" role="presentation" style="width: 78px;" title="3"><span class="k-label">3</span></li>
                <li class="k-tick k-tick-large" role="presentation" style="width: 78px;" title="4"><span class="k-label">4</span></li>
                <li class="k-tick k-tick-large" role="presentation" style="width: 79px;" title="5"><span class="k-label">5</span></li>
                <li class="k-tick k-tick-large" role="presentation" style="width: 78px;" title="6"><span class="k-label">6</span></li>
                <li class="k-tick k-last k-tick-large" role="presentation" title="7" style="width: 40px;"><span class="k-label">7</span></li>
            </ul>
            <div class="k-slider-track" style="width: 470px;">
                <div class="k-slider-selection" style="width: 157px;"><!-- --></div>
                <a href="#" class="k-draghandle" title="drag" role="slider" aria-valuemin="1" aria-valuemax="7" aria-valuenow="3" tabindex="0" data-role="draggable" style="left: 150px;" aria-valuetext="3">Drag</a>      
            </div>
            <input id="sliderTimePush" class="balSlider" value="0" type="text" data-role="slider"></div>
    </div>



    Unfortunately getting a reference on input does not help.


    If anybody has an idea to Change Tick labels on a slider generated by helper, it would help me!
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2621 posts

    Posted 01 Jul 2014 Link to this post

    Hi Stephane,

    I tested this scenario and was able to change tick labels on Kendo UI Slider for ASP.NET MVC using the following code snippet (screencast capture): 
    $(function () {
       var slider = $("#nameSlider").data("kendoSlider");
       var steps = [];
       steps[0] = 'very low';
       steps[1] = 'medium';
       steps[2] = 'hight';
     
       var largeTickItems = slider.wrapper.find(".k-tick-large");
       $.each(largeTickItems, function (index) {
          var step = steps[index];
          var children;
          $(this).attr("title", step).children().html(step);
       });
    });
    Please give it a try and let me know if this helps.

    Regards,
    Iliana Nikolova
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top