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

Guide on merging an array in the state of a React Component

How to retrieve the third party child component within a Vue parent component

Javascript: A Fun Game of Questions and Answers

Encountering a CORS error in my Next.js 13.4 application while attempting to retrieve JSON data

Press the Enter key to submit

Inserting data into a JavaScript database

What is the best way to display a segment of an SVG on a Canvas element?

Creating an interactive map on an image using HTML and drawing circles

Different ways to utilize ng-repeat with option tags

Leveraging Ajax to fetch JQuery

Discover the ways in which an AngularJS function is able to generate HTML code containing an AngularJS

What could be causing my code to generate an error?

Pass a notification to a separate function

Avoid altering the Vuex store state directly without using mutation handlers in VueJS

Reversing the order of input-group-addon and input in bootstrap on mobile devices

"Seeking clarification on submitting forms using JQuery - a straightforward query

Ways to empty an angularJS array

Setting the initial scroll position in a ReactNative ListView after the data has been loaded

I am interested in combining identical values within a table

Showing headings in the table vertically