[VUE] Issue with @preventable events / beforecelleditstart

[Stormseeker]

The issue is that given the example Vue events integration code, the value that is returned from a listener function in Vue doesn't seem to be returning it's value back to the Bryntum grid. Here is where the bryntum events get translated to Vue events:

            const config = {
                // Listeners, will relay events using $emit
                listeners : {
                    catchAll(event) {
                        // Uncomment this line to log events being emitted to console
                        //console.log(event.type);
                        this.$emit(event.type, event);
                    },

                thisObj : this
            },
        };

I was hoping that I could just change the catchAll function to return and it would work, however it seems the this.$emit will always return a Vue component and not the result of the listener function for some reason.

		    // Doesn't work
                    catchAll(event) {
                        // Uncomment this line to log events being emitted to console
                        //console.log(event.type);
                        return this.$emit(event.type, event);
                    },

For this specific event example, I ended up populating the editorContext.finalize method and then altering the catchAll method to be something like this:

catchAll: function (event) {
    console.log(event.type);
    this.$emit(event.type, event);

  if (event.type === 'beforecelleditstart') {
      if (event.editorContext && event.editorContext.finalize) {
          return event.editorContext.finalize();
      }
  }
},

And now it works but this seems pretty hacky. Hopefully there is something I'm misunderstanding?

[pmiklashevich]

Hello,

Well, there is nothing else can be done. $emit just translates the event. According to the docs it does not return anything. In fact, it returns vue component, I suppose to make $emit chainable. This concept of emitting events has nothing to do with the Bryntum Grid API. Just a small note, I would move the check logic into a separate function and emit events in case it was not prevented on this step. But that is up to you.

                // Listeners, will relay events using $emit
                listeners : {
                    catchAll(event) {
                        if (event.type === 'beforecelleditstart') {
                            const isAllowed = this.isCellEditingAllowed(event);
                            if (!isAllowed) {
                                return false;
                            }
                        }
                        this.$emit(event.type, event);
                    },

                thisObj : this
            },
            
            .....
methods : {
            isCellEditingAllowed({ editorContext }) {
                const { record } = editorContext;
                return record.id > 5; // return false if you need to prevent cell editing
            },

One more thing. I'm not quite understand this code. It's more about finish editing, not start.

  if (event.type === 'beforecelleditstart') {
      if (event.editorContext && event.editorContext.finalize) {
          return event.editorContext.finalize();
      }
  }

If you explain in details what problem you're trying to solve, maybe we can find a better solution for you. How to prevent the editing is shown above.

Best,
Pavel