2

I am working on an hexagonal pattern generator that uses KendoUI widgets as GUI.

I am trying to implement a Randomize() function that would animate the slider handles to a random position. The function is called when clicking the Randomize! button. This should generate a slide or change event on the Kendo slider which in turn would fire the changeYcomp(e) callback that calls the init() function updating the pattern.

Markup for the slider:

 <div class="sliderwrapper" id="yslider">
                            <label for="ycompSlider">Y variation</label>
          <input id="ycompSlider" class="slider" />
 </div>

Script for the callback:

function changeYcomp(e) {
    kendoConsole.log("New slide value is: " + e.value);
    ycomp = e.value;
    init();
}

Parameters assignment for the slider:

$("#ycompSlider").kendoSlider({
                                slide: changeYcomp,
                                change: changeYcomp,
                                min: -10,
                                max: 10,
                                smallStep: 1,
                                largeStep: 10,
                                value: 0
                            });

Randomize function:

function Randomize() {
    console.log("Randomizing!")
    $("#yslider .k-draghandle").animate({
      left: Math.round(Math.random()*130-7)
    });

}

Unfortunately neither changing the .k-draghandle position via CSS animation, nor changing any of the slider's HTML attributes fires any event.

I am assuming that the slider is listening for mouse events only.

For now the only alternative would be to manage the slider handle position and the updating function separately by adding step functionality on the animation.

I would like to avoid this as it would either force some redesign or involve duplication.

Help appreciated.

HappyTorso
  • 327
  • 1
  • 5
  • 14

1 Answers1

9

You can use the trigger() function on a widget to fire its events:

$("#yslider").data("kendoSlider").trigger("slide", { value: 123 });

The caveat is that you have to specify the event object that it passes to the callbacks. Fortunately the event for slide only contains the value property.

So you can do:

var slider = $("#slider").data("kendoSlider");
slider.value(5);
slider.trigger("slide", { value: slider.value() });

See this jsFiddle for a working example.

CodingWithSpike
  • 42,906
  • 18
  • 101
  • 138
  • 1
    Thank you! I didn't find that method in the slider documentation and I didn't think of looking up prototype methods. – HappyTorso Dec 08 '12 at 17:57
  • Now the only remaining issue is that I'm using the step callback of JQuery.animate() to fire the trigger method for each step of the value change and doing so on 4 sliders seems to hog down the CPU as the init() method has to redraw the canvas multiple times per step. – HappyTorso Dec 08 '12 at 18:06
  • Yeah I could see that causing some slowness. Would it be possible to just do the `.trigger()` once at the end of the `.animate()`? – CodingWithSpike Dec 09 '12 at 16:11
  • Yes, that would be indeed possible, but you would only see the slider moving without the visual feedback of the pattern changing. I'll try to figure out a way to call the init() method only once per step even though I have 4 concurring animate() functions working. – HappyTorso Dec 09 '12 at 16:16