6

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?

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404

1 Answers1

3

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

  1. Add the ActiveContent module to the view via its name

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

  2. 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

Shere
  • 143
  • 13
  • How do you get access from the click handler to the row that the button was in? In other words, how can you tell which of the buttons in the table (one per row) was clicked? So far this example has no practical use case, because when you add a button per row, you want to know *which* row was clicked. – Dan Dascalescu Sep 23 '18 at 02:45
  • This solution isn't working (anymore) @Shere. Could you please update the snippet? It is leading to a script error. – P. Maino Jun 16 '21 at 09:06