Child component not selectable when using custom view

Question

I'm trying to create a custom component that creates it's own view with nested HTML. I do not want this HTML to be rendered as a component so I use (using jQuery) view: defaultType.view.extend({ init: function () { $(this.el).html('

'); }, getChildrenSelector: function () { return '.container'; }, }) But, if I add child components, they are not selectable through the editor. They can only be selected through the Layer panel. I've created a jsFiddle of the issue: http...

artf · Accepted Answer

If you add elements via View you can't select them, only Models can be selectable Read this page https://grapesjs.com/docs/modules/Components.html you also create new types without isComponent

prestonkscott · Answer

@artf I understand how to use isComponent. I will be using fromElement: false so it's not required for how I intend to use grapes. I do not want the elements added to the view to be selected, I do however want nested components to be selectable. Currently they are not. For example, if I render this as the Component view: Then, then I drag & drop a child component on the Component above. I do not want the nested

or
to be rendered as components in the editor. I presume this is what get...

artf · Answer

Ok, now I got it. The getChildrenContainer should work as you expect, I'll just try to remove those pointer-events stuff and make the hover work more like the select. BTW you don't need jquery, grapesjs under the hood uses cash (which has jquery-like API) so you can do: this.$el.html('...'); There is also a method to get the children container this.getChildrenContainer().style....

Child component not selectable when using custom view

Question

Answers (3)

Related Questions and Answers

how to render block manager outside container?

Component Drag Event

Select Parent Function not working when parent element is not selectable

RTE toolbar appears in the top panel

Paid Plugins That Match This Issue

Related tutorials

Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉

GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework

Browse Plugin Categories