How to render mdi-icons in the grid


#1

Hi there,

I was able to render an tag in the grid, however, I would like to render icons from material design icons. Is it possible?
I attached a print screen showing what I am trying to do.



#2

Hi,
To render icons in the grid, you can add div element inside the template of data presentation in a column and set the required icon using CSS.
docs.dhtmlx.com/gantt/desktop__ … esentation

Demo:
snippet.dhtmlx.com/9580e5a14


#3

Hi Polina,

Is this the only way to render icons in the grid?

I have a component that I use to render these icons, and I have to set some parameters to it:

<SvgIcon icon={item.farolAcao.icone} size={20} color={item.farolAcao.cor} colorHover={item.farolAcao.cor}/>

If I use it as a string like you are doing in your example, the component won’t be rendered.

Any other idea?


#4

Hello there, is there any solution for the last question? I am able to inject the static html code/image… but i need to use material UI icon components. Is there any way to use MUI components on the columns?


#5

Hello,
You can show any HTML elements in the grid and they might be dynamic. Here are another examples with the images:
https://snippet.dhtmlx.com/4fe32d954
https://snippet.dhtmlx.com/8c4c967ca
https://snippet.dhtmlx.com/6f6084fc3
http://snippet.dhtmlx.com/b3fea7565
And this example shows how to display an SVG-file:
http://snippet.dhtmlx.com/db2a3916d


#6

Thank you for the response Ramil

What about the React components? Can it be injected as a custom content? Want to use React Material UI bars/buttons/avatar… etc on the task columns


#7

Hello,
Unfortunately, there is no built-in support for the React components and functions inside Gantt. If you try to do that, you will get only the regular HTML elements.