Build Your Own Editor

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.

Grid editor controller

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

This process tries to be as close to building property editors as currently possible.

Rendering grid editor content

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: