Hi Patrick,

Try to see this http://stream.umbraco.org/video/9961032/thinking-in-seven session from this year Codegarden where Per and Niels from the Umbraco HQ talking about Umbraco 7 in general, and Per talks about the Grid, and how you can create some new grid editors for the grid.

I also think this workbook about AngularJs from Per, can help find out how you should build your custom editor. https://github.com/umbraco/AngularWorkbook and http://umbraco.github.io/Belle/#/tutorials

Or here a an example on how to make a property editor https://github.com/perploug/UkFest-AngularJS-Demo

Hope this helps,

/Dennis

Hi Patrick

Documentation on the grid editor itself seems to be non-existing currently.

But in regards to creating your own property editors there is a lot of information in the links Dennis provided above.

But in regards to defining grid editors you should have a look in the /config/grid.editors.config.js file - It's pure JSON defining the grid editor. For instance there are some defaults editors defined out of the box in a clean installation without any starter kit installed. It could for instance be the "Headline", which looks like this:

{
    "name": "Headline",
    "alias": "headline",
    "view": "textstring",
    "icon": "icon-coin",
    "config": {
        "style": "font-size: 36px; line-height: 45px; font-weight: bold",
        "markup": "<h1>#value#</h1>"
    }
}

Now if you want to add a sub-heading grid editor for instance then you can add it right after the last defined object like this

{
    "name": "Sub headline",
    "alias": "subheadline",
    "view": "textstring",
    "icon": "icon-coin",
    "config": {
        "style": "font-size: 30px; line-height: 45px; font-weight: bold",
        "markup": "<h2>#value#</h2>"
    }
}

Remember to add a comma after the last object after, which you're adding the sub-heading.

Now hit save.

In order for this to take these steps

1: Go to the /App_Data/Temp/ClientDependency and delete the files 2: Go to the /config/ClientDependency.config and increment the version attribute 3: Go to the web.config and search for "Debug" - There is only one match - Change the debug attribute to "false". This makes sure the cache is being disabled and also recycle the app pool. In production you want the debug attribute to be set to "true" but while developing you want to have it set to true to avoid cache issues, which can lead to a lot of confusion.

I think that step 3 should initially really be enough but to be on the save side I recommend to do the 2 first steps as well. Afterwards you should just touch the web.config in order to recycle the app pool to see your changes take effect.

Ok, so I have not quite figured all the stuff in the editor.config file out just yet. But the views you can choose from are placed in the /views/partials/grid/editors folder - As you might recall we set the sub-heading to use the "textstring" view, which also exists in the folder.

If you have look at it you can see that it reads the configuration file and determines how to parse and output the snippet. The same goes for the other views already created. If you need to create another view, which you want to use in the editor.config file this is where you want to add it. But please note that the view must be created from the Umbraco backoffice it seems - And unfortunately it's not currently possible due to a bug filed here http://issues.umbraco.org/issues?issueFolder=51-10

So now you can configure your grid editor datatype in the "Developer > Datatypes" section where you should be able to add a new property editor based on the "Grid layout" property editor. So if you right click the "Datatypes" folder and choose "Create" you can select this type from the dropdown.

Then you will see a lot of configuration options as shown in the 1. screendump below. And if you click the "1 column layout" then to the right a pane will popup - Click the big grey area and beneath it some configuration options will appear. As you can see on screendump 2 there is a text saying "Allow all row configurations". So by default all the grid editors defined in the grid.editor config file will be allowed in this row. But if you remove the checkmark you will see all the different options and will be allowed to choose specifically, which grid editors that should be allowed in a particular row.

I hope this write is enough to get you started :) I hope all the bricks will come together as well when you have given it a spin.

Cheers, Jan

Thanks for all the info. I will get watching/reading those links. 

I have had a think about this and for now the best bet for me is to create a property editor with a content picker on - like the included media picker, but for content instead. I have got as far as plumbing in the view and renderer, but I am stuck on getting the content picker working.

how/where do I create an ng-controller? and I assume the ng-click function is defined in here.

