Mulitple buttons in a data table

Hi.

I’m tring to add multiple icon buttons in a data table column using different suggestions and articles on your web page. But i can seem to be able to render more then the first button defined in the actions column.

Note: I’m using Typescript.

webix.ui({
  id: "mainLayout",
  type: "space",
  rows: [
    { template: "headerRow", height: 50 },
    {
      cols: [
        { id: "treeColumn", template: "tree", gravity: 1 },
        { view: "resizer" },
        {
          id: "gridColumn", template: "grid", gravity: 6, autowidth: true,
          rows: [
            {
              view: "activetable", id: "mygrid", rowHeight: 40, select: "row",
              columns: [
                { id: "name", header: "Name" },
                { id: "description", header: "Description", fillspace: true },
                { id: "assignedTX", width: 350, header: "Assigned TX" },
                {
                  id: "actions", width: 250, template:
                  "<div class='buttons'>{common.actionButton()}</div>" +
                  "<div class='buttons'>{common.actionButton2()}</div>"
                }
              ],
              activeContent: {
                actionButton: {
                  view: "button",
                  type: "icon",
                  icon: "fa fa-power-off",
                  width: 40, css: {
                    "line-height": "34px"
                  },
                  click: function (id: any, e: any) {

                    var item_id = this.config.$masterId.row;
                    webix.message("Click on " + item_id);
                  }
                },
                actionButton2: {
                  view: "button",
                  type: "icon",
                  icon: "fa fa-plug",
                  width: 40, css: {
                    "line-height": "34px"
                  },
                  click: function (id: any, e: any) {

                    var item_id = this.config.$masterId.row;
                    webix.message("Click on " + item_id);
                  }
                }
              },
            }
          ]
        }
      ]
    },
    { template: "footerRow", height: 50 },
  ]
});

$.getJSON("eq.json", (data: any) => {
  let dt: webix.ui.datatable = $$("mygrid") as webix.ui.datatable;

  dt.add({
    id: "receiver:1",
    name: "INT-RX01",
    description: "some description",
    assignedTX: "INT-TX06"
  });

  dt.add({
    id: "receiver:2",
    name: "INT-RX02",
    description: "some other description",
    assignedTX: "INT-TX11"
  });
});

}
}
`

I have the following article to create me sample above.

http://docs.webix.com/desktop__active_content.html#definingactivezonesthroughcomponenttemplates

The template itself is OK except one thing: by default, a <div> tag has the
display:block
in its style, so you will see only the first row of such template in a cell.

It can be resolved with a simple CSS: https://webix.com/snippet/58f24500

Also, the icon property in ui.button expects an icon’s name without fa- prefix.


But regarding this configuration, please note that the selection in datatable can cause a focusing conflict with the activeContent (it’s a part of the known complex issue). For example, the first click on any button will return null as this.config.$masterId. With selection enabled, for now we recommend using the HTML items added in type with onClick handler for precise classes: https://webix.com/snippet/4cfd4df6

Thank you listopad. It works as expected now. However, my next question was exactly the focus conflict issue, as i want to show a popop when the first button is clicked. It does not seem that the html type workaround fixes the position of the popup.

Orignal snippet: https://webix.com/snippet/5893ab0e

HTML type snippet: https://webix.com/snippet/46ad164a

If i select a row before i click the button, the popup is positioned correctly. Is there a way to select the row when the button is clicked and them call the popup.show method after ?

Unfortunately, such behavior of activeContent is a part of the known complex issue, so I would rather recommend using html icons.show has the positioning parameters, which values can be taken from the click event:

"fa-power-off":function(e, id){
   $$("mypopup").show(e.target);
},

https://webix.com/snippet/a5f8b3e3

I solved the issue by using the button’s x and y coordinates and making the popup values dynamic by changing it’s popup list items.


<code class"js">
powerButton: {
	id: "btnPower",
	view: "button",
	type: "icon",
	icon: "power-off",
	width: 40,
	height: 40,
	on: {
		"onItemClick": function (id: any, e: any): void {
			let grid: webix.ui.datatable = $$("mygrid") as webix.ui.datatable;
			let item: any = grid.getSelectedItem();
			let pop: webix.ui.popup = $$("mypopup") as webix.ui.popup;
			let poplist: webix.ui.list = $$("poplist") as webix.ui.list;

			poplist.clearAll();
			poplist.add({ id: "self", title: "Restart " + item.name });
			poplist.add({ id: "assigned", title: "Restart " + item.assignedTX });
			poplist.add({ id: "computer", title: "Restart computer" });
			poplist.add({ id: "all", title: "Restart all" });

			pop.setPosition(e.x - 50, e.y + 30);
			pop.show();
		}
	}
}
`