Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
345
When are all cells of an existing row accessbile by index on the client-side?
posted

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.

 

Parents
No Data
Reply
  • 345
    Verified Answer
    posted

    What I did was build a client-side hashtable on the server-side which contains the names of all the column keys and on the client-side, I simply reference columns by key instead of index by looping through the keys of the client-side column keys hashtable I created. It works perfectly.

    Let me know if you need a code sample to do this.

Children