Changewheel functionality How it works?

Question

First of all I want share my appreciation for the amazing work done with this snippet (it's really really a cool tool).

I am trying to use mobiscroll in an app that I am currently developing. I love how easy is to use and customize the mobiscroll tool.

What I really find just obscure, is how use the functionality changeWheel. I tried many things but never with success.

What I am trying to accomplish is to change the values of the first wheel (change completely and regenerate the first wheel), when in my second wheel I select (actually what I want is an on change event) one of the two parameters present.

I build up a function that create the arrays for the two wheels, and that change array of the first wheel relatively to the index of the second wheel returned. (I can see that the function works, and that it generate the exact values for the wheels).

How then I can implement this with the onchange event on the inst, using the function changewheel???

Is this function changewheel suppose to do what I am looking for?

To be very clear, think as an example:

first wheel weight of a person second wheel unit of measurement (kg or Lbs)

If I change on the spot Lbs to Kg, I want that the first wheel reflect the changes (updating the values available) - if for example i set the limit weight between 0 and 80kg the correspondent value in lbs need to be between 0 and 177lbs (the whole conversion is handled separately with another customized function, and it works exactly as I want).

I can't figure out how instead implement the changewheel event....an example or some more deep explanation will be really useful.

Thank you so much Best Dinuz

Answer 1

here goes a simple explanation, if you want to update the values of a diferent whell you need to pass the instance of the mobiscroll and call the method options

$(function(){
         var filtersMetrics = [{}];
        var wheelPosMetrics = []
        var wheelPosFunc1 = [];
        var wheelPosFunc = [];

        wheelPosMetrics[0] = "Connection";
        wheelPosMetrics[1] = "Shared";
        wheelPosMetrics[2] = "Deleted";

        filtersMetrics[0]['Metrics']=wheelPosMetrics;

        wheelPosFunc1[0] = "Count";

        wheelPosFunc[0] = "Count";
        wheelPosFunc[1] = "Sum";
        wheelPosFunc[2] = "Avg";

        filtersMetrics[0]['Func']=wheelPosFunc1;


        var metricsScroller = $("#select").mobiscroll().scroller({
            theme : 'android',
            display : 'inline',
            mode: 'scroller',
            wheels: filtersMetrics,
            rows: 3,
            'onChange' : function(v, i , e){


                if(v[0]==1){
                    filtersMetrics[0]['Func']=wheelPosFunc;
                    metricsScroller.mobiscroll('option', 'wheels', filtersMetrics); 
                }else{
                    filtersMetrics[0]['Func']=wheelPosFunc1;
                    metricsScroller.mobiscroll('option', 'wheels', filtersMetrics);
                }



            }
        });

});

I have used the 2.5 version

Answer 2

I also wasn't able to get changeWheel to work, but I found a workaround (I'm using Mobiscroll v2.15.1).

In the onChange–Handler you can set the default values dynamicaly:

.
.
.
onChange: function (values) {

   // here your logic for the current values            

   if (/*here your condition*/) {

      // Example for three wheels:      
      var curWheel = ["1", "2", "3"];

      // set the default values
      $(/*your element*/).mobiscroll("setArrayVal", curWheel, true);
    }
},
.
.
.