0

I have Defined the Scroller value to be hours starting 15 min interval and the wheel should have has values like 0.25 0.5 0.75 1 1.25...23.75 but its sorting the values like tits showing the integers first and then the decimal so its like 1 2 3 ...23 0.25 .5.0.75 ...23.75 how can i rest this to display the numbers in incremental order.

$(function () {
            var hours = [{}];
            for (var i = 0; i < 3; i++) {
                var wheel = {};
                for (var j = 0; j < 24; j += .25) {
                    wheel[j] = j;
                }
                hours[0]['Hours'+i] = wheel;
            }

            $('#i').scroller({
                theme: 'default',
                display: 'inline',
                mode: 'mixed',
                wheels: hours,
                height: 40
            });
        });
Sri
  • 33
  • 1
  • 11

1 Answers1

1

This is happening because the wheel variable is an object and its keys are numbers (this time). You can solve this by adding '_' character before each key.

            var hours = [{}];
            for (var i = 0; i < 3; i++) {
                var wheel = {};
                for (var j = 0, k=0; j < 24; j += .25,k++) {
                    wheel['_'+j] = j;
                }
                hours[0]['Hours'+i] = wheel;
            }

This way the ordering will be fine, but the result (in the input field) will also have the '_' characters in it. (ex. if you selected 3.25 1.5 4.75 the input will contain '_3.25 _1.5 _4.75'). So you will have to write a formatResult function to cut the _ char from them like this:

        $('#i').scroller({
            theme: 'default',
            display: 'inline',
            mode: 'mixed',
            wheels: hours,
            height: 40,
            formatResult: function (d){
                var str = '';
                for(var i = 0; i < d.length; i++)
                    str += d[i].substring(1) + ' ';
                return str;
            }
        });

I hope this helps!

zolipapa
  • 646
  • 6
  • 14
  • This worked!! thanks for the Help. I need one more help how can i set the header text dynamically i get three different fields for each header text i should get instead of the 'Hours', i need to display Reg, OT , DT respectively but its dynamic value.Thnaks In advance – Sri Oct 24 '12 at 21:09
  • 1
    When you put the wheel object into the array, use a different label! hours[0]['Reg'] = wheel; or if you have the values in an array labels = ['Reg', 'OT', 'DT'] then: hours[0][labels[i]] = wheel; – zolipapa Oct 25 '12 at 09:55