Hi there,

I'm quite new to Umbraco (working with it for few month now) and have to create some custom modules for the Website/-shop of one of our customers.

In the meanwhile that's easy the most time but the module I have to create currently is quite tricky. When I say "module" I mean grid editors, just to clarify the terminologies. I already looked through the board and asked google and ecosia for some help but didn't find anything. So I hope somebody here can help me.

The module needs to enable the editors to create tabbed content. I already created the module so far that editors can create an extendable list (adding, removing and sorting the list elements), define tab-names and so on. But the tab contents need to use the same grid layout as the page itself.

We have already defined a custom grid layout and its well used by the page template, but I'm stucked at nesting it to the tab-content.

I tried with the following

<div ng-controller="Umbraco.PropertyEditors.GridController" class="umb-grid umb-editor clearfix" id="umb-tab-grid">
    <div ng-grid="Umbraco.Grid"></div>
</div>

but it doesn't work, there's no grid showing up in the tab content area. What am I doin' wrong here or is there even a way to get what I want at all?

My controllor looks the following:

angular.module("umbraco")
.controller("Umbraco.Tabs.ContentController",
    function ($scope, assetsService, $http, dialogService, mediaHelper) {

        $scope.defaultItem = {
            title: "",
            content: ""
        }

        $scope.add = function () {
            $scope.control.value.push(angular.copy($scope.defaultItem));
            $scope.select($scope.control.value[$scope.control.value.length - 1]);
        }

        $scope.select = function (index) {
            $scope.selected = index;
        };

        $scope.remove = function ($index, $event) {
            if ($scope.control.value.length > 1) {
                $scope.control.value.splice($index, 1);
            }
            else {
                $scope.control.value = [];
            }
            $scope.select($scope.control.value[$scope.control.value.length - 1]);
            $event.stopImmediatePropagation();
            $event.preventDefault();
        };

        $scope.sortableOptions = {
            handle: ".list-item-header",
            axis: "y",
            delay: 150,
            distance: 5
        };

        assetsService.loadCss(
            "/App_Plugins/Tabs/css/flex.css",
            "/App_Plugins/Tabs/css/form.css",
            "/App_Plugins/Tabs/css/tabs.css"
        );
        if (!$scope.control.value) {
            $scope.control.value = [];
            $scope.add();
        }

        if ($scope.control.value.length > 0) {
            $scope.select($scope.control.value[0]);
        }
    });

In the editor.html:

<div ng-app="app" ng-controller="Umbraco.Tabs.ContentController">
    <div class="editor flex-row">
        <div class="flex-xs-100" ui-sortable="sortableOptions" ng-model="control.value">
            <div class="list list-field" ng-class="{'open':selected === tab}" ng-repeat="tab in control.value track by $index">
                <div class="list-item-header flex-row space between" ng-click="select(tab)" ng-model="tab.title">
                    <strong>{{tab.title ? tab.title : "\{\{Tab "+ ($index + 1) +"\}\}"}}</strong>
                    <button ng-if="$index > 0" ng-click="remove($index,$event)" class="icon icon-trash" style="background:none;border:none;"></button>
                </div>
                <div class="list-item-content form">
                    <div class="field">
                        <label for="title">Tab-Bezeichnung</label>
                        <input type="text" name="title" ng-model="tab.title" class="form-control" />
                    </div>
                    <div class="field">
                        <label for="content">Tab-Inhalt</label>
                        <div ng-controller="Umbraco.PropertyEditors.GridController" class="umb-grid umb-editor clearfix" id="umb-tab-grid">
                            <div ng-grid="Umbraco.Grid"><!--here is where the grid needs to go --> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="cell-tools-add -bar newbtn" ng-click="add()">
        <i class="icon icon-add"></i>
    </div>
</div>