Button inside Webix datatable cells

Question

I need to create a column of buttons inside my Webix datatable. I can customize a simple html-button, like this:

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

but after all it's not as convenient as I would like.

I wonder if there's another way to do such thing?

Shere Shere · Accepted Answer · 2015-11-09T15:03:31

You can define the button as an active element. It gives you full-featured button without any html preferences As follows:

Add the ActiveContent module to the view via 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

Button inside Webix datatable cells

1 Answers