Make the original Grid Editor in Umbraco7


Make the original Grid Editor in Umbraco7

Grid-layout of Umbraco available in Umbraco7.2 later, very versatile, It is now possible to create a page for any layout just this feature.

In such a grid-editor, is a way to make your own editor.

Basically it is good if we proceed as in the following page, but there is only one pitfall.

Try doing it while looking at the page.

Make a / app_plugins / mygrid / editor.html file called .

<div ng-controller="mygrid.controller">
    <input type="text" ng-model="control.value.text1" />
    <textarea rows="1" ng-model="control.value.text2" ng-style="control.config"></textarea>

Then we will make a / app_plugins / mygrid / package.manifest .

    "gridEditors": [
            "name": "my grid editor",
            "alias": "mygrid",
            "view": "/app_plugins/mygrid/editor.html",
            "render": "/app_plugins/mygrid/editor.cshtml", 
            "icon": "icon-thumb-up",
            "config": {
                "color": "red",
                "text-align": "right"

    "css": [

Here is the trap.

"gridEditors": [{

And here you, but, I do not have { the page you are browsing.

Please note that if you do not put this correctly editor is not recognized.

Others you can also like the following.

Just in case you want a slightly more complicated process, also let's create controller

Also it works without, but I think that it will want to do a variety so it's good to keep making.


angular.module("umbraco").controller("mygrid.controller", function ($scope) {

You want to create a view for the screen display

Next let's provide a view of the screen display.


Of course, you can write in the Razor.

@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>

css is let's make only file so good even the sky


In this state, let's start the site.

I had!

If not, let's look at the Data Type.

Where determining the size of the corresponding data type of grid, making it possible to check the editor to use.

Individual check might be out.

Actually enter the data, and then try to check the display.

comments powered by Disqus