rendering umbracogrid datatype in custom section - Extending Umbraco

Yehonatan Anabi 9 posts 119 karma points

Jan 14, 2016 @ 10:34

Rendering Umbraco.Grid datatype in custom section

Extending Umbraco

Umbraco 7

Hi all,

I've been trying to add Grid to my custom section for a while without success.

This is what i get

To Render the grid i Use (Best / Working sulotion so far):

<div class="umb-editor umb-grid" ng-controller="Umbraco.PropertyEditors.GridController" auto-scale="10">
    <ng-include src="'/umbraco/views/propertyeditors/grid/grid.html'"></ng-include>
</div>

I didn't find any article about initializing the grid.

Help would be appreciated!

Copy Link

Yehonatan Anabi 9 posts 119 karma points

Jan 14, 2016 @ 12:14

I had a progress by initializing $scope.model.value with this:

            $scope.model = {
            value: {
                name: "לךחי",
                sections: [
                {
                    "grid": 12,
                    "rows": [
                      {
                          "name": "3 חלקים",
                          "areas": [
                            {
                                "grid": 4,
                                "controls": [
                                  {
                                      "value": {
                                          "macroAlias": "ContactWidgetMacro",
                                          "macroParamsDictionary": {
                                              "Title": "יצירת קשר"
                                          }
                                      },
                                      "editor": {
                                          "name": "Macro",
                                          "alias": "macro",
                                          "view": "macro",
                                          "render": null,
                                          "icon": "icon-settings-alt",
                                          "config": {}
                                      }
                                  }
                                ]
                            }
                          ],
                          "id": "933d1b8c-46aa-e0a0-5830-426c2aab29c0"
                      }
                    ]
                }]
            },
            config: {
                items: {
                    columns: "12",
                    styles: [
                      {
                          "label": "Set a background image",
                          "description": "Set a row background",
                          "key": "background-image",
                          "view": "imagepicker",
                          "modifier": "url({0})"
                      }
                    ],
                    config: [
                      {
                          "label": "Class",
                          "description": "Set a css class",
                          "key": "class",
                          "view": "textstring"
                      }
                    ],
                    templates: [
                      {
                          "name": "1 column layout",
                          "sections": [
                            {
                                "grid": 12
                            }
                          ]
                      },
                      {
                          "name": "2 column layout",
                          "sections": [
                            {
                                "grid": 4
                            },
                            {
                                "grid": 8
                            }
                          ]
                      }
                    ],
                    layouts: [
                      {
                          "name": "Headline",
                          "areas": [
                            {
                                "grid": 12,
                                "editors": [
                                  "headline"
                                ]
                            }
                          ]
                      },
                      {
                          "name": "Article",
                          "areas": [
                            {
                                "grid": 4
                            },
                            {
                                "grid": 8
                            }
                          ]
                      }
                    ]
                },
                editor: { }
            }
        }

but this configuration is not fully configured, what else do i need?

Copy Link

David Brendel 792 posts 2970 karma points MVP 3x c-trib

Jan 15, 2016 @ 06:36