The gridOptions.$gridScope.columns in ng-grid is modified two times when hiding or showing columns

Question

The gridOptions.$gridScope.columns in ng-grid is modified two times when hiding or showing columns

Question:

Why does the $scope.$watch function get called twice when I manually hide/show a column but only once when I reorder/sort columns in ng-grid?

When I specifically target a single column with the watch function, it is only called once. I suspect that on hide/show actions, the entire ng-grid is changed, while on reorder/sort, only specific columns are affected.

Is there a way to determine which events trigger the function call in each situation?

Another Question:

How can I prevent the second or first invocation of the function?

I attempted to debug certain sections of AngularJS code:

if ((watchers = current.$$watchers)) {
    // process our watches
    length = watchers.length;
...
watch.fn(value, ((last === initWatchVal) ? value : last), current);
...
// in the case user pass string, we need to compile it, do we really need this ?
if (!isFunction(listener)) {
    var listenFn = compileToFn(listener || noop, 'listener');
    watcher.fn = function(newVal, oldVal, scope) {listenFn(scope);};
}

I noticed that watchers[4] and watchers[5] have identical expressions (gridOptions.$gridScope.columns), but watchers[5] has my function as its action while watchers[4] calls listenFn(scope).

My attempt to use $gridScope.renderedColumns resulted in the same issue.

javascript angularjs show-hide ng-grid watch

Answer 1

Answer №1

After some experimentation, I have come up with a solution that avoids altering the ng-grid and AngularJS code:

var counter = 0;
$scope.$watch('gridOptions.$gridScope.columns', updateFunction, true);
function updateFunction(newValues, oldValues){
    if ( oldValues !== newValues && oldValues.length === newValues.length ) {
        if ( areColumnsEqual(oldValues, newValues) || isReordered(oldValues, newValues) ) {
            console.log('\n\n=====  ' + (counter++) + ' =====');
        }
    }
}

function isReordered(oldValues, newValues) {
    for ( var i = 0 ; i < oldValues.length ; i++ ) {
        if ( oldValues[i].originalIndex !== newValues[i].originalIndex ) {
            return true;
        }
    }
    return false;
}

function areColumnsEqual(oldValues, newValues) {
    for ( var i = 0 ; i < oldValues.length ; i++ ) {
        if ( oldValues[i].width !== newValues[i].width ) {
            return false;
        }
    }
    return true;
}

Now the console.log function is triggered only once for every resize, hide, show, reorder, or sort operation.

If you want to respond specifically to actions like reordering, showing, or hiding columns:

var counter = 0;
$scope.$watch('gridOptions.$gridScope.columns', columnChangeFunction, true);

function columnChangeFunction(newValues, oldValues){
    if ( oldValues !== newValues && oldValues.length === newValues.length ) {
        if ( isHideOrShowAction(oldValues, newValues) || isReordered(oldValues, newValues) ) {
            console.log('\n\n=====  ' + (counter++) + ' =====');
        }
    }
}

function isReordered(oldValues, newValues) {
    for ( var i = 0 ; i < oldValues.length ; i++ ) {
        if ( oldValues[i].originalIndex !== newValues[i].originalIndex ) {
            return true;
        }
    }
    return false;
}

function isHideOrShowAction(oldValues, newValues) {
    for ( var i = 0 ; i < oldValues.length ; i++ ) {
        if ( oldValues[i].visible !== newValues[i].visible ) {
            return true;
        }
    }
    return false;
}

Answer 2

After some experimentation, I have come up with a solution that avoids altering the ng-grid and AngularJS code:

var counter = 0;
$scope.$watch('gridOptions.$gridScope.columns', updateFunction, true);
function updateFunction(newValues, oldValues){
    if ( oldValues !== newValues && oldValues.length === newValues.length ) {
        if ( areColumnsEqual(oldValues, newValues) || isReordered(oldValues, newValues) ) {
            console.log('\n\n=====  ' + (counter++) + ' =====');
        }
    }
}

function isReordered(oldValues, newValues) {
    for ( var i = 0 ; i < oldValues.length ; i++ ) {
        if ( oldValues[i].originalIndex !== newValues[i].originalIndex ) {
            return true;
        }
    }
    return false;
}

function areColumnsEqual(oldValues, newValues) {
    for ( var i = 0 ; i < oldValues.length ; i++ ) {
        if ( oldValues[i].width !== newValues[i].width ) {
            return false;
        }
    }
    return true;
}

Now the console.log function is triggered only once for every resize, hide, show, reorder, or sort operation.

If you want to respond specifically to actions like reordering, showing, or hiding columns:

var counter = 0;
$scope.$watch('gridOptions.$gridScope.columns', columnChangeFunction, true);

function columnChangeFunction(newValues, oldValues){
    if ( oldValues !== newValues && oldValues.length === newValues.length ) {
        if ( isHideOrShowAction(oldValues, newValues) || isReordered(oldValues, newValues) ) {
            console.log('\n\n=====  ' + (counter++) + ' =====');
        }
    }
}

function isReordered(oldValues, newValues) {
    for ( var i = 0 ; i < oldValues.length ; i++ ) {
        if ( oldValues[i].originalIndex !== newValues[i].originalIndex ) {
            return true;
        }
    }
    return false;
}

function isHideOrShowAction(oldValues, newValues) {
    for ( var i = 0 ; i < oldValues.length ; i++ ) {
        if ( oldValues[i].visible !== newValues[i].visible ) {
            return true;
        }
    }
    return false;
}

The gridOptions.$gridScope.columns in ng-grid is modified two times when hiding or showing columns

Answer №1

Similar questions

Observing the state of a variable within a directive using a service from a different module

Verify the occurrence of a search result and if it appears more than once, only show it once using JavaScript

Does AngularJS have a similar function to $(document).ajaxSuccess()?

Encountering a parse error when making an AJAX call using structural functions

What is the best way to transfer an element and all its children to another div without losing any jQuery functionality?

Angular JS has a unique feature of a scrollable drop-up menu that allows

KnockoutJS's data binding feature is failing to display any content within the table rows

How can I place an Object in front of an Array in JavaScript?

The JavaScript program is occasionally receiving unconventional input

Enhancing React Flow to provide updated selection and hover functionality

Move router parameters to separate files to streamline and organize code

A collection of collections

Creating a React.js component and setting an initial value within it

Mentioning VARs found on additional pages

Tips on transferring information from Angular to Rails

Show only specific data from JSON results

Is it possible to automate a query to an API through PHP and store the results on a local drive?

Top recommendations for implementing private/authentication routes in NextJS 13

redirecting from an AJAX request

Using React and Material-UI: Implementing button functionality to call another class using hooks in the main App component