adding a content picker as a grid editor

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Rasmus Fjord 675 posts 1566 karma points c-trib

Jan 25, 2015 @ 22:58
0

Adding a content picker as a grid editor

Extending Umbraco
Hey there :)

Im on a project where we are gonna have quite a few widgets that is going to be reusable, and here my idea was to have a node structure with different kind of widgets. So inside the grid i want add content/tree picker where you just select the widget you want to insert. So basicly a treepicker starting from a special node/place in the tree and just saving the node id.

So far i have added this to the grid.editors :
```
 "name": "Widget",
        "alias": "widget",
        "view": "widget",
        "icon": "icon-umb-developer color-orange"
```
So now im hitting rock bottom, any articles to help me on from here? or anyone done something similar?
Copy Link
Shahid Hafiz 9 posts 29 karma points

Feb 01, 2015 @ 13:20
0
Hey Rasmas,

I'm working on a similar thing. In the grid.editors.config.js file I created a definition which contains a view referring to contentpicker.
```
{
    "name": "Content Picker",
    "alias": "contentPicker",
    "view": "contentpicker",
    "icon": "icon-coin",
    "config": {
        "showEditButton": "true",
        "minNumber": "1",
        "maxNumber": "5",
        "multiPicker": "true"
    }
},
```
It displays a +add link for the content picker. However, when clicking, rather then opening up a contentpicker dialogue box, the page simply refreshes. Any help much appreciated. The media
Copy Link
Yasir Butt 161 posts 371 karma points

Feb 01, 2015 @ 17:07
0
Hi,

I have created multi contect picker as grid control and for macro parameter which picked the nodes from a specific parent node.

I have uploaded the code at onedrive you may download from here ContentPciker. There are two zip folder PortfolioContectPicker.zip is for Macro Parameter and GridContentPicker is for Grid control.

You have to change node id in js files according to your node id (Line number 51).

Remember to add configuration for grid control in grid.editors.config.js
```
{
    "name": "Multi Picker",
    "alias": "multipicker",
    "view": "/app_plugins/GridContentPicker/gridportfolioeditor.html",
    "icon": "icon-coin",
    "render": "/Views/Partials/Grid/Editors/portfolio.cshtml"
}
```
Download the folders and put them in App_plugins folder

There is also another discussion see Here

Hope this help you :)
Copy Link
Rishabh 24 posts 94 karma points

Jul 28, 2016 @ 11:32

0

HI Yasir I have above code on grid.editors.config.js but it's not working plsease help me how to short out this issue

Copy Link
Yasir Butt 161 posts 371 karma points

Jul 28, 2016 @ 11:47

0

Hi,

Can you just touch your web.config with empty space? because umbraco is heavly cached.

Yasir

Copy Link
Rishabh 24 posts 94 karma points

Jul 28, 2016 @ 12:12

0

Hi,

I have checked the web.config file and run the project but it's not show on content box, can u help me and also Grid ContentPcike plugin not working when i convert into property datatype

Copy Link
Yasir Butt 161 posts 371 karma points

Jul 28, 2016 @ 12:13

0

whats your skype id?

Copy Link
Rishabh 24 posts 94 karma points

Jul 28, 2016 @ 12:15

0

Hi Yasir,

How to make multi content picker to single content picker can u help me please

Thanks, Rishabh

Copy Link
Rishabh 24 posts 94 karma points

Jul 28, 2016 @ 12:23

0

Hi Yasir,

my skype id is rishabh.patel61 and can u add me on your skype please.

Thanks Rishabh

Copy Link
Rishabh 24 posts 94 karma points

Jul 28, 2016 @ 13:16

0

Hi Yasir,

Can u please add me on your skype group i need fast help.

Rishabh

Copy Link
Gavin Bewley-Jones 25 posts 71 karma points

Oct 19, 2016 @ 17:33

0

Hi Yasir,

I am having a play with these controls and have it working but it always defaults to the Home node and also ignores my min and max values so doesnt validate at all.

Any pointers, I can always add my skype?

Thanks

Copy Link
Shahid Hafiz 9 posts 29 karma points

Feb 04, 2015 @ 15:26

0

Thank you Yasir, works perfectly.

Copy Link
Kim Holzmann 17 posts 97 karma points c-trib

Mar 19, 2015 @ 11:37

0

What about the "render":"/Views/Partials/Grid/Editors/portfolio.cshtml"

can that file be downloade to ?
I dont have a clue what to make in thatt file :-)

thank for the fine example

Copy Link

Rasmus Fjord 675 posts 1566 karma points c-trib

