Jsgrid: Decimals in number field and multiple control columns

[NewBo1234]

Good morning,

I was wondering about 2 small things:

1) Can you have the control column in both the first column and the last (for example, if you have a very wide table)?

2) The "number" type doesn't appear to allow decimal numbers. Is there a better one?

Thank you.

[richraid21]

Regarding number 2, The code uses an input of type "number"; It should support decimals.

[tabalinas]

@NewBo1234,

1. Go ahead and try it to be sure
2. Why do you say that number field doesn't allow to work with decimals?

[NewBo1234]

@tabalinas -- I put together a grid with "number" and put in a decimal. The styling highlighted the field in red and the tooltip said that 3.14 was an invalid number and that 3 or 4 was the closest valid number.

The dual control columns don't quite work. The grid creates the column on both ends, but in my last test, the giant green plus only appears in the first column.

I'll keep fiddling with it.

[NewBo1234]

I've tried it in some of your demos and the number field still shows errors when I put in a decimal. When I update the grid, it rounds automatically. So I'm stumped..... Is there a different type maybe--a "decimal" type or something?

@tabalinas and @richraid21 -- This is a fabulous tool, but I do need decimals.

[NewBo1234]

BTW, here's another site that might explain why the decimals are throwing wrenches: https://www.isotoma.com/blog/2012/03/02/html5-input-typenumber-and-decimalsfloats-in-chrome/

That is, if I have understood what's going on.... On the assumption that I do understand, is there a way to change the "step" property to "any"?

[NewBo1234]

Also there is something screwy with using the toFixed(number) function. I'm not sure, but when I mess with the itemTemplate, it stops being able to be loaded.

[NewBo1234]

Never mind about the toFixed(number) . for some reason occasionally the itemTemplate would send an empty field through (this is an editable and insertable grid) and itemTemplate needed to return a 0.0000 for that to work.

[tabalinas]

You are right, there is an issue with decimals.
Please, use the following field decimal instead:

    function DecimalField(config) {
        jsGrid.fields.number.call(this, config);
    }

    DecimalField.prototype = new jsGrid.fields.number({

        filterValue: function() {
            return this.filterControl.val()
                ? parseFloat(this.filterControl.val() || 0, 10)
                : undefined;
        },

        insertValue: function() {
            return this.insertControl.val()
                ? parseFloat(this.insertControl.val() || 0, 10)
                : undefined;
        },

        editValue: function() {
            return this.editControl.val()
                ? parseFloat(this.editControl.val() || 0, 10)
                : undefined;
        }
    });

    jsGrid.fields.decimal = jsGrid.DecimalField = DecimalField;

[tabalinas]

Regarding the first problem, it's not a usual scenario for control field. So there should be done some modifications for this scenario. I'm not sure we want it to work out-of-box though.
If you want to talk about these modifications, please open a separate issue. Let's rename and keep this one for decimal fields.

[maurorulli]

Are you planning to release a fixed version for decimals?

[tabalinas]

@maurorulli, sure, the issue is opened and will be fixed soon. Meanwhile you can use the definition fordecimal field described above.

[uqix]

@tabalinas based on your decimal field, step attr may help for further control of the underlying number input, so here is my snippet:

   (function(jsGrid, $) {
     var NumberField = jsGrid.NumberField;

     function DecimalField(config) {
       NumberField.call(this, config);
     }

     DecimalField.prototype = new NumberField({

       step: 0.01,

       filterValue: function() {
         return this.filterControl.val() ? parseFloat(this.filterControl.val()) : undefined;
       },

       insertValue: function() {
         return this.insertControl.val() ? parseFloat(this.insertControl.val()) : undefined;
       },

       editValue: function() {
         return this.editControl.val() ? parseFloat(this.editControl.val()) : undefined;
       },

       _createTextBox: function() {
         return NumberField.prototype._createTextBox.call(this)
           .attr("step", this.step);
       }
     });

     jsGrid.fields.decimal = jsGrid.DecimalField = DecimalField;

   }(jsGrid, jQuery));

[tabalinas]

@zenkiezhu, thanks for the suggestion and example implementation!

[Wsine]

The next version of decimal should allow to set step field of decimal number.