Search code examples
jqgridnumber-formattingfree-jqgridjquery-inputmask

Free-jgrid and input mask: Format number while type in inline edit mode


I'm using free-jqgrid v.4.15.4

I want to format number while type in inline edit mode.

I'm using Inputmask, a product of RobinHerbots, to make this.

It works well with jqgrid v.4.6.0 but not with free-jqgrid.

So what would I do to fix this?

This is 2 jsfiddle:

Jqgrid v.4.6.0: demo with jqgrid and

Free-jqgrid v.4.15.4: demo with free-jqgrid

 var mydata = [{
    name: "Toronto",
    country: "Canada",
    continent: "North America",
    quantity: 1200000
}, {
    name: "New York City",
    country: "USA",
    continent: "North America",
     quantity: 2200000
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America",
     quantity: 3200000
}, {
    name: "Paris",
    country: "France",
    continent: "Europe",
     quantity: 4200000
}]

$("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ["Name", "Country", "Continent","Quantity"],
    colModel: [{
        name: 'name',
        index: 'name',
        editable: true,
    }, {
        name: 'country',
        index: 'country',
        editable: true,
    }, {
        name: 'continent',
        index: 'continent',
        editable: true,
    },{
        name: 'quantity',
        index: 'quantity',
        editable: true,
             formatter:'number',
                        formatoptions:{decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2}
    }],
    pager: '#pager',
    'cellEdit': true,
   afterEditCell: function (rowid, cellname, value, iRow, iCol) {
                $('#' + rowid + '_quantity').inputmask("decimal", {
                        radixPoint: '.',
                        groupSeparator: ',',
                        digits: 2,
                        autoGroup: true,
                        rightAlign: false,
                        clearMaskOnLostFocus: false
                    });
    },
    'cellsubmit' : 'clientArray',


    editurl: 'clientArray'
});

Solution

  • The reason is easy: you used rowid instead of iRow. The fixed code will be

    afterEditCell: function (rowid, cellname, value, iRow, iCol) {
       $('#' + iRow + '_' + cellname).inputmask("decimal", {
           radixPoint: '.',
           groupSeparator: ',',
           digits: 2,
           autoGroup: true,
           rightAlign: false,
           clearMaskOnLostFocus: false
       });
    }
    

    See http://jsfiddle.net/OlegKi/6yc28po5/14/