Need a special offer?Find out if your project fits.
+

Adding additional font family in conditional formatting dialog

Answered
vinoth asked on March 18, 2024

Hi team,
My requirement is to add new font family in conditional formatting dialog such as "Roboto, sans-serif" in the existing dropdown.
 
Please use this link as reference
https://jsfiddle.net/flexmonster/zypcc8tx/

11 answers

Public
Maksym Diachenko Maksym Diachenko Flexmonster March 18, 2024

Hello,

Thank you for reaching out to us.

This functionality can be achieved by overriding the code from flexmonster.toolbar.js. To add a new font, you should modify the FlexmonsterToolbar.prototype.defaults.fonts array containing a list of available fonts. Note that any toolbar modifications should be included in the beforetoolbarcreated event handler to ensure that changes are made after the toolbar script is loaded:

beforetoolbarcreated: (toolbar) => {
FlexmonsterToolbar.prototype.defaults.fonts.unshift("'Roboto', sans-serif");
}

Also, ensure all custom font families added are imported to the page.

You are welcome to check the JSFiddle example: https://jsfiddle.net/flexmonster/md5yk406/ 

Please let us know if this solution works for you.

Best Regards,
Maskym

Public
vinoth March 18, 2024

yes it worked i just twicked the options, 
 
Since i cannot acces FlexmonsterToolbar object . I used like this

beforetoolbarcreated: (tool) => {
    (tool as any).defaults.fonts.unshift('Roboto,sans-serif');
}

I have one more question?

How do i set default font family when the user click on "+" button in conditional formatting dialog box?

Public
Maksym Diachenko Maksym Diachenko Flexmonster March 20, 2024

Hello, 

Thank you for your reply.

Please note that changing the default settings of the newly added condition is not supported. We are planning to add functionality to Flexmonster in an upcoming minor release. Our team will contact you when this feature is ready, ETA Apr 15th.

Speaking of adding the new font family to conditional formatting in Angular, the solution would be the following:

(this.pivot.flexmonster.toolbar as any).defaults.fonts.unshift("'Roboto', sans-serif");

Note that to use this, you would have to define the FlexmonsterPivot object in the following way:

@ViewChild('pivot')
pivot!: FlexmonsterPivot;

Feel free to contact us if any questions arise.

Best Regards,
Maksym

Public
Nadia Khodakivska Nadia Khodakivska Flexmonster April 15, 2024

Hello,

We are pleased to inform you that it is now possible to override default formatting styles in the conditional formatting view. To modify the styles, use the toolbar.defaults.defaultConditionalFormat object. Please check the following example for illustration: https://jsfiddle.net/flexmonster/e8rdch10/

This feature is available in the 2.9.75 version of Flexmonster: https://www.flexmonster.com/release-notes/version-2-9-75/

You are welcome to update the component. Here is our guide on upgrading to the latest version: https://www.flexmonster.com/doc/updating-to-the-latest-version/

Please let us know if the feature works. Looking forward to hearing from you.

Kind regards,
Nadia

Public
Maksym Diachenko Maksym Diachenko Flexmonster April 24, 2024

Hello, 

Hope you are doing well.
We are wondering if you had time to try the new feature for overriding the default conditional formatting.
Please let us know if it works for you.

Best Regards,
Maksym 

Public
vinoth April 25, 2024

Hello Team,

I want to add "Roboto" font family as default in conditional formatting window. 

(tool as any).defaults.defaultConditionalFormat = {
                    fontFamily: 'Roboto',
                    fontSize: '8px',
                    color: '#E0F2F1',
                    backgroundColor: '#00897B'
                };

I tired this , but it is not listing in the dropdown at all.

Public
Maksym Diachenko Maksym Diachenko Flexmonster April 25, 2024

Hello,

Thank you for your reply.

To make the custom font available in the UI dropdown, you should first add it to the default fonts array:

toolbar.defaults.fonts.unshift("'Roboto', sans-serif");

After this, the font will be visible and selectable from the conditional formatting UI. Additionally, you would be able to predefined it as default. You are welcome to check the example: https://jsfiddle.net/flexmonster/8puxoaw1/ 

Please let us know if our answer helped you.

Best Regards,
Maksym

Public
vinoth April 26, 2024

Yes by default Robot font family is listing in the dropdown. But im facing one issue in current version.

steps:

  1. Default "Roboto" family is appearing in the dropdown when the user clicks on add condition button
  2. Now the user change the font family from "Roboto" to "Arial" in the recently added item.
  3. Now the user clicks on add condition , now new row is getting added with font family as "Arial" instead of "Roboto".

    After changing the font family in the existing row , default font family is also updated .

Public
Maksym Diachenko Maksym Diachenko Flexmonster April 29, 2024

Hello, 

Thank you for reporting this issue.
We are happy to inform you that the issue with the default conditional formatting reset was fixed. This is available in the 2.9.76 version of Flexmonster: https://www.flexmonster.com/release-notes/version-2-9-76/ 
You are welcome to update the component: https://www.flexmonster.com/doc/updating-to-the-latest-version/

Please let us know if the fix works.

Best Regards,
Maksym

Public
vinoth April 29, 2024

Hello,

I believe the issue is not fixed yet after the update.

I have installed the latest version 2-9-76

Steps to reproduce

  1. Add condition , by default Roboto font is getting added
  2. Add new condition again , new row is getting added , now the user is changing the font family to Arial for the newly added item.
  3. Add one more condition , new row is getting added but this time, it is adding with font family as Arial instead of the default font family Roboto.
Public
Maksym Diachenko Maksym Diachenko Flexmonster April 30, 2024

Hello,

Thank you for your quick response.

We apologize for the oversight in not including the fix in the minor release as intended. The updated Flexmonster build, which includes a fix for this issue, was already published. If you are loading our library from NPM, the Flexmonster version 2.9.76-1 should be installed.

Looking forward to hearing your feedback.

Best Regards,
Maksym

Please login or Register to Submit Answer