angularGrid select event

[BardParticipant]

I’m using the columntype ‘dropdownlist’ in an angularGrid. However, I do not like that the cell value of the grid is updated only after OnCellvaluechangedor OnCellendeditwas raised. I want that the cell gets the value immediately after the ‘select’ event of the dropdownlist. I do not know how to achieve that.

The columns are created with reference to private createGridEditor and initGridEditor methods. Since I needed more logic anyway in initGridEditor I thought I can just

      editor.on('select', function(event){    // 'change' also not working
        if(event.args.type != 'api'){
          // TODO: do not know how to end the edit process and invoke OnCellendedit or OnCellvaluechanged since 'this' is not valid for the component
        }
      });

Another possible of course would have been to define the event in the html part of angularGrid such as <angularGrid (OnChange)=test($event)></angularGrid> but I guess this is not useful since implementation for various editors would have to be overwritten.
Can you advice how to get the desired behavior? Thanks a lot in advance.

[Ivo ZhulevParticipant]

Hi Bard,

Have you tried using the ES2015 arrow functions?

Insted of
editor.on('select', function(event) {
write
editor.on('select', (event) => {

This way you don`t change the context of THIS so it may refer to the component.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[BardParticipant]

Hi Ivo,

thanks for trying to help. Changing the function definition is not helping unfortunatly. The problem is, that in this context, “THIS” refers to the grid, not to the component.

editor.on('select', (event) => {
        if(event.args.type != 'api'){
          console.log(this);        // c {owner: b.(anonymous function), datafield: 17, displayfield: 17, text: 17, createfilterpanel: null…}
          this.Cellendedit(event); // Uncaught TypeError: _this.Cellendedit is not a function
          // this.myGrid.OnCellendedit(event); // Cannot read property 'OnCellendedit' of undefined
        }
      });

Do you have another idea how to call OnCellendedit right after the select event of the dropdownlist in an jqxgrid is triggered.

Best Regards,
Martin

[Peter StoevKeymaster]

Hi Martin,

To add my response about the Grid here, too.

this.myGrid within the editor’s select handler is Invalid as the context is not the Grid. You’re trying to override the Grid’s built-in editing logic, but this is not possible and will lead to errors.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[BardParticipant]

Hi Peter,

I appreciate your efforts.

This is sad to hear. But as far as I remember this
$("#jqxgrid").jqxGrid('endcelledit', null, null, false); // not working but sort of like this
workaround was working with Javascript by directly dealing with the DOM structure. However, with angular2 I can get the elementRef or ViewChild for example but cannot call methods for this element in the component. Are you aware of such possibility?

Again, thank you very much for your help.

[Peter StoevKeymaster]

Hi Martin,

If you have the reference to the Grid component like myGrid in some our examples, then you can call any Grid method.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts