If you don't know what you're doing with Angluar (and the umbraco docs on this are rubbish) then check out LeBlender to save yourself some pain. https://our.umbraco.org/projects/backoffice-extensions/leblender/

Otherwise maybe checkout the /umbraco/js/umbraco.controllers.js to see how they do it in there. I have examples but I'm on the train right now. Tweet me on @davidpeckuk if you're still stuck on Monday.

So this is what I used recently. It won't be perfect but had no issues. For some context, it allowed you to pick reuseable widget/block/do-dars to place in a sidebar.

Render (cshtml):

@using System.Web.Mvc.Html
@inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>
@{
    string sidebarElementId = Model.value.ToString();
    var sidebarElement = Umbraco.TypedContent(sidebarElementId);
    if (sidebarElement == null)
    {
        return;
    }
}
@Html.Partial("SidebarElements/"+sidebarElement.DocumentTypeAlias, sidebarElement)

View (html):

<div ng-controller="My.GridEditors.SidebarElementController">
    <div class="control-group umb-control-group">
        <div class="umb-el-wrap">
            <i class="{{control.icon}}"></i>
            <a href="javascript:;" ng-click="openEditDialog()">{{control.name}}</a>
        </div>
    </div>
</div>

Controller (JS):

(function () {
    var SidebarElementController = function ($scope, dialogService, entityResource) {
        if (!$scope.control.value) {
            $scope.control.value = -1;
        }

        if ($scope.control.value > 0) {
            entityResource.getById($scope.control.value, "Document")
                .then(function(data) {
                    $scope.control.name = data.name;
                    $scope.control.icon = data.icon;
                });
        } else {
            $scope.control.name = "Please select a sidebar element";
        }

        $scope.openEditDialog = function () {

            dialogService.treePicker({
                filterCssClass: 'not-allowed not-published',
                //SET DOC TYPE ALIASES HERE
                filter: "ShareWidget,CtaBlock",
                treeAlias: 'content',
                section: 'content',
                callback: function (data) {
                    if (data) {
                        $scope.control.value = data.id;
                        $scope.control.name = data.name;
                        $scope.control.icon = data.icon;
                    }
                }
            });
        };
    };

    angular.module("umbraco").controller("My.GridEditors.SidebarElementController", SidebarElementController);
})();

See also: https://our.umbraco.org/forum/umbraco-7/using-umbraco-7/71864-render-pages-from-multinode-tree-picker-in-grid-view

Hi,

I need to customize the grid layout like these things please help to me

1) row an incons menu is displayed. Only the "delete" icon must be diplayed, not a configuration icon.

2) When i select a content after "Add content", the content is inserted and it allows to add mor content into that grid item. The system must allow only one content for each grid item.

Well I'm not sure you can do #1 with the grid. You will likely have to live with it or use nested content instead.

And #2 you can select which grid editors ate allowed for each column in the grid configuration, but I don't think you can say "if the 1st isan X then don't allow any Ys" if that is what you're saying?

is working on a reply...