Loading HTML with tables into editor

[Bob]

I am seeing an issue with tables that seems to be related to HTML that is loaded into the editor from another source, and I hope you can clarify if this is how it should work, or if I need to process the HTML in some way.

The steps to recreate this issue are as follows:

1. Create some html outside of Kendo with a table that has styling (borders, backgrounds, etc., we are using the RadRichTextBox WPF editor).

2. Load this html into the Kendo editor.

3. In the Kendo editor, add a new table below the original table by selecting the grid control and dragging to get the rows/columns desired.

At the point the new table is added, the original table loses all styling (see attached images).

After investigating this issue, I found that there is a class associated to a table when the table is created within the Kendo editor.  The class is "k-table".  When this class is not present from html outside of the editor, the issue seems to be happening.  Also, I noticed that if I create the second table using the Table Wizard button at the bottom of the grid control, the styling is not removed from the first table.  Only when using the grid drag does it happen.

Is this something that you can fix, or are we required to insert the k-table class to get around this issue?

Thanks for your help, and let me know if you need more information.

[Ivan Danchev]

Hello Bob,

I tried to reproduce the shown loss of styling, but was unable to do so. See the attached zipped video.

With the table being loaded initially or through the viewHtml tool, adding new table is added in the Editor does not affect the styling of the previously added one. The original table keeps its styling.

I could be missing something with regard to the steps that need to be followed for the issue to be exhibited, so could you demonstrate the issue? Here's the dojo example I used to record the video: https://dojo.telerik.com/EsAPeyEx

Regards,
Ivan Danchev
Progress Telerik

[Bob]

Ivan, thank you for providing the dojo/video.  I am using the Asp.Net MVC Razor to setup this editor with tables and other custom controls on the editor, but I was able to paste the necessary components into the dojo and find that there was additional javascript/css that was causing this issue, and with basic setup this is not an issue with your tables.  Therefore, this is our problem and I apologize for not seeing this custom code previously.

However, I do see some other issues while testing your dojo, so I will report those here and hopefully this won't be a wasted thread.

1. I put the cursor in the cell with name John, and opened the table wizard.  I selected the cell tab. Select All Cells is NOT checked.  I changed the border color of the cell and hit OK.  All cell border colors are changed.  I then opened up the table wizard again, cell tab, and changed the border color again.  Only the selected cell border color is now changed (which is the correct behavior).

2. Cell spacing and cell padding in the wizard appear to do nothing.

3.  After changing cell spacing, cell padding, and cell background a few times, the third row of the table disappeared.  I had this happen a couple of times, but I don't know exactly what is triggering the removal of the row.  I attached a screen shot.

For these issues, I did not change the dojo code, so you should be able to recreate with the same code.

Thanks, Bob

 

[Bob]

Ivan, this is the custom code that was causing the original issue:

https://docs.telerik.com/kendo-ui/knowledge-base/editor-create-table-borders

We were using this custom solution to create default border and other styles, but when a table is loaded from existing HTML without the custom class, those tables will be restyled also.  Is there some way in this code to target only the new table and not all tables without looking at a class?

[Ivan Danchev]

Bob,

I've logged the issue related to applying styles to a specific cell on your behalf in our Feedback Portal: https://feedback.telerik.com/kendo-jquery-ui/1467884-styles-applied-to-a-single-cell-of-an-existing-table-in-the-editor-affect-the-whole-table

I've updated your Telerik points for this report.

3. I was unable to reproduce the row disappearing. Would you share the steps that need to be followed for this to occur?

As for targeting only a specific table, the Html of the tables in the Editor looks like this:

<table class="k-table">
...
</table>

So they are indistinguishable, unless a custom class, or id, or another attribute is set to make them recognizable.

Regards,
Ivan Danchev
Progress Telerik