Button inside Webix database cells

Question

I need to create a button column inside my webix datatable. I can configure a simple html button, for example:

webix.ui({ view:"datatable", columns:[ . . . { id: "button1", template: "<button class='custom_css'>Click Me!</button>", width:70 } ], onClick:{ button1: function(ev, id){ . . . } } }); 

but in the end it is not as convenient as we would like.

I wonder if there is another way to do such a thing?

Answer 1

You can define a button as an active element. This gives you a fully functional button without any html settings. As below:

• Add the ActiveContent module to the view through its name

   webix.protoUI({ name:'activeTable'}, webix.ui.datatable, webix.ActiveContent ); 

• Define your button:

   webix.ui({ id:'table1', view:"activeTable", data:grid_data, columns:[ . . . { id: "button", template: "{common.yourButton()}" } ], activeContent: { yourButton: { id:"button1", view:"button", label:"Click", width: 70, height:30, click:function(id, e){ . . . } }, }, }); 

You can check the snippet: http://webix.com/snippet/3539bb9a