Hi Patrick

If you want to create your own custom property editor then start with reading through the Angular workbook link Dennis provided above. It will answer the questions :)

/Jan

Sounds like we need to promote the documentation a bit more:
http://our.umbraco.org/Documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Grid-Layout
http://our.umbraco.org/Documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Grid-Layout-Best-Practices

Ps. The view does not need to be created from the backoffice, you can just do it on disk!

Pps. I do believe (but I'm not entirely sure) that you'll indeed need to build a property editor for content picking and then you can tell your view to use the controller for that property editor. I gave it a quick try with the built-in content picker but that didn't work (I'm guessing because the configuration information is empty).
I tried to use this at the start if my view: <div ng-controller="Umbraco.PropertyEditors.ContentPickerController" class="umb-editor umb-contentpicker"> but again, it gives some javascript error that I don't yet know how to track down.

Ppps. The View can also exist in App_Plugins if you set it like so in the grid.editors.config.js: "view": "/App_Plugins/MyPluginName/grid/editors/myview.html", (of course you can then choose any directory, doesn't have to be /grid/editors/

Aaah, sweet! Could not find them when I tried browsing through the documentation and if it's been mentioned on the blogposts about the 7.2 release I have missed that as well (Skimming).

Regarding the ability to create the views on disk I got a 404 when I tried earlier today - That's why I was in doubt about if it was possible or not. I will see if I can try and reproduce later on.

Cheers, Jan

Remember the path is case sensitive. Make sure to recycle the app pool as well and to clear browser cache properly.

I'm trying to do something similar I believe. I've followed the examples and have can see how I can add a custom editor (a node picker) to the grid but I just want to check I'm understanding how this is supposed to work in the full process.  

I have in mind to have a set of common carousels and promo panels. Users can then "pick" these blocks using a grid on certain pages where these blocks are common content (held at the root node probably).

I'm quite new to the grid so I started with the @CurrentPage.GetGridHtml("testGrid") but obviously all this is going to do with a node picker value out of the box is output the Node ID.  I've had a dig and can see that the element is passed to /views/partials/Grid/Editors/base.cshtml which basically looks for a matching .cshtml file to the editor type.

Am I right in thinking all I need to do is to write my code in a custom GridNodePicker.cshtml to create the custom HTML needed for a carousel or a promo panel (probably switching on doctype)? 

I've got as far as creating the textarea example as an editor in the grid so far - any tips on a fully fledged node picker would be much appreciated!!

I have got a content picker working which I think is just what you need. Its pretty basic but it does the job for now. You can select another content node with it (using the built in content picker) and when the page is rendered it calls Html.Partial passing the cshtml template of the selectd node and the selected node as an IPublishedContent model which sounds like how you want the carousels to render.

Note, that all this can be done as the system is now by inserting a Macro, but I am hoping to extend this in the future to streamline the proces for editors.

I cannot see a way of attaching a zip file to this message, but I have uploaded it to 

http://www.love2datesingles.com/media/65352/umbraco-custom-grid-editor.zip

I have put all of the coide into a App_Plugin to keep it seperate. The only other file is grid.editors.config.js which is in the config folder. Don't overwrite this file with mine, you will need to add the JSON snipit to your own file. The package.manifest will automatically install a new Grid Controller.

SPC.Controller.js - This is simply a wrapper round the existing content picker. 

SPCPagePart.html - this is the back office render, it shows the selected node name, Id and the path to it. Lots to do here, this data is saved at the time of selecting the node. Ideally this should be found at display time so the full node path can be shown and will reflect any renaming/moving.

SPCPagePart.cshtml - the view that renders the partial at runtime.

For improving, I would like to extend the content picker so you can filter by DocTypeAlias or a specific start node. Mainly so you can only pick nodes which are meant to be embedded in this way.

Patrick, that sounds like what I was about to spend my afternoon trying to write. I'll take a look - sounds like I owe you a beer! 

This works pretty well - good work! One point to bear in mind if anyone looks to use this in production, it allows the user to create an infinite loop (you can select the same page node as a "part page" on the page it's to be rendered on which then causes an infinite loop until IIS crashes!

I've just locked it down to my carousel node (mine is ID 1066) for now by modifying the SPC.Controllers.js file with this for now. I'll take a proper look on Monday. 

 dialogService.contentPicker({
                multiPicker: false,
                section: "content",
                treeAlias: "content",
                startNodeId: 1066,
                callback: function (data) {

                    $scope.control.value = {
                        id: data.id,
                        name: data.name,
                        path: data.path
                    };
                    $scope.setPreview();
                }
            });

Thanks for finding that issue, thankfully no-one has done this on one of our sites yet. Also for finding the Start Node and Tree alias options, is the TreeAlias a doc Type alias? I can't get it to do anything.

Its a shame these options are not exposed on the data type.

I think it's just for either "media" or "content" ... I read somewhere you need this to make the start node work. 

Ok, thanks. I have set the start node to where all my PageParts are anyway so this pretty much ensures only the right nodes casn be picked.

Hi Patrick/Steve,

Thanks for the code you provided in this thread - super helpful! I'm just trying to integrate it into another custom grid editor, but obviously the @Model.value.id value isn't returning the correct ID from the content picker. I tried to edit the JS controller to change the name but haven't had any luck with that so far. Would you be able to point me in the right direction?

Ed,

I am not sure what your issue is without some sample code. 

I have created a working property editor, although I am not using it at the moment as courier does not suport it yet. You can download the property editor form this courier issue http://issues.umbraco.org/issue/COU-124 to see how it works.

Hi Patrick

This is very good work. I've downloaded the zip from your first post, and it is working perfectly. 

I'm wondering if it is possible to render the .cshtml template file in the grid in the backend CMS - Just as you do it in the front-end view..(change the "SPCPagePart.html" to the "SPCPagePart.cshtml" file)?

Best regards Rasmus

Rasmus,

       I have moved back to using a macro instead of this as Courier is not compatible with grid propery editors yet. The html is a template which is run client side (a cshtml is run server side), so you cannot simly just change the extension. In order to do this you would have to make some ajax calls to the server. I decided not to render the page part cshtml in the back end as with a wide variety of page parts I couldn't gaurantee all of them would render correctly. Instead I just show the node selected as in this image:

Asa this is being rendered form a macro, it is run server side so you can use 

    if (Request.Url.AbsolutePath.Contains("GetMacroResultAsHtmlForEditor"))
    {
 

to determine if the macro is being renderd in the back office.

There is a client side object model for getting the data for a node, but I can't find the doicumentation right now.

I do have an updated version of the SPCGrid property editor you have downloaded which will only allow PageParts to be selected and some other enhancements, but I cannot attach zip files to this post, so let me know if you are interested.

Patrick

Thanks for the fast reply.

I would realy much like to see your updated version.

Is it maybe possible to render the content (textstring and textarea) of the selcted node? - Then i could output that in the Grid View, without styling :)

I've uploaded the pluging to http://www.spcinternet.co.uk/media/24176/spcgrid.zip and also implemented the rendering of a property of the selected node.

The code you want to look at is in the SPC.Controllers.js I have added the following to the setPreview function:

var props = contentEditingHelper.getAllProps(content);
                       var text1 = $.grep(props, function (e) { return e.alias == 'AliasOfPropertyToGet'; });
                       if (text1.length > 0)
                       {
                           $scope.text1 = text1[0].value;
                       }

All you need to do is to change the name of the alias string. You will also need to edit the SPCPagePart.html to format how you want to display this in the back office.

Hope this helps.

Patrick

EDIT:

Nevermind, it seems to work for me now.

Hey guys, I am stuck with an issue where my grid.editors.config.js has no control over my grid editors, i mean whatever i do with my grid.editors.config.js file (add/remove/update grid editor configurations) the list of editors in my row configuration still be th same, Any help? Thanks Yogesh pathak

Hi youesh,

If you have access to Umbraco TV. I think this video will answers your question about how to add/remove/update grid editor configurations

http://umbraco.tv/videos/umbraco-v7/implementor/fundamentals/grid-layouts/setting-up-the-datatype/

Hope this helps,

/Dennis

I need to create a grid editor that includes an media selector.

I need to create this:

I have a custom grid editor that works except for the media. It looks like this:

I have read the tutorials, but I am not a genius so I am at a loss here. Can someone point me to something more recent that might cover this or an example or point me to an example extant in the product that I may have missed.

My Package Manifest looks like this:

{
    "gridEditors": [
        {
            "name": "Code",
            "alias": "code",
            "view": "/xxxxInclusion/app_plugins/dtna/editor.html",
            "icon": "icon-code",
            "config": {
                "color": "red",
                "text-align": "right"
            }
        }
    ],
    javascript:[
        "/xxxxInclusion/app_plugins/dtna/editor.controller.js"
    ]
}

My editor.html looks like this:

<div ng-controller="my.grideditorcontroller">
    <input type="text" ng-model="control.title1" ng-style="control.config"></input>
    <textarea rows="4" ng-model="control.tagline1" ng-style="control.config"></textarea>
    <textarea rows="4" ng-model="control.content1" ng-style="control.config"></textarea>
    <br>
    <input type="text" ng-model="control.title2" ng-style="control.config"></input>
    <textarea rows="4" ng-model="control.tagline2" ng-style="control.config"></textarea>
    <textarea rows="4" ng-model="control.content2" ng-style="control.config"></textarea>
</div>

My editor.cshtml looks like this:

 @inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>
    @* <pre>@Model</pre> *@

      <div class="grid-section quoteSection row">
        <div class="row">
          <div class="col-md-6 gettingQuoted gqPic clearfix" id="fpDecorationPhoto1">
               IMAGE 1 SHOULD GO HERE
          </div>
          <div class="col-md-6 gettingQuoted clearfix">
            <div class=" gettingQuotedText">
              <div class="homeDefs">
                <h2>@Model.title1</h2>
                <h3><em>@Model.tagline1</em></h3>
                <p>@Model.content1</p>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 col-lg-push-6 gettingQuoted gqPic clearfix" id="fpDecorationPhoto2">
               IMAGE 2 SHOULD GO HERE
          </div>
          <div class="col-md-6 col-lg-pull-6 gettingQuoted clearfix">
            <div class=" gettingQuotedText">
              <div class="homeDefs">
                <h2>@Model.title2</h2>
                <h3><em>@Model.tagline2</em></h3>
                <p>@Model.content2</p>
              </div>
            </div>
          </div>
        </div>
      </div>

My editor.controller.js looks like this:

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

});

Any help would be appreciated. This would be the basis for a number of custom grid controls that I need to make. Some would include rich text editors as well. I am assuming that they would work the same way as an Image.

I think you might be trying to reinvent the wheel. Have you looked at packages such as LeBlender?

https://our.umbraco.org/projects/backoffice-extensions/leblender

You can use it to create a grid editor which uses multiple data types such as you describe. (look at the fourth screenshot on the packages page above).

There are some other similar packages, I just can't think of them off the top of my head.

Yes. Good. I have tried LeBlender but it shows no grid editors in my developer tab where they are supposed to be. I have a question in on that forum here, but no answer other than clearing the various caches and that hasn't helped. I would rather use someone else's wheel for sure.

https://our.umbraco.org/projects/backoffice-extensions/leblender/general-discussion/84481-in-developer-i-dont-see-any-grid-editors-at-all

Thank you very much and I would be very happy if you had a tip to get leBlender working.

I really need a tutorial or example with a media picker in a custom grid editor. LeBlender is not working and I am stuck. Any help or pointer to the correct tutorial would be helpful.

Does anyone know of a way to deprecate grid editors?

I want to phase out specific grid editors (prevent editors from selecting them), without destroying the existing content.

is working on a reply...