Editor OnChange in FireFox

[msalvatoreParticipant]

Hello JQWidget friends,

I am trying to use the grid editor to perform a function on change of an input field. The change fires in IE and Chrome, but not on Firefox.

{ text: 'Display Name', datafield: 'DisplayName', renderer: columnsrenderer, width: '50%',
           createeditor: function (row, cellvalue, editor) {
                  editor.jqxInput();

                   editor.on('change', editor, function (event) {
                        alert('change');
                        var cVal = editor.jqxInput().val();
                                
                        var scp = angular.element('[ng-controller="TableFieldDefinitionCtrl"]').scope();
                         if (scp == null)
                             displayError("TableFieldDefinitionCtrl scope null!");

                         scp.update('DisplayName', cVal, row);
                            });
                        }
                    }
}

Any help would be greatly appreciated. Thanks! -Matt

[Peter StoevKeymaster]

Hi msalvatore,

Change is an event raised by HTML Input and as such is inherited by jqxInput. However, I think that the binding here is wrong. It should be:

  editor.on('change', function (event) { not  editor.on('change', editor, function (event) {

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[msalvatoreParticipant]

Hello Peter,

I changed the code as suggested, but the event is still not raised in FireFox.

{ text: 'Display Name', datafield: 'DisplayName', renderer: columnsrenderer, width: '50%',
           createeditor: function (row, cellvalue, editor) {
                  editor.jqxInput();

                   editor.on('change', function (event) {
                        alert('change');
                        var cVal = editor.jqxInput().val();
                                
                        var scp = angular.element('[ng-controller="TableFieldDefinitionCtrl"]').scope();
                         if (scp == null)
                             displayError("TableFieldDefinitionCtrl scope null!");

                         scp.update('DisplayName', cVal, row);
                            });
                        }
                    }
}

[Peter StoevKeymaster]

Hi msalvatore,

In order to use custom editors in jqxGrid, see: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellcustomediting.htm?arctic. I also think that you should handle “cellvaluechanged” event, not an event of some editor.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[msalvatoreParticipant]

We originally used cellvaluechanged but it was causing issues with other events. Is there any reason why the change in the editor wouldn’t work in FireFox? It works perfectly in IE and Chrome.

[Peter StoevKeymaster]

Hi msalvatore,

I don’t know. We do not raise that event. It is raised by the web browser. In addition, there’s no such editor in jqxGrid available. jqxInput is a custom editor, but in your code it is not implemented as custom editor. Please, look at the sample I pointed you and use the same approach if you wish to create custom editors.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts