How do I insert icon buttons into a datatable?

Webix JS
#1

Trying to insert icon buttons inside data grid…

var form = { view:"form", width:320, scroll:false, elements:[
  { margin:10, cols:[
    { view:"icon", icon:"envelope"},{ view:"icon", icon:"users"},{ view:"icon", icon:"cog"}
  ]}
  
]}; 

webix.ui(form);

var conf = [{ id:"title", fillspace:true },{ id:"Icons Buttons", width:200, fillspace:true}];

webix.ui({
  rows:[
 
    { view:"datatable", columns:conf, data:grid_data }
  ] 
});
#2

By the way… 1. are there more icons in webix 2. how do I put in my own icons

#3

Supported icons - Font Awesome

DataTable with icons - http://webix.com/snippet/907a6cba

#4

Great… how can I assign onItemClick to each icon?

#5

Check
http://webix.com/snippet/fc312443

#6

I want to access the data in webix.confirm and manipulate it, and then refresh the datatable.

how can I achieve this?

http://webix.com/snippet/f0a6be06

#7

I found the answer I can save the data in the onClick callback and then use it in the webix.confirm callback.

Is this the right way?

#8

@jyothsna to access the data, you can use id parameter from the onClick handler. But unfortunately, the id of the datatable is still required. As an alternative, you can store the datatable in the onClick as follows:

http://webix.com/snippet/d0689045

#9

Provided example snippets do not work with webix today.

What is the current recommended way to add clickable icons to a datatable?

#10

Hello @russ ,

Starting from Webix 6.0, Font Awesome v4.7 icons are no longer used. We have switched to own icons sets based on Material Design Icons/Font Awesome 5 depending on the active skin. But you can easily use any custom icon pack, provided that you include it into the app.

Please, check the release What’s new list for details.

Example: Code Snippet

#11

Thanks for the new and functional example, @Nastja. :slight_smile:

Is there some particular reason you do not use a ui.icon component here?

Also, the new(ish) skin-dependent icons that webix has are interesting. Where can I find the full set of icon names that are available? I’ve seen this cheatsheet page… is that the official documentation for the available icons?

#12

You are welcome!

If you need extra icons that are not included, you can use Material Design, Font Awesome or any other set of icons. You can read about them in our documentation.

Nope, you can also use ui.icon

#13

Be advised if you don’t see icons, your version of webix may not support it, or the syntax use has changed.