Editor table inner border resize event

1 Answer 70 Views
Editor
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Bob asked on 24 Feb 2023, 01:18 PM

When a table is resized in the editor using the inner borders, how can I get the event to determine this has happened?  I can see that the select event is fired, but I don't know how to determine it was from a resize of the inner borders of a table.  I have tried this code:

      select: (e) => {
        if ((e.sender?.columnResizing?._resizable !== null) || (e.sender?.rowResizing?._resizable !== null))
          this.handleEditorTableResizeValueChanged(e.sender.body?.innerHTML);
      }

However, this code does not seem reliable.  Sometimes it works and _resizeable is not null, but other times it is null until the next select event as if there is a delay.  Can you please provide insight to a reliable way to get this resize event?

Thanks,

Bob

1 Answer, 1 is accepted

Sort by
0
Accepted
Georgi Denchev
Telerik team
answered on 01 Mar 2023, 09:12 AM

Hi, Bob,

You could attach mousedown events to the resize handlers of the overall editor and the immutables themselves:

      $($("#editor").data("kendoEditor").body).on("mousedown", ".k-element-resize-handle", (e) => {
        console.log("Table Resizing")
      });
      $("#editor").data("kendoEditor").wrapper.on("mousedown", ".k-resize-handle", (e) => {
        console.log("Editor resizing")
      });

It's not as perfect as a full on resize event, however with a couple of tweaks it should give you the desired result.

Dojo

https://dojo.telerik.com/@gdenchev/AxAkaFUN 

Let me know what you think.

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Editor
Asked by
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Answers by
Georgi Denchev
Telerik team
Share this question
or