Validation on infinite wheel for Scroller Controller

#1

Hello,

I want to implement infinite wheel scroller on my angular project.
How can I perform validation to disable the value of infinite wheel scroller.
Can anyone give some implementation on infinite wheel validation to disable the value

this.scrollerOptions = {
  showLabel: true,
  display: 'inline',
  wheels: [
    [{
		.....
	},
	{ // An infinite wheel
      label: 'Label 4',
      circular: false,
      data: function (i) {
        return {
          value: i,
          display: i.toString()
        }
      },
      getIndex: function (value) {
        return value;
      }
    }]
  ],
  validate: (event, inst) => {
	const disabledInfiniteWheelArray = [];
	
	// TO-DO
	// HOW to DO Validation based on some selection of other wheel
	// I want to disable some entry of infinite wheel scroller
	
	return {
            disabled: [ [], disabledInfiniteWheelArray]
          };
  }
}

//https://docs.mobiscroll.com/angular/scroller#opt-wheels - to Create infinite wheel

#2

Hi @CNB_Procurement :wave:

This validation depends on, by what logic do you want to disable wheel values.

We have a similar demo example, where you can see a custom logic to disable values:

#3

Hi @Elod,

In this example we have fixed data which is Bind to wheel. My requirement is “I Need validation for infinite wheel”

Code spinet copied from your example - Please refer my comment line 5

Validation (event, inst) => {
            const values = event.values;
            const disabledValues = [];

 // HERE WE KNOW THE LENGTH OF WHEEL (toValues wheel) FOR VALIDATION 
// BUT INCASE OF INFINTE WHEEL WE DONT KNOW THE WHEEL LENGTH
       // [PLESE CHECKOUT MY CODE IN QUESTION ABOVE]
            for (let i = 0; i < toValues.length; ++i) {
                if (toValues[i].value <= values[0]) {
                    disabledValues.push(toValues[i].value);
                }
            }

            return {
                disabled: [
                    [], disabledValues
                ]
            };
        }
#4

Hi @CNB_Procurement :wave:

In the validate function, we always know what the selected value is. Only x values ​​are displayed on the wheel at a time and can be validated with a cycle. In this example, the even numbers are disabled, to see how it works:

wheels: [
    [{
        circular: false,
        data: fromValues,
        label: 'From'
    }, {
        circular: false,
        data: toValues,
        label: 'To'
    },
    { // An infinite wheel
        label: 'Label 3',
        circular: false,
        data: function (i) {
            return {
                value: i,
                display: i.toString()
            };
        },
        getIndex: function (value) {
            return value;
        }
    }
    ]
],
...
validate: function (event, inst) {
    const infDisabled = [];
    const values = event.values;
    const infValue = values[2];
    for (let i = infValue - 10; i < infValue + 10; ++i) {
        if (i % 2 === 0) { // test condition
            infDisabled.push(i);
        }
    }
    return {
        disabled: [
            [], 
            [], infDisabled // 3 wheels used
        ]
    };
}