Hi,

I have some client events for manipulating an UltraWebGrid on the client side. One client-side handler I use is the InitializationLayoutHandler and it works well for what I'm currently doing.

<ClientSideEvents
      ....
      InitializeLayoutHandler="Acuity.AppointmentForms.initializeGrid"

      ... />

However, now on the client-side, once the page is loaded, I want to loop through each cell of each row of every grid that I have. Currently I can do this on a per grid basis using the above mentioned handler. I was planning to do the cell treatment via this handler, but it seems that the rows' cell collections have lengths that match the number of columns each grid has rendered, but I can't access the cell by index. The majority of them end up being null.

Here's a snippet of the JavaScript I'm using:

Acuity.AppointmentForms = new function() {
    /// <summary>
    /// Manages client-side events for appointment form grids.
    /// </summary>

    // Private members
    var that = this;

    function markRowAsEdited(row) {
        var cells = row.cells;
        var numberOfCells = cells.length;
        var recordStatus = row.getCellFromKey('StatusId').getValue();

        // Loop cells to mark as edited.
        for (var cellIndex = 0; cellIndex < numberOfCells; cellIndex++) {
            if (cells[cellIndex]) { // This is wher eit ends up being undefined when calling it from intializeGrid
                markCellAsEdited(cells[cellIndex], recordStatus);
            }
        }
    }

    function markCellAsEdited(cell, recordStatus) {
        var cellElement = cell.Element;

        // If there is no active cell record we can already assume false via an existence check.
        // If it's a pending record we always want to mark the cell as edited.
        //
        // NOTE: recodStatus is null if it's pending record that hasn't bneen saved yet.
        var pendingRecord = (null === recordStatus) || (1 === recordStatus);
        var shadowCellEdited;

        if (!pendingRecord) {
            // compare active and current cell id for changes.
            shadowCellEdited = false; //doesShadowCellDifferFromActiveCell(cellId, ;
        }

        // Only mark the cell as edited if it is hidden.
        // No point on marking hidden cells.
        if (shadowCellEdited || pendingRecord) {
            // UltraWenGrid doesn't seem to allow you to change style via adding a CSS class.
            // We can investigate this at another time if we need more than a brackground color change.
            //cellElement.addClass("apptFormMarkCellAsEdit");

            // Quick and dirty but effective instead then.
            cellElement.style.backgroundColor = "lightgreen";
        }
    }

    // Public Members
    //
    // ... other methods
    //
   
    this.initializeGrid = function(gridId) {
        /// <summary>
        /// Initializes a grid.
        /// </summary>
        /// <param name="gridId">A unique identifier for a grid.</param>   
        var grid = igtbl_getGridById(gridId);
        var cell;

        // Disable all buttons for a row if the row is locked.
        for (var rowIndex = 0; rowIndex < grid.Rows.length; rowIndex++) {
            currentRow = grid.Rows.getRow(rowIndex);
            markRowAsEdited(currentRow);

            if (1 === currentRow.getCellFromKey('Locked').getValue()) {
                cell = currentRow.getCellFromKey('Edit');

                if (cell && cell.Element) {
                    cell.Element.getElementsByTagName("input")[0].style.visibility = "hidden";
                }

                cell = currentRow.getCellFromKey('Delete');

                if (cell && cell.Element) {
                    cell.Element.getElementsByTagName("input")[0].style.visibility = "hidden";
                }
            }

            else {
                if (5 === currentRow.getCellFromKey('StatusId').getValue()) {
                    cell = currentRow.getCellFromKey('Delete');

                    if (cell && cell.Element) {
                        cell.Element.getElementsByTagName("input")[0].style.visibility = "hidden";
                    }
                }
            }
        }
    }
}

I'm assuming this is because when the InitializeLayoutHandler client-side handler is fired, not all the data is bound yet? If this is the case, what is the best way to loop through a row's cells on client-side page load? And I know that looping via cell indexes works because I do it in the AfterRowTemplateCloseHandler.