jQWidgets Forums

jQuery UI Widgets Forums Angular angularGrid select event

Tagged: ,

This topic contains 5 replies, has 3 voices, and was last updated by  Peter Stoev 8 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • angularGrid select event #87831

    Bard
    Participant

    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.

    angularGrid select event #87855

    Ivo Zhulev
    Participant

    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/

    angularGrid select event #87859

    Bard
    Participant

    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

    angularGrid select event #87863

    Peter Stoev
    Keymaster

    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

    angularGrid select event #87864

    Bard
    Participant

    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.

    angularGrid select event #87866

    Peter Stoev
    Keymaster

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.