Table Edit Tools Showing on init with content

[Lee]

Issue 1:

When I initialize a kendo editor from a div with content, all of the table tools are shown in the editor toolbar (insert row, insert column, etc) on initialization. Once the user clicks in the box they disappear. I prepared a Dojo showing this. 

In the Dojo, you will see there are 2 different editors. The first editor uses a function I wrote that worked in version 2022 but doesn't in version 2024 of Kendo. The second editor is just a default initialization using none of my custom code. The purpose of the first one is to show the toolbar on initialization. In both instances of the editor, you will notice that the insert row, insert column, etc are showing at first and then quickly disappear. This only happens the first time the user clicks into the editor. These should not be visible until the user clicks into the editor and selects a table.

I did notice that if I initialize the div empty, then add the content later programmatically (like this: kendoEditor.value("Hello World");), the issue doesn't happen.

Issue 2: 

Once you add a table, you can't remove it using backspace or delete. Try this example: 

1. In either editor, click the insert table button.
2. Insert a table.
3. Click into the editor and press backspace and/or delete. The table doesn't go away.

https://dojo.telerik.com/@dojolee/OgOpalaL

Note: I also create a bug report for this here: Bug Report

[Lee]

While I believe this is a bug, I did find a workaround for issue 1 when the div already has a value on initialization: 

html: <div id="editor">Hello World</div>

  let value = $("#editor").html();
  $("#editor").empty();
  let kendoEditor = kendoTextEditor("editor", true); // this is my custom function but you can just initialize the editor like normal here.
  kendoEditor.value(value);

[Lee]

For issue 2, I noticed if you click before the table and press delete twice, it goes away. I don't think any users will figure this out though. 

[Neli]

Hi Lee,

Issue 1:

I tested the provided example, but on my side, the tools for adding/deleting columns/rows are displayed once the user creates a table and clicks on it, which is the expected behavior. The behavior is similar to version 2022 R1. Here is a screencast using your Dojo example - https://go.screenpal.com/watch/cZiO2OVPgjx.

However, if you need to display the tools all the time without hiding them I would suggest removing the 'k-hidden' and 'k-force-hidden' classes from the needed elements. Below is an example:

 var editor = $("#editor").data("kendoEditor");
$(editor.window).click(function(){
         setTimeout(function(){
                let tableTools = $('[data-command="createTable"]').next()
                $(tableTools).removeClass('k-hidden').removeClass('k-force-hidden')
                $(tableTools).find('.k-button').removeClass('k-hidden').removeClass('k-force-hidden')
         }, 10)
})

Here is a Dojo example where this is demonstrated. - https://dojo.telerik.com/@NeliK/amehaBUC

Issue 2:

Regarding the second issue - The observed behavior is due to the browser. The behavior will be the same if you try to create a standard table in a contenteditable div. Here is such a small example where Kendo scripts are not loaded and no Kendo components are initialized - https://dojo.telerik.com/@NeliK/unAXihaZ. If you try to delete the table you will need to press the backspace twice.

I remain at your disposal in case you have any additional questions on the matter.

 

Regards,
Neli
Progress Telerik

[Lee]

The screencast shows exactly what I was complaining about in the first 2 seconds. You'll notice all the table buttons are displayed initially. Then when you click, they all disappear. The complaint is that they should not be there to begin with and should only be displayed when a use clicks on a table. You can see the issue at the 0 and 9 second marks in the top editor and the 14 second mark an in the middle editor.

[Lee]

While Issue 2 might be due to a browser behavior, it should be fixed in the Kendo UI library. In your browser example, at least the text gets highlighted after the first backspace. In the Kendo Editor, that doesn't even happen if you click before "Hello World" after adding a table and press backspace. 

[Neli]

Hi Lee,

Regarding the first issue I am pasting a link to the related Bug Report in the Feedback Portal:

- https://feedback.telerik.com/kendo-jquery-ui/1659194-kendo-editor-showing-all-tools-on-initialization

The status of the item is Unplanned, which means that it is a valid bug report, not scheduled for implementation yet. 

 

Regarding the second issue: As the observed behavior is by default and is expected the issue could not be considered as a bug. However, you could log a feature requets in our Feedback portal describing the functionality and behavior you would like to see implemented. Thus, the other users in the community could vote for the idea.

- https://feedback.telerik.com/kendo-jquery-ui

Regards,

Neli