I recently inherited a client with an Umbraco 7 site, the previous development had resulted in some documents that had Grid Editor content sitting within the Nested Content (NC).
Although you can do this, it's considered an edge case by UMCO (the original authors of NC) and not an intended use-case for the package. These property editors can be used together, but there are some issues that effect the editor experience.
Where did the editor go?
After implementation and roll-out of the code my client's content authors found an issue: when collapsing / expanding NC or saving a change then the editor would disappear.
There is a thread here on github describing the issue and a fix was also implemented by Robin Neal (SudoCat). This fix came at a time just before the NC was merged into the Umbraco 7 core, so it never made the cut and the PR has been closed.
The JS fixes
The fix involves updating the JS for the NC plugin direcive, passing in a service called "NestedContentCallbacks", then using that callback service within the controller to keep the grid configuration.
This would be a really easy implementation if NC was still a plugin, as you could just put code updates into your own version of the plugin. To implement in Umbraco 7.7.0+ (when NC became part of core) you have to editor the following files:
/Umbraco/Js/umbraco.directives.js /Umbraco/Js/umbraco.services.js
Find the NC directive in the directives file, and update the code as per the pull request, then go into the services file and add the service, I appended it to the bottom of the service list for my client.
The drawback is when going forward you have to keep in mind that any upgrade path will mean that the changes you make will be overwritten.
Not an ideal solution. With my client I have amended the upgrade documentation to include the step of re-implementing this fix. At least now they have a usable NC / Grid experience.
The final change was to add a plugin to modify the CSS, as there were styling issues with the reorder button for grid content, the CSS is this:
.umb-nested-content__content .umb-editor-sub-header {
display: none;
}
.umb-nested-content__content .umb-editor-sub-header.-umb-sticky-bar {
width: auto !important;
height: 30px !important;
position: relative !important;
margin: 0 10px 0 10px !important;
top: 0 !important;
left: 0 !important;
padding: 5px !important;
box-shadow: none !important;
display: block;
background: #f3f3f5 !important;
display: flex !important;
justify-content: flex-end !important;
}
.umb-nested-content__content .umb-grid-width {
margin: 10px 0 20px 0 !important;
}
Wrapping up
This can be probably considered a bit of a hack, but I think the trade-off for being able to use the grid / NC together is worth it. I've included the code for the fix here on my github repo.
Finally, a thanks to Matt Brailsford and Lee Kelleher for an awesome plugin and Robin Neal for his hard work to create this fix.
As always, thanks for taking the time to read this, please reach out to me if you have any comments or suggestions.
Happy Umbracoing!
-- Matt
