TMSFNCDATAGRID - styling issues. Styling incomplete?

When i use the headerrow in the FNCDatagrid the styling for example the darkmode does not applied to the header row.

Are there any options to style this area of the grid?

It seems that the styling for now is at a basic level. The Bildin Editors are not styled. Is there some code to style the buildineditors. In comparision with VCLGrid there is a lack of funtionality. For Example the ComboBoxEditor looks like that:


In my opinion all editors shouild be in dark mode when the grid itself is in dark mode.

Btw: I want to use the TMSFNCPanel as a TPanel replacement for better styling options. When i disable Header.Visible := false and adapt a new style with the FNCSTyleManager this option will be enabled by the StyleManager. Is this expected? What can i do to prevent the enabling of the visibility property of TMSFNCPanel when the style is changed in the stylemanager

Hi,

The style via FNC Style manager applies dark style settings for the grid appearance, but the controls used inside the grid are not styled because they follow VCL or FMX styling at application level. We'll look into the issue with the header style not being properly applied.

I want to refactor an old VCL-Application with TAdvStringgrids to FNCDataGrids. With the TAdvstringgrid it was very easy to adopt the application to a dark theme. Could you please provide some sourcecode how you style the inplaceeditor for example the comboboxes.

This is the code from your editing example to fill the combobox. I found no methods from FNCDataGrid to change the look of the editorcombo:

TMSFNCDataGrid1.Columns[idx].AddSetting(gcsEditor);
TMSFNCDataGrid1.Columns[idx].AddSetting(gcsEditorItems);
TMSFNCDataGrid1.Columns[idx].Editor := getComboBox;

TMSFNCDataGrid1.Columns[idx].EditorItems.Add('Office');
TMSFNCDataGrid1.Columns[idx].EditorItems.Add('On Leave');
TMSFNCDataGrid1.Columns[idx].EditorItems.Add('Flight');
TMSFNCDataGrid1.Columns[idx].EditorItems.Add('Abroad');

Editor or EditorItems have no styling methods.

So, for FNC there are 2 types of styling. You have VCL styles and FNC styles. With VCL styles (at application level), you need to set AdaptToStyle to True. This will style the grid, and also all inplace editors. The inplace editors are actually default controls. FNC styles only apply to FNC controls. You can also mix and match, meaning, apply a dark style on VCL application level, and then apply a dark FNC style on top of that.

I followed your approach. I created a new VCL Application and dropped a FNCDataGrid and a TAdvStringfrid on the form. I sert the Datagrid.AdapttoStyle to true. I set in the project options the appearance to 'Golden Graphite'. Filled 2 rows with the sampledata from the FNCDataGrid in the AdvStringgrid to schow you the difference. The Grid is not styled as expected, Inboundeditors are styled as expected. The FNCDataGrid should stlye the grid when the styling of the application changes like the styling changes are done in TAdvStringgrid without any additional coding.
Please see the difference:


Here in development mode:

Maybe you think about that nowadays the main theme color for younger users is the dark mode, not the white color theme mode. It looks old fashioned to the younger users.

Can you set AdaptToStyle to True in the form constructor?

Setting AdaptToStyle to True is not the solution. I got it basic working with two styles:. Adopt to the FMX_Dark Style = Darkmode and FMX_Light Style = Light Mode. AdaptToStyle must be set to False at any time. Here are the steps for styling any TMS FNC Components in VCL:
In Designtime change the Applicationstyle in Projetoptions for example in Windows 11 Modern Dark for a dark styling.
Drop in at a first step a TMSFNCStylemanagercomponent to the form. Without this compoent nothing will work! It doesn't matter which style is active in this component (bug?). Then drop a FNC Component on the form or use an exisiting one. Open with rightclick the stylemanager of any existing FNC component on the form and open the stylemanager. Choose FMX_dark. Now Combine Switch is visible but not responding (bug?). You must instead click on the fnc stylemanager and change in the prporties the style to default and back to FMX_dark and voila your app is styled in dark mode. But consider, all of the more complexer FNC Components are not properly styled itself. Look at the FNCPlaner example:


For example the Buttons at the bottom have the wrong fontcolor. White on white is not good readable. You will found alot of this sourcecode "mistakes" in nearly every complexer FNC Component. I had to write hundreds of codelines to do the work after changing the theme to a dark or light mode in FNCDataGrid. In my opionion you should not only look at the background of an applicationstyle and change only the background from this styling. You should also look at the fontcolors to do even only a really basic styling. For a good adopt to styling you should even look further in the stylingproporties of the style of the application itself.
I can send you some more screenshots of misstyling by the components from FNCDataGrid, FNCPagecontrol, FNCPlaner and so on if needed.
It seems for me, that TMS is not using there own FNC Components in there company for there own realworld applications (Desktop or Mobile). If i am wrong (i hope so), it would be nice if you coud publish some screenshots of your own TMS applications in darkmode with FNCDataGrids, FNCPlanner, FNCPagecontrol in a Darkmode.

Hi,

Thank you for your feedback. It's correct that some components do not behave well in terms of light and dark mode. The issue is that we support older IDEs and need to take care of all the differences. AdaptToStyle is an older implementation that automatically picks up VCL / FMX styles. Each IDE has differences in style handling. FNC style manager only applies appearance specific properties to the control when the property is set or selected, it does not automatically force the style of the application and does not take on the style of the operating system when comparing this with VCL / FMX styles. You might need to programmatically set the style to dark to make sure the grid or any other control takes on the colors. Although there are some workarounds, I agree there is much room for improvement. Rest assured, we have plans to implement a proper dark and light mode for FNC.

Hi Pieter,
good to know that there will be improvements in the future. Meanwhile i reduced styling to light and dark mode. I use on applicationlevel one light and one dark style. When the user wants to change the mode on runtime i first change the applicationstyle followed by changing in TMSFNCStylemanagercomponent the style to corresponing FMX_Dark or FMX_Light. After this i change the backgrounds and fontcolors in DataGrid, Planner and Pagecontrol and so on by code for those elements that are not properly styled after theme is changed. This works know. Thank you for your help.

1 Like