How can I register for an event raised by a custom HTMLElement which is kept inside cell template

Webix JS
#1

Hi,

I have last column of datatable configured for row action. When user trigger action dropdown the value change should trigger the action event.

This is how the column is defined,

 id: 'rowActions', header: '', headermenu: false, freeze: 'right', template: function (obj, common) {
        return `<my-dropdown label="Empty"><my-menu-item label="First" id="firstId"></my-menu-item><my-menu-item label="Second"></my-menu-item></my-dropdown>`
      }

I am seeing the drop down in the cell but I am not able to bind the events to events handlers.

For example this does not redirected the value-changed events to the handler specified,

<my-dropdown label="Empty" (value-changed)="onValueChanged">

I also tried this but did not work,

ready: () => {
    webix.event("firstId", "value-changed", function(e){
        console.log(e);
    });
    },

Currently I am using Webix inside Angular, so

  1. What are the ways I can bind HTMLElement events to handlers in Angular when they are part of templates.
    2.what is the non-angular way of binding events

Any samples or snippets will really help us.

Thanks
Basanth

#2

Hello, @Bachu

I’m very sorry for the delay with the answer.
The ready API will allow you to catch a click.
You can add your own events to the HTML code, but at the same time you need to know that in the template the table is not available as a scope (context), therefore there will be no direct link to it and in the custom event handler you need to refer to the table by its ID.
Please, check the snippet here Code Snippet Though it’s rather an approximate example (onchange is set on line 15), it may satisfy your needs.