TMSFNCDataGrid - ComboBox with icons

Hi,

would it be possible to get example how to add editable combobox with icons in TMSFNCDataGrid? I would like in each row to add a column where user can select status (green, yellow, red) with icons like semaphor.

With TTMSFNCComboBox I see two options. Set the Style to csDropDownList then either use a emojis for the icons or assign a bitmap container and use HTML.

cb := TTMSFNCComboBox.Create(Self);
cb.Style := csDropDownList;
//emojis:
cb.Items.Add('🟢 Finished');
cb.Items.Add('🟡 Pending');
cb.Items.Add('🔴 Stuck');

//or bitmaps:
cb.BitmapContainer := TMSFNCBitmapContainer1;
cb.Items.Add('<img src="green.png"/> Finished');
cb.Items.Add('<img src="yellow.png"/> Pending');
cb.Items.Add('<img src="red.png"/> Stuck');

Either way, this will be entered as text inside the cell content, but not linked to the icon of the cell.

Hi!

Thank you for the sample, it’s easier then I thought. I tried with Bitmap container and now I have a weird problem. In design mode I can see icon:

image

But when I run the program, icon is not visible:

image

Are there any other settings that I should change?

Hi,

We cannot reproduce this here. Can you please provide more details on how you got to this result?

Is this just TTMSFNCComboBox + TTMSFNCBitmapContainer dropped onto the form and assigned everything at designtime? If yes, can you provide us with a small sample project that showcases this? Alternatively, you can send the snippets that you used to setup programmatically.

Hi,

I’m sending simple example in attachment.

TestCombo1.pas (681 Bytes)

TestCombo1.dfm (7.0 KB)

Hi,

Very strange. Your images from the sample are not loading at all, they are showing up as blank images in the TTMSFNCBitmapContainer. However, we added an SVG to the collection and it worked fine so it’s unclear what goes wrong on your side. Do you have different images to test with?

Can you also let us know your Delphi version?

Hi!

I’m using Delphi 12.3. It does look strange when I add pictures in cointainer, I see it like this:

I’m using dark mode. Could that make such a difference?

Dark mode/light mode is no difference. I guess it’s SVG file. Here’s the SVG file content(I cannot attach it):

Not so easy to add source, I hope it will be understandable:

----svg xmlns=" SVG namespace " width="100" height="100" viewBox="0 0 100 100">
--- rect width="100" height="100" fill="transparent"/>
--- circle cx="50" cy="50" r="35" fill="#2ECC71"/>
---/svg

It is still working as expected here, used the following for the file:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="100" height="100"
     viewBox="0 0 100 100">
  <rect width="100" height="100" fill="transparent" />
  <circle cx="50" cy="50" r="35" fill="#2ECC71" />
</svg>

What are your exact steps when loading the images into the bitmap container?

I save your SVG to file LightGreen2.svg and try to add it:

  1. Click append:

  2. I chose file and open:

    image

  3. Result:

BTW, TBitmapCointainer is v1.0.0.0., TMSFNCComboBox is v1.0.0.7

Do you have other third-party libraries installed? Skia Library / Graphics for example? It might interfere with the SVG rendering.

I’ve checked and I have skia library installed:

image

Other libraries are not graphics connected (beside TMS).

I’ve unchecked those 2 packages and it’s still the same. I will do a clean Delphi installation and check if it would be any difference.

Do you have both TMS VCL UI Pack & TMS FNC Core?

Yes:

Both products register that type, but the type at designtime should be TTMSFNCSVGBitmap. If the type is not picked up, then unfortunately at designtime some other library overrides TTMSFNCSVGBitmap with another type. You can try to load them at runtime and see if that works.

I’ve tried to add picture in runtime and now it works:

TMSFNCBitmapContainer1.AddFromFile('light_red.svg', 'RedLight.svg');
TMSFNCBitmapContainer1.AddFromFile('light_yellow.svg', 'YellowLight.svg');
TMSFNCBitmapContainer1.AddFromFile('light_green.svg', 'GreenLight.svg');

Thank you for your help.

1 Like

Hi!

Another problem occured that I don’t know how to fix. After Style is changed to csDropDownList, background color is gray:

image

I wanted background color to be white and I can’t find how to do it. I’ve changed all possible colors in component but doesn’t help.

Hi,

Try setting DefaultStyle to False and then modify the Fill.Color property:

TMSFNCComboBox1.DefaultStyle := False;
TMSFNCComboBox1.Fill.Color := gcWhite;