U4-10450 - Grid components using rte - grid-rte picker buttons not working any more after upgrade

Created by andrei 21 Sep 2017, 13:52:36 Updated by Malte Arzt 13 Aug 2018, 09:19:55

Duplicates: U4-8590

Relates to: U4-8590

Grid-rte directive used in some grid editor components is not working properly after upgrade from 7.2.4 to 7.6.6. More precisely the picker buttons are not functioning anymore (media picker, link picker, embed picker, macro picker).

I did some digging and found out that the directive is rewritten and now is exposing some methods for the pickers as directive attributes. But they are not bound to any functionality by default.

Is this by design, is it a bug, how can it be fixed? The documentation on this subject is pretty hard to find or outdated/useless most of the time.

2 Attachments

Download gridRte-Issue10450.zip


Sebastiaan Janssen 25 Sep 2017, 11:03:52

I've commented on U4-8590 - unfortunately, I can't reproduce this error.

andrei 25 Sep 2017, 11:29:16

Hi @sebastiaan, Did you test with grid editor with a custom component that has embedded rte with grid-rte directive? Because if you just simply add a rte field in a docType, that works fine, but that's not the same context.

Sebastiaan Janssen 25 Sep 2017, 13:13:48

Hi @amv - have you tried this in a fresh 7.6 install?

andrei 25 Sep 2017, 14:51:52

I just tested with 7.6.6 and the problem is still there. I attached here the property editor as I have it in my App_Plugins and the grid.config.js. You can drop this in a fresh install and try to use the component in the grid.

andrei 02 Oct 2017, 11:37:02

Is this issue closed and no one looking at it anymore? If so I think it should be reopened. This was closed as duplicate and the other closed as non-reproducible. But it can be reproduced, I tested and provided the info in the comment above.

Sebastiaan Janssen 02 Oct 2017, 18:09:04

Unfortunately we won't be able to look at this for a while, if you can repro then make sure to see if you can investigate why exactly this breaks. If you can point to something specific then that would be very helpful!

andrei 02 Oct 2017, 19:09:53

Hi Sebastiaan, There was this grid-rte angular directive which we could use in grid components and that has been rewritten/refactored. If you look at the first image attached to this issue, now all picker methods are exposed as attributes of the directive. The default functionality that was attached to these buttons was removed for some reason, so the picker buttons are not doing anything anymore (media picker, macro picker, link picker..). I imagine this problem affects anyone who used rte in a grid editor component and it will surface more as people do upgrades. And I would love to fix it myself, if only, I could find some example or documentation how to use those method attributes with the directive. But finding that is like digging for gold..

Sebastiaan Janssen 02 Oct 2017, 20:05:30


Maybe a hint to find the gold will help, maybe start debugging around here? https://github.com/umbraco/Umbraco-CMS/blob/dev-v7/src/Umbraco.Web.UI.Client/src/common/directives/components/grid/grid.rte.directive.js#L304

Looking at the blame tool, it looks like this was changed in v7.4.0:


So you might need to do something extra in your custom plugin to make it work?

Sebastiaan Janssen 02 Oct 2017, 20:46:11

I've been playing around with this and indeed, this seems like an interesting challenge, I am not good enough in Angular to figure out what needs to happen here. There must be a trick to it!

@madsrasmussen got any tips here?

andrei 23 Jan 2018, 13:37:51

Hi Sebastiaan, No news on this? The customer still has this problem

Bo Jacobsen 27 Jun 2018, 12:26:33

I am not strong enough in Angular either.

But i got the same issue. Posted question here https://our.umbraco.com/forum/developing-packages/92518-use-grid-rte-in-umb-overlay-with-working-link-selector

It seems like Andrei said, that it is not bound to any functionality by default.

I think the fix would be to somehow reuse the functionality as default from https://github.com/umbraco/Umbraco-CMS/commit/5d4f4376dd888e7b65d07c17f6245fcec744a1a2 --> src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.controller.js

Malte Arzt 13 Aug 2018, 09:19:55

Hi Guys, i posted a Workaround for this a couple months back. As soon as i added the "$scope.$digest()" it worked flawlessly, i had the same Problem again today and the Workaround is still "fixing" it. https://our.umbraco.com/forum/umbraco-7/using-umbraco-7/50241-Im-not-able-to-insert-a-new-link-with-the-RTE-editor-in-umbraco-711#comment-286668


Is there any Reason not to do it this way?

Priority: Normal

Type: Bug

State: Open

Assignee: Mads Rasmussen

Difficulty: Normal


Backwards Compatible: True

Fix Submitted:

Affected versions: 7.6.6

Due in version:


Story Points:

Cycle: 4