Our blazing fast Grid component built with pure JavaScript


Post by rebkova »

Hi,
I want to use custom icons from IcoMoon in a single Tree Grid, not all of them.

I see I can use configs expandIconCls, collapseIconCls and leafIconCls to replace the icons of interest. However, these configs are using class names of the Bryntum’s pre-defined icons and I cannot use icomoons’ class names in this case.

I've read your customisation guide and did not manage to make it work for my case yet.

Is there any other way you would suggest me to try?


Post by alex.l »

Hi rebkova,

These properties set a custom CSS class to <i> tag, so in fact it builds the DOM element with the next structure:

<i class="your-custom-css-class">...</i>

So, if all CSS rules was loaded correct, you'll see the style that your your-custom-css-class applied.

Check if your JSON data return any value in iconCls field for your entities, it has a higher priority.
What exactly is not working for you? Any chance to see your app?

All the best,
Alex


Post by rebkova »

It seems Bryntums' classes were not overriden with the custom one.

If config

leafIconCls: 'b-icon b-icon-code'

is used on the Grid, Bryntum's icon for code is displayed, not the custom one.

I followed your guide and under point 3. provided icomoon's unicode as a content to the icons, like so:

.b-icon-code:before { 
    content : '\e99d' // file-text
}

Ignore the fact that the class name and icon to replace it are not matching, that was just to test.

My custom.scss file looks identical to what the guide suggest, except the import paths, of course.

Has the overriding been done in the right way or have I misunderstood the guide?


Post by alex.l »

Please share your solution here.

I cannot test it with paid icon package, but i tried to override it with CSS rules in our examples.

I used the next CSS rule:

.b-icon-code:before {
  content : "\f013";
}

and the next JS:

    columns : [
        { type : 'name', width : 250, leafIconCls: 'b-icon b-icon-code' }
    ],

and I see the result applied, see attached image.

Attachments
Screenshot 2021-12-06 at 14.01.57.png
Screenshot 2021-12-06 at 14.01.57.png (72.29 KiB) Viewed 684 times

All the best,
Alex


Post by rebkova »

For targeting a specific grid, I created a new CSS class where I’ve overridden the default Bryntum icon with the content of the icomoon’s icon and icomoon font-family like so:

.myNewIcon {
	b-fa-file {
        	&:before {
            		font-family: 'icomoon-NEW' !important;
            		content: "\e99d";
        	}	
    	}
}

Then I applied myNewIcon class on our custom made className wrapper property on grid.
And the custom icon is alive now.


Post by alex.l »

Great to hear that.
Anyway "!important;" doesn't feel like a way how it should work out of the box. Did you try to use your own names for icon classes without our internal b- prefix?
Just let us know if we can assist you somehow.

All the best,
Alex


Post Reply