Disabling and Enabling Grid

I see many people asking about this, so sharing my 2 cents for it. It simply puts a high z-index DIV over the grid ;-) Works great...

<style>
.aw-grid-mask {position: absolute; z-index: 10000; background-color: #eee; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50);}
</style>

function disableGrid(grid) {
  if (! grid.maskEl) {
    var maskEl = document.createElement('div');
    document.body.appendChild(maskEl);
    maskEl.className = 'aw-grid-mask';
    var gridEl = grid.element();
    maskEl.style.left = AW.getLeft(gridEl) + 'px';
    maskEl.style.top = AW.getTop(gridEl) + 'px';
    maskEl.style.width =  gridEl.clientWidth + 'px';
    maskEl.style.height =  gridEl.clientHeight + 'px';
    grid.maskEl = maskEl;
  }
  grid.maskEl.style.display = 'block';
};

function enableGrid(grid) {
  if (grid.maskEl) {
    grid.maskEl.style.display = 'none';
  }
};

Using patch.

AW.UI.Grid.prototype.disableGrid = function() {
    if (! this._maskEl) {
        var maskEl = document.createElement('div');
        document.body.appendChild(maskEl);
        maskEl.className = 'aw-grid-mask';
        var gridEl = this.element();
        maskEl.style.left = AW.getLeft(gridEl) + 'px';
        maskEl.style.top = AW.getTop(gridEl) + 'px';
        maskEl.style.width =  gridEl.clientWidth + 'px';
        maskEl.style.height =  gridEl.clientHeight + 'px';
        this._maskEl = maskEl;
    }
    this._maskEl.style.display = 'block';
};

AW.UI.Grid.prototype.enableGrid = function() {
    if (this._maskEl) {
        this._maskEl.style.display = 'none';
    }
};

And use it.

<button onclick="obj.disableGrid()">Disable grid</button>
<button onclick="obj.enableGrid()">Enable grid</button>