custom grid editor model

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

Carlos Casalicchio 117 posts 479 karma points

Mar 26, 2021 @ 18:01

0

Custom Grid Editor Model

I have created a custom grid editor for a CTA box

Got it saving, and displaying on the front-end just fine. But, when I add multiple CTA boxes (before saving) all of them end up using the same model, so whatever changes I make to one of them, all three show the same thing.

I know that the quote grid editor works fine without that issue, but I haven't been able to find where they implement this, so I can make it the same.

How can I separate the model for each area?

Copy Link
Amir Khan 1199 posts 2567 karma points

Mar 26, 2021 @ 18:07

0

Possibly a scope issue with Angular? What does your editor view look like?

Copy Link

Carlos Casalicchio 117 posts 479 karma points

Mar 26, 2021 @ 18:10

Hey Amir,

This is the editor

<div class="cta-box" ng-controller="CtaBoxController">
    <div class="card">
        <div class="card-body flex-fill">
            <h4 class="card-title"><textarea id="{{control.uniqueId}}_title" type="text" class="card-title-control transparent" ng-model="control.value.title" placeholder="the title of the box" title="Edit Title"></textarea></h4>
            <p class="card-text"><textarea id="{{control.uniqueId}}_subheader" class="card-sub-header transparent" type="text" ng-model="control.value.subheader" placeholder="the sub header for the box" title="Edit Sub-header"></textarea></p>
            <div class="button-block" ng-style="{'text-align': control.value.btnPosition}">
                <div class="btn btn-rounded" ng-class="control.value.btnClass.value" role="button" data-href="{{control.value.btnLink}}" data-target="{{control.value.btnTarget}}">{{control.value.btnText}}</div>
            </div>
        </div>
    </div>
    <div class="show-url-button" ng-click="openDialog($scope.control)" title="edit button link"><i class="icon-link"></i></div>

    <!-- Edit Overlay -->
    <umb-overlay ng-if="overlay.show"
                 model="overlay"
                 view="overlay.view"
                 position="right">
    </umb-overlay>
</div>

And this is the controller

angular.module("umbraco").controller("CtaBoxController", function ($scope) {

    if (!$scope.control.value || $scope.control.value === "") {
        $scope.control.value = $scope.control.editor.config;
        $scope.control.value.btnClass = $scope.control.editor.config.btnDefaults.btnClass;
        $scope.control.value.btnLink = $scope.control.editor.config.btnDefaults.btnLink;
        $scope.control.value.btnTarget = $scope.control.editor.config.btnDefaults.btnTarget;
        $scope.control.value.btnPosition = $scope.control.editor.config.btnDefaults.btnPosition;
        $scope.control.value.btnText = $scope.control.editor.config.btnDefaults.btnText;
    }
    $scope.control.uniqueId = uuidv4();

    function uuidv4() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

    $scope.openDialog = function () {

        $scope.overlay = {
            title: "Edit CTA Button",
            view: "/App_Plugins/CtaBox/dialog.html",
            editModel: $scope.control.value,
            btnColor: $scope.control.editor.config.btnColor,
            show: true,
            submit: function (model) {
                $scope.overlay.show = false;
                $scope.overlay = null;
            },
            close: function (oldModel) {
                $scope.overlay.show = false;
                $scope.overlay = null;
            }
        }
    }
});

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies

Flag this post as spam?

Custom Grid Editor Model