Change Event within the Record List View

You are looking at the wrong place I guess. record.js is only used on the layout that is shown when you open a view. When you want to react on the record that is editable 'inline' ( within the list view) you need to adapt the RecordlistView. In there you can use the model.on('change:<fieldname>', this.<yourcallback>, this);

Thanks Jeroen, 

This is what I initially thought too, however after some testing with the following code I was still not able to fire on the change event of my control. I have added this code to the:

custom/modules/Quotes/clients/base/views/recordlist/recordlist.js

({

    /* because 'Quotes' already has a recordlist view, we need to extend it */
    //This code is not yet in use, this is just initial code to test binding to the correct event.
    extendsFrom: 'RecordlistView',

    initialize: function(options){

        console.log('This is Quotes RecordlistView');

        this._super('initialize', [options]);

        this.model.on('change:quote_stage', this.checkQuoteFieldsOnChange,this);

    },

    checkQuoteFieldsOnChange: function(){
        console.log("This is the OnChange Event firing for the quote_status field");
        console.log(this.model.get('quote_stage'));
        console.log(this.model.previous('quote_stage'));


    },

})

Initially I had "extendsFrom: 'RecordListView'" and realised it needed to be a lowercase "L", i.e. extendsFrom: 'RecordlistView'. With this problem fixed.

Now, this only way I can capture the change event on the "quote_stage" is by using: 

        this.events['change [name=quote_stage]'] = 'checkQuoteFieldsOnChange';

As the 

        this.model.on('change:quote_stage', this.checkQuoteFieldsOnChange,this);

Will not fire, So I'm not sure if this is the recommended way to do this or not.

I have also noticed that I can not access the rows values using:

        console.log(this.model.get('quote_stage'));
        console.log(this.model.previous('quote_stage'));

They return as 'undefined' Is the model still valid when working with the Recordlist View?

Thanks for your help. 

In List View you don't just have one model you have a whole collection.

If in your initialize you look at console.log(this) you will find that there isn't just one model, so "this.model" is not defined.

If you look at  

clients/base/views/recordlist/recordlist.js

you will see that, for example, when the Edit is clicked the specific model for that row is passed to the function:

editClicked: function(model, field) 

I have not tried to get an on-change event on list view so I can't walk you through one, but my gut feeling is that you would be better off modifying the controller for the enum field, and in particular for the quote_stage. That way the change event will apply both to your record view and to your list view, because it is now all about the field, not the view.

You would be working in:

custom/modules/Quotes/clients/base/fields/enum/enum.js

It would look something like:

({
  extendsFrom: 'EnumField',
  initialize: function(opts){
    this._super('initialize',[opts]);
    if (this.view.action !== 'filter-rows'){
      this._initEvents();
    }
  },
  _initEvents: function(){
      this._quoteStageFieldChange();
  },
  //define the on.change 
  _quoteStageFieldChange: function() {
     //make sure this is the quote_stage and not some other quote enum
     if(this.name == 'quote_stage'){
        //trigger doSomething when quote_stage changes
        this.model.on('change:'+ this.name, this.doSomething,this);
     }
  },
  doSomething: function(){
    //this.model exists here
  }
})

Note that the code above is not tested, so take it with a grain of salt.

Hope this helps,

FrancescaS

Fantastic Francesca, this is really helpful and I'm sure I will be able to use this method with other projects. I always appreciate your contribution to my posts.