The samples in this section have not been verified against the latest version of Umbraco.
A new Property Editor called the Block based Grid editor will soon be available as a substitute for the existing Grid Layout editor. For more information, see the Block based Grid editor for Umbraco CMS in the Umbraco Roadmap.
Create a file in /App_Plugins/yourpackage/editor.html
and add the following to the editor.html file:
Save the file and add an editor to the /App_Plugins/yourpackage/package.manifest
file:
Add a new file: /App_Plugins/yourpackage/editor.cshtml
- this file will handle rendering the entered data - this path is done by convention so:
view: 'editor' => views/partials/grid/editors/editor.cshtml
view: '/App_Plugins/path.html' => /App_Plugins/path.cshtml
If you wish to use something entirely different you can give the editor a separate render
value which follow the same conventions.
If you are building something slightly more complex then a text area, you will need to add a controller to the grid editor view. So first add a ng-controller attribute to the grid editor html - this works like building a property editor:
To wire up a controller to this view, create the file /App_Plugins/yourpackage/editor.controller.js
and add a standard angular controller declaration:
Finally, we need to tell Umbraco to load this JavaScript controller when the Umbraco application boots. This is like building a property editor. Add your JavaScript (and css dependencies) in the package.manifest
file in the /yourpackage
folder, and configure it to load your controller file.
So to summarize, to create a custom grid editor from scratch, you will need to:
Create a grid editor view .html
file
Create a grid render .cshtml
file
Create a grid editor controller .js
file
Create a package.manifest
to register the editor and make Umbraco load needed files
This process tries to be as close to building property editors as currently possible.
Next add this c# to the .cshtml file:
When rendering the .cshtml file will receive a dynamic model with the raw data of the editor:
So you can now use these value to build your razor output like so: