How to change table border color ?

[Ben Junior]

The SfRichTextEditor Table popup menu has two included options, "Dashed Borders" and "Alternate Rows", for the Styles. I have read the related doc on how to create custom styles, but what I need is to remove the border from the table and columns and couldn't figure it out. Also, if the user changes the style to  "Dashed Borders" or "Alternate Rows" for what I know so far, there is no way to revert back to solid border. 

[Revanth Krishnan]

Hi Ben, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your queries, 

 

Query 1: “I have read the related doc on how to create custom styles, but what I need is to remove the border from the table and columns”. 

 

We have validated your query and we have considered “Improvement in the table custom styles configuration in RichTextEditorTableSettings” as a feature request from our end and logged the report for the same and the fix will be included in our 2021 Volume 2 releases.  

    

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/25111 

 

Query 2: “If the user changes the style to  "Dashed Borders" or "Alternate Rows" for what I know so far, there is no way to revert back to the solid border”. 

 

After applying the "Dashed Borders" or "Alternate Rows" style to the table, it can be reverted back to the solid border by again clicking the  "Dashed Borders" or "Alternate Rows" from the table quick toolbar. We have prepared a video for your reference, 

 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture941019628 

 

Please let us know if you need further assistance. 

 

Regards, 

Revanth 

[Revanth Krishnan]

Hi Ben, 

 

Sorry for the inconvenience.   

   

Still, we have not implemented the feature “Improvement in the table custom styles configuration in RichTextEditorTableSettings” in the Volume 2 release. We will include this feature in the coming 2021 Volume 3 SP release. 

We appreciate your patience till then.   

   

Regards,   

Revanth 

[Ben Junior]

Hi Revanth, 

Thanks for the update. I was just thinking about this feature implementation since it is some how important in my project, but I understand that there are other priorities so I will have to wait a bit longer. Anyway, thanks again and keep up the excellent work you guys are doing with Blazor components and congratulations on all the awards Syncfusion received. Very well deserved.

Best regards,

Ben Junior 

[Gunasekar Kuppusamy]

Hi Ben, 

Thanks for your update about the Syncfusion.

We will try to include this feature before the mentioned timeline, we will let you know once the feature is included.

We appreciate the patience until then. 

 

Regards,

Gunasekar

[Gunasekar Kuppusamy]

Hi Ben,

Thanks for your patience,

We have now improved the “The table custom styles configuration” with the package version 19.3.48. Check the below-shared sample for reference. It is mandatory to configure the SubCommand for the DropDownItemModel, when using the built-in table styles or custom style. For the customized text, based on the SubCommand the functionalities will be performed.

For the usage of the Dashed border, Alternate rows and Custom styles use the below configurations

1. SubCommand = “Dashed” - For the dashed table border style.
2. SubCommand = “Alternate” - For the alternate-rows table border style .
3. SubCommand = “Custom” 
   - For the custom style to be configured for the table border using the cssClass.

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor>

    <RichTextEditorTableSettings Styles="@StyleItems" />

</SfRichTextEditor>

<style>

    .e-rte-content .e-rte-table.e-no-border td,

    .e-rte-content .e-rte-table.e-no-border th {

        border-style: none;

        background-color: yellow;

    }

</style>

@code {

   private List<DropDownItemModel> StyleItems = new List<DropDownItemModel>()

    {

         new DropDownItemModel() {Text = "Dashed Borders", SubCommand="Dashed" },

        new DropDownItemModel() {Text = "Dashed Different Spelling", SubCommand="Dashed" },

        new DropDownItemModel() {Text = "No Border", SubCommand="Custom", CssClass = "e-no-border" },

    };

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RichTextEditor_Test-306371406

Can you please check the above-shared sample and let us know if you face any difficulties?

Regards

Gunasekar