Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Patrick Scott 70 posts 108 karma points c-trib
    Dec 07, 2014 @ 11:26
    Patrick Scott
    0

    Tutorial on creating custom grid editors

    Grid editor is great, I am creating some new widgets for one of my sites and wanted to try out creating some custom grid editors but there doesn't seem to be much documentation yet.

    Are these any good tutorials out there yet?

  • Dennis Aaen 4426 posts 17858 karma points admin hq c-trib
    Dec 07, 2014 @ 11:42
    Dennis Aaen
    0

    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

  • Niels Lynggaard 172 posts 469 karma points
    Jul 17, 2015 @ 09:23
    Niels Lynggaard
    0

    One thing that you need to be aware of, though is that the property-editor tutorial is GREAT, but for the property-editor to WORK in the grid you need to make your controller use $scope.Control.value instead of $scope.Model.value (apparently this is the grid).

    It took me quite a while to find that info somewhere...

  • Matt Brown 62 posts 174 karma points
    Mar 20, 2017 @ 23:21
    Matt Brown
    0

    "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."

    The talk is superb and I think answers some of my questions but I could really use a copy of their files so I can see what they did. Is there any chance of that?

  • Jan Skovgaard 11237 posts 23330 karma points MVP 6x admin c-trib
    Dec 07, 2014 @ 12:23
    Jan Skovgaard
    1

    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.

    enter image description here enter image description here

    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

  • Patrick Scott 70 posts 108 karma points c-trib
    Dec 07, 2014 @ 12:44
    Patrick Scott
    0

    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.

     

     

     

  • Jan Skovgaard 11237 posts 23330 karma points MVP 6x admin c-trib
    Dec 07, 2014 @ 12:48
    Jan Skovgaard
    0

    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

  • Sebastiaan Janssen 4831 posts 14195 karma points MVP admin hq
    Dec 07, 2014 @ 14:11
  • Sebastiaan Janssen 4831 posts 14195 karma points MVP admin hq
    Dec 07, 2014 @ 15:28
    Sebastiaan Janssen
    0

    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/

  • Jan Skovgaard 11237 posts 23330 karma points MVP 6x admin c-trib
    Dec 07, 2014 @ 17:22
    Jan Skovgaard
    0

    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

  • Sebastiaan Janssen 4831 posts 14195 karma points MVP admin hq
    Dec 07, 2014 @ 18:41
    Sebastiaan Janssen
    0

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

  • Steve Morgan 1022 posts 3185 karma points c-trib
    Dec 11, 2014 @ 18:26
    Steve Morgan
    0

    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!!

  • Patrick Scott 70 posts 108 karma points c-trib
    Dec 12, 2014 @ 12:55
    Patrick Scott
    1

    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.

     

     

     


     

     

  • Aki 43 posts 213 karma points
    Sep 30, 2015 @ 10:57
    Aki
    0

    instead of rewriting lines the grid.editor.config.js you can add the lines to the in the Manifest file..

    that way you only have to maintain it one place..

    FILE: Package.manifest

    {  "gridEditors": [
      {
        "name": "My Code",
        "alias": "myCode",
        "view": "/App_Plugins/SPCGrid/Editors/Views/SPCPagePart.html",
        "render": "/App_Plugins/SPCGrid/Editors/Render/SPCPagePart.cshtml",
        "icon": "icon-code",
        "config": {
                  "color": "red",
                  "text-align": "right"
                  }
      }], javascript:[
     "~/app_plugins/SPCGrid/Editors/Controllers/SPC.Controllers.js"  ]}
    
  • Markus Johansson 1602 posts 4478 karma points
    Oct 12, 2015 @ 09:18
    Markus Johansson
    0

    This only works since v 7.2.3

  • Steve Morgan 1022 posts 3185 karma points c-trib
    Dec 12, 2014 @ 13:22
    Steve Morgan
    0

    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! 

  • Steve Morgan 1022 posts 3185 karma points c-trib
    Dec 12, 2014 @ 18:06
    Steve Morgan
    0

    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();
                    }
                });
  • Patrick Scott 70 posts 108 karma points c-trib
    Dec 13, 2014 @ 11:37
    Patrick Scott
    0

    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.

     

  • Steve Morgan 1022 posts 3185 karma points c-trib
    Dec 13, 2014 @ 11:47
    Steve Morgan
    0

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

  • Patrick Scott 70 posts 108 karma points c-trib
    Dec 13, 2014 @ 11:54
    Patrick Scott
    0

    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.

     

  • Comment author was deleted

    Mar 02, 2015 @ 14:38

    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?

  • Patrick Scott 70 posts 108 karma points c-trib
    Mar 03, 2015 @ 12:17
    Patrick Scott
    0

    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.

  • Rasmus Thyssen 14 posts 63 karma points
    Mar 25, 2015 @ 09:05
    Rasmus Thyssen
    0

    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

  • Patrick Scott 70 posts 108 karma points c-trib
    Mar 25, 2015 @ 10:27
    Patrick Scott
    0

    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

     

     

  • Rasmus Thyssen 14 posts 63 karma points
    Mar 25, 2015 @ 13:28
    Rasmus Thyssen
    0

    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 :)

  • Patrick Scott 70 posts 108 karma points c-trib
    Mar 26, 2015 @ 11:35
    Patrick Scott
    0

    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

     

  • Ryan Nguyen 27 posts 80 karma points
    Mar 31, 2015 @ 23:08
    Ryan Nguyen
    0

     

    EDIT:

    Nevermind, it seems to work for me now.

  • yogesh pathak 136 posts 221 karma points
    Jun 11, 2015 @ 08:45
    yogesh pathak
    0

    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

  • Dennis Aaen 4426 posts 17858 karma points admin hq c-trib
    Jul 17, 2015 @ 09:43
    Dennis Aaen
    0

    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

  • Matt Brown 62 posts 174 karma points
    Mar 15, 2017 @ 15:33
    Matt Brown
    0

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

    I need to create this:

    enter image description here

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

    enter image description here

    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.

  • Patrick Scott 70 posts 108 karma points c-trib
    Mar 15, 2017 @ 15:49
    Patrick Scott
    0

    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.

  • Matt Brown 62 posts 174 karma points
    Mar 15, 2017 @ 21:05
    Matt Brown
    0

    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.

  • Matt Brown 62 posts 174 karma points
    Mar 17, 2017 @ 21:16
    Matt Brown
    0

    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.

  • Nandoh 32 posts 104 karma points
    Apr 28, 2017 @ 13:36
    Nandoh
    0

    Hi @Matt Brown

    Il'l give LeBlender a try in the next days, but...which version are you using? Because in the package's page it isn't 100% complaint with all Umbraco versions

    7.5.x (100%) 7.4.x (64%) 7.3.x (100%) 7.2.x (100%)

    Please verify if it's the problem.

    Regards

  • Matthew Kirschner 321 posts 602 karma points
    Aug 17, 2017 @ 15:21
    Matthew Kirschner
    0

    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.

  • Matthew Kirschner 321 posts 602 karma points
    Aug 17, 2017 @ 15:26
    Matthew Kirschner
    0

    The closest thing I can find is when editing a Doctype, you enter a grid's row configuration and select which editors are permitted in each cell/row config. This seems to leave existing content intact. However, it would be nice to do this on a global scale for a specific grid editor. E.g., I want to set a 'deprecated' variable in the grid.editors.config.js JSON.

Please Sign in or register to post replies

Write your reply to:

Draft