Our blazing fast Grid component built with pure JavaScript


Post by gregc »

We can choose an icon from fontawesome and use code like below to see an icon for right clicking the grid

cellMenu : { 
				items : { 
		removeRow : false, 
		flagItem : { text: 'Edit', icon: 'b-fa-edit', weight: 10

Is there is easy way that I can just supply the image name and have that be displayed as the icon?
e.g.text: 'Edit', icon: 'edit.png', weight: 10

or do I need to research how to created my own fontawesome icon?

Last edited by gregc on Sun Dec 27, 2020 12:20 am, edited 1 time in total.

Post by mats »

You could do it with a 'cls' class and use background image to put your image there. https://bryntum.com/docs/grid/#Core/widget/MenuItem#config-cls


Post by gregc »

I tried

 cls : 'pluss',
                tooltip : 'Increase salary',
                visible : ({ record }) => !Boolean(record.children && record.children.length),
                onClick : ({ record }) => record.salary = record.salary + 1000

with css

.pluss {
    background-image: url('https://clipart-library.com/img/463371.png') !important;
    background-repeat: repeat  !important;
}

but I am obviously missing something on how to do it

https://codepen.io/gregca/pen/QWKOVyP


Post by mats »

Few things:

  1. Codepen is on SSL and your background-image link is not
  2. Need to size your element too, something like:
    background-image: url(https://clipart-library.com/img/463371.png) !important;
        background-repeat: no-repeat !important;
        width: 1em;
        height: 1em;
        background-size: 1em;

Post by gregc »

Thanks!, I did get it working. I can see though there is a lot of extra work getting the image and the text to look good so I'll keep that in my back pocket for now.

.iconpencil {
    background-image: url('edit_pencil.png') ;
    background-repeat: no-repeat ;
    width: 128px;
    height: 40px;
    background-size: 24px 24px; 
}

Post Reply