Hi Olof and welcome to Our.

Try to see this session from this year's Codegarden, Per is talking about the grid, and how you can configure it.

The talk about the grid starts at 27 min ish

http://stream.umbraco.org/video/9961032/thinking-in-seven

Hope this helps you a bit further,

/Dennis

Thanks for the fast response Dennis!

I managed to get it working. Here's what I did:

• Add a property editor in App_Plugins, but make sure you use 'control.value' as model and not 'model.value' (which will refer to the grid scope) in your controller.
• The package.manifest only has to specify the javascript(s) for your editor plugin.
• Add the configuration for the editor in Config/grid.editors.config.js. Make sure your view path points to the html view in App_Plugins, relative to the Umbraco folder (../App_Plugins/'wherever your view is')
• Add a cshtml template in Views/Partials/Grid/Editors

Hi Olof

Can you share the complete solution (App_Plugins\xx folder) from which others can learn with beginner knowledge on angular and the grid?

That would be much appreciated.

I have the same problem, and still haven't figured out how to make them visible in the backoffice.

For some time I've been searching the forum and found couple of interesting links but at the end I haven't made it work. I'm trying to extend the Fanoe starter kit which already has custom editor properties. I think that I'm stuck around the part with the package.manifest, since I added the view, also the render cshtml in the app_plugin folder.

It would be very useful for me If you could please share your example or elaborate more on how to add custom grid editors.

Greetings

To make your editor available you need to edit to the grid.editors.config.js file which can be found in the config folder and make sure that is set as allowed editor on your datatype;

You can that information in the documentation in the section build your own editor : http://our.umbraco.org/documentation/using-umbraco/backoffice-overview/property-editors/built-in-property-editors-v7/Grid-Layout

Dave

Dave,

thanks for a quick reply. I've already tried to add my editor in the grid.editors.config.js file but I cant set it to be allowed on my datatype because it's missing. I can't see it after adding it on the grid.editors.config.js file.

Greetings

That's probably due to caching. If you open the page with chrome developer tools and disable cache you can see it.

Another option is to update the client dependency cache.

Go to config/ClientDependency.config and search for the version attribute. Increment this and reload your page.

dave

When I disable caching, none of the editor properties are shown. Also it doesn't work with the ClientDependency.config version increment :/

Any other suggestions?

Sounds like you have an error in your grid.controllers.config.js file - check the commas especiallly!

Can you post your editors config file ? Maybe there is a error in there ?

Dave

Steve I don't have the grid.controllers.config.js file only the grid.editors.config.js

And in the editors config file, almost everything's the same as it came with the Fanoe starter kit, except I added between these two parts    

   {
        "name": "Image wide",
        "alias": "media_wide",
        "view": "media",
        "render": "/App_Plugins/Grid/Editors/Render/media_wide.cshtml",
        "icon": "icon-picture"
    },
    {
        "name": "Image wide 2",
        "alias": "media_wide2",
        "view": "media",
        "render": "/App_Plugins/Grid/Editors/Render/media_wide2.cshtml",
        "icon": "icon-picture"
    },
    {
        "name": "Image wide cropped",
        "alias": "media_wide_cropped",
        "view": "media",
        "render": "media",
        "icon": "icon-picture",
        "config": {
            "size": {
                "width": 1920,
                "height": 700
            }
        }
    },

This looks correct. So it still looks to me like a browser or a clientdependency caching issue.

dave

Dave thanks again for your help, but still it's not working.

Do you by anychance have an example project with these custom grid editors which you could send to me?

Haris

Sorry before - I did mean the grid.editors.config.js  - just check there isn't a comma after the final closing brace. Also - is there anything in the error console of the dev tools when Umbraco tries to load the editors?

Patrick has an example download as a link at the very bottom of this thread: http://our.umbraco.org/forum/umbraco-7/using-umbraco-7/59563-Tutorial-on-creating-custom-grid-editors?p=0  This works and is a handy content picker example (though not feature complete). 

Downloaded the files from your link, copied them to my project and deleted files inside clientdependecy folder, also incremented the version inside config/clientdependency.config started my app and still the same... :/

Any errors in the dev tools?

Heey people

Somehow it's working now :) I'm not sure how exactly, I kept doing the same thing over and over (incrementing the ClientDependency and deleting the cache) and somehow it sudenly started to work as it supposed to :D Normaly I wouldn't be satisfied with such and answer but after I spent so much time on this I'm just glad it's working. Probably I'll figure it out some other time.

Once again, thanks to all you guys who were helping me out :)

I've found something around the need to touch the webconfig, restart and then re-save the data type and republish pages that have the grid on it for some changes to come through. Perhaps that explains it?!

@Steve - yep, I had the same issue as you and found the only consistent way to push through changes to the grid (and associated changes to views or renders) was to touch the web.config file as you said

is working on a reply...