Oct 06, 2015 @ 06:53

By popular request Ill follow this up with a solution :)

I have something called a widgetpicker which i use in the grid, its looking for a special node and making you pick the children.

Controller

    angular.module("umbraco").controller("CodeMonkey.WidgetController", function ($scope, $rootScope, $timeout, dialogService, $routeParams, entityResource) {


    $scope.setWidget = function () {

        var config = {
            multiPicker: false,
            entityType: "Document",
            type: "content",
            treeAlias: "content"
        };

        var currentId = $routeParams.id;

        entityResource.getByQuery("$parent/ancestor-or-self::Sprog/WidgetFolder", currentId, "Document").then(function (ent) {


            dialogService.contentPicker({
                section: config.type,
                treeAlias: config.type,
                multiPicker: config.multiPicker,
                startNodeId: ent.id,
                callback: function (data) {
                    console.log(config.startNodeId);
                    $scope.control.value = data;

                }
            });

        });

    };
});

View

<div ng-controller="CodeMonkey.WidgetController">
    <div class="usky-editor-placeholder" ng-click="setWidget()" ng-if="control.value === null">
        <i class="icon icon-umb-developer color-orange"></i>
        <div class="help-text">Klik forat indsætte widget</div>
    </div>
     <div class="usky-editor-placeholder" ng-click="setWidget()" ng-if="control.value != null">
        <p><i class="icon {{control.value.icon}}"></i>{{control.value.name}}</p>
    </div>
</div>

Grid.editors.config

{
        "name": "Widget",
        "alias": "widget",
        "view": "/app_plugins/CodeMonkey.Widget/widget.html",
        "icon": "icon-umb-developer color-orange"
    }

Package.manifest

{
    javascript:[
        "/app_plugins/CodeMonkey.Widget/widgetController.js"
    ]
}

Copy Link

Rishabh 24 posts 94 karma points

Jul 28, 2016 @ 12:17

0

Hi Rasmus Fjord

I have used the above code and develop one plugin but it's not working with grid layout can u help me

Copy Link
blackhawk 313 posts 1368 karma points

Sep 21, 2017 @ 18:32

0

What is suppose to go into the widget.html file? Thanks

Copy Link
Rishabh 24 posts 94 karma points

Jul 28, 2016 @ 12:22

0

Hi Rasmus Fjord,

I need one more help how can i fetch the content node id from grid layout if multiple grid on single content page.

Copy Link
Rune Hem Strand 147 posts 911 karma points hq c-trib

Jul 28, 2016 @ 12:35
1
Just a little best practise advice :)

You shouldn't add editors in grid.editors.config, they should be defined in a package.manifest. So for the above it would be:
```
"gridEditors":[
    {
        "name": "Widget",
        "alias": "widget",
        "view": "/app_plugins/CodeMonkey.Widget/widget.html",
        "icon": "icon-umb-developer color-orange"
    }
],
"javascript" :[
    "/app_plugins/CodeMonkey.Widget/widgetController.js"
]
```
Check out the docs for more info

/rune
Copy Link
Rishabh 24 posts 94 karma points

Jul 28, 2016 @ 12:47

0

Hi Rune Hem Strand,

It's working with grid layout thanks for helping to me i have one more query can help me

How to fetch the selected content node from gird layout .

Thanks Rishabh

Copy Link
Andreas Emtinger 23 posts 185 karma points

Nov 29, 2016 @ 10:09

0

Well, if you read the docs carefully, you will see that it says:

"Register the editor in the /config/grid.editors.js file"

Even when the instructions using "gridEditors" in package.manifest...

Incorrect?

Copy Link
Rune Hem Strand 147 posts 911 karma points hq c-trib

Nov 29, 2016 @ 16:34

0

Hi Andreas

Thanks for the input. That was incorrect and has been updated!

h5yr

/Rune

Copy Link
Rishabh 24 posts 94 karma points

Jul 28, 2016 @ 13:07

0

Hi Rasmus Fjord,

I need to define start node on above code i have defined but it's not working can u help me

Thanks Rishabh

Copy Link
Rishabh 24 posts 94 karma points

Jul 29, 2016 @ 07:13

0

Hi all,

I have fixed the all things, thanks to all for helping support and suggestion.

Thanks Rishabh

Copy Link
Rune Hem Strand 147 posts 911 karma points hq c-trib

Jul 29, 2016 @ 07:22

0

Good to hear Rishabh

Great if you could share what you've learned so others can learn from it as well.

Sharing is caring and all that jazz ;) h5yr

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?