v8: Custom grid editor control.active is gone

This issue is concerning working with custom grid editors in the backoffice UI where you can no longer see if a grid editor is active in its own controller.

Umbraco version

I am seeing this issue on Umbraco version: 8.4.0

Reproduction

Bug summary

In Umbraco 7, you could know if a grid editor was active by checking for something like:

if ($scope.control.active) { ... }

And by “active” I mean that a user has clicked on a grid editor inside the grid.

The backoffice UI would also itself show a class on the grid editor in grid.html by checking for control.active which would indicate that there existed a boolean property on the control named “active”:

ng-class="{'-active': control.active}"

In Umbraco 8 this property seems to have moved to the controller Umbraco.PropertyEditors.GridController and is being used in grid.html like this:

ng-class="{'-active': control === active}"

Thus it is no longer possible to check for $scope.control.active in the controller of the grid editor, i.e. this no longer works:

<div class="umb-grid-textarea" ng-if="control.active">I am active!</div>

Cause

I am not completely certain, but I found the function clickControl has changed in the aforementioned controller and as you may notice, the property on the control is no longer toggled:

Umbraco 7.15.3:

$scope.clickControl = function (index, controls, cell) {
  controls[index].active = true; // Property toggled here
  cell.hasActiveChild = true;
};

Umbraco 8.4.0:

$scope.clickControl = function (index, controls, cell, $event) {
    $scope.active = controls[index]; // Controller property here instead
    $scope.currentCellWithActiveChild = cell;
    $event.stopPropagation();
};

Actual result

I would expect to be able to see if a control has been activated. Preferably inside the $scope.control method to support backwards compatibility with Umbraco 7.

[johnsharp1975]

In the event anyone else stumbles on this post I found a few ways to overcome this change; the easiest of the ways I got to work was:

    .controller("controller", function ($scope) {

        $scope.gridScope = angular.element(document.getElementById('umb-grid')).scope();
        $scope.isActive = function () {
            return $scope.gridScope.active === this.control;
        }

this allows ng-show="isActive()"

HIH someone

[johnsharp1975]

Oh, in terms of why this is useful, I used it to kind of show what the control might resemble when it’s not active and have fields displayed that can be edited when it’s active.