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
    2595 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. UI for ASP.NET MVC is VS 2017 Ready
  4. 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!
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 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
UI for ASP.NET MVC is VS 2017 Ready