Create new input type/Editor

[leela]

Hi,

 I need to create a new input type 'amountbox' to be used in both form and editable data grid as editor.
 It should be inherited from numberbox, but with different formatter. I tried doing the below, but it throws the error saying -
"Uncaught TypeError: Cannot set property 'defaults' of undefined " @ amountbox definition.

 Please let me know what I am missing here.

  // Inherited from $.fn.numberbox.defaults
        $.fn.amountbox.defaults = $.extend({}, $.fn.numberbox.defaults, {
           formatter: amountFormat
        });

function amountFormat(num) {
           var dig = "2";
            var dec = ".";
            var sep = ",";
            var count = "3";
            
           if(count == 9 ) {
               return number_format_india(num);
           }
           
           
         x=new Array();
         s=(num<0?"-":"");
         num=Math.abs(num).toFixed(dig).split(".");
         r=num[0].split("").reverse();
         for(var i=1;i<=r.length;i++){
             x.unshift(r[i-1]);
             if(i%count==0&&i!=r.length)
                x.unshift(sep);}
         return s+x.join("")+(num[1]?dec+num[1]:"");
        }//End:number_format

      

[stworthy]

You must override both the 'formatter' and 'parser' functions.

Code:

$('#nn').numberbox({
	formatter: function(value){
		if (!value) return value;
		
		value = value + '';
		var opts = $(this).numberbox('options');
		var s1 = value, s2 = '';
		var dpos = value.indexOf('.');
		if (dpos >= 0){
			s1 = value.substring(0, dpos);
			s2 = value.substring(dpos+1, value.length);
		}
		if (opts.groupSeparator){
			var p = /(\d+)(\d{3})/;
			while(p.test(s1)){
				s1 = s1.replace(p, '$1' + opts.groupSeparator + '$2');
			}
		}
		if (s2){
			return opts.prefix + s1 + opts.decimalSeparator + s2 + opts.suffix;
		} else {
			return opts.prefix + s1 + opts.suffix;
		}
	},
	parser: function(s){
		s = s + '';
		var opts = $(this).numberbox('options');
		if (parseFloat(s) != s){
			if (opts.prefix) s = $.trim(s.replace(new RegExp('\\'+$.trim(opts.prefix),'g'), ''));
			if (opts.suffix) s = $.trim(s.replace(new RegExp('\\'+$.trim(opts.suffix),'g'), ''));
			if (opts.groupSeparator) s = $.trim(s.replace(new RegExp('\\'+opts.groupSeparator,'g'), ''));
			if (opts.decimalSeparator) s = $.trim(s.replace(new RegExp('\\'+opts.decimalSeparator,'g'), '.'));
			s = s.replace(/\s/g,'');
		}
		var val = parseFloat(s).toFixed(opts.precision);
		if (isNaN(val)) {
			val = '';
		} else if (typeof(opts.min) == 'number' && val < opts.min) {
			val = opts.min.toFixed(opts.precision);
		} else if (typeof(opts.max) == 'number' && val > opts.max) {
			val = opts.max.toFixed(opts.precision);
		}
		return val;
	}
})

[leela]

If I override numberbox, then all the number boxes would behave like amountboxes. I do not want that. I want to retain numberbox type and add a new type for amount box

[stworthy]

Not all number box components are overridden, you just need to apply the 'formatter' and 'parser' functions to what number box components you wish.

[leela]

My form/editable datagrid elements are dynamically generated, where I assign the element/editor type based on different conditions. If there is a way to define the new type, it would simplify things, if not there would be lot of different scenarios for me to handle. Just wondering if it is easy enough to to extend the number box and create a new type. Otherwise I have to do it the hardway.