selection bug with multiple grids

I have two grids on page.

When the user selects a row in the first grid, the second grid changes to show data relevent to that row. That all works fine. However the row which was previously selected in the second grid remains selected. I want to deselect that row. I am trying to do so by calling setSelectedRows([]).

When I uncomment the line commented below, the second grid does indeed deselect its selected row. But now the first grid starts to do funny things - it selects multiple rows instead of just the single row that I had selected (I.e Each new row that I click on in the first grid becomes selected, but the previously selected row in the first grid is also still marked blue).

Any idea why calling setSelectedRows on the second grid would cause the first grid to misbehave?


var gridUsers = new AW.UI.Grid;
gridUsers.setVirtualMode(false);
gridUsers.setStyle('width', '300px');
gridUsers.setStyle('height', '400px');
gridUsers.setSelectionMode('single-row');

    function GridData(col, row)
    {
        if (row==undefined)
            return;
            
        switch(col)
        {
            case 0:
            case '0':
                return arrUsers[row].surname;
            break;
            case 1:
            case '1':
                return arrUsers[row].forenames;
            break;
            case 2:
            case '2':
                return UserReadPercentage(arrUsers[row].id, false);
            break;
            case 3:
            case '3':
                return UserReadPercentage(arrUsers[row].id, true);
            break;
        }
    }
    
    gridUsers.setCellData(GridData);
    
    gridUsers.setCellFormat(AW.Formats.Text, 0);
    gridUsers.setCellFormat(AW.Formats.Text, 1);
    gridUsers.setCellFormat(perc, 2);
    gridUsers.setCellFormat(perc, 3);


    gridUsers.setHeaderText(['Surname', 'Forenames', 'Read', 'Read Latest']);
    gridUsers.setRowCount(arrUsers.length);
    gridUsers.setColumnCount(4);
    
    gridUsers.onSelectedRowsChanged = function()
    {
        var iUser = arguments[0];
        
        gridUserDocuments.showDocumentsForUser(iUser);
        
    }
    
    gridUsers.refresh();




var gridUserDocuments = new AW.UI.Grid;
gridUserDocuments.setVirtualMode(false);
gridUserDocuments.setStyle('width', '400px');
gridUserDocuments.setStyle('height', '400px');
gridUserDocuments.showDocumentsForUser = function(iUser)
{
    
    //this.setSelectedRows([]); //  <-----<



    function Transformation(col, row)
    {
        var iDocumentID = arrUserDocumentIDs[row];
        
        var iDocument = arrDocuments_ID_Idx[iDocumentID];
        
        var arrDocument = arrDocuments[iDocument];

        var ret = undefined;
        switch (col)
        {
            case 0:
            case '0':
                ret = arrDocument.formatted_name;
            break;
            case 1:
            case '1':
                ret = HasUserReadDocument(arrUsers[iUser].id, iDocumentID, false)?'Aye':'Nay';
            break;
            case 2:
            case '2':
                ret = HasUserReadDocument(arrUsers[iUser].id, iDocumentID, true)?'Aye':'Nay';
            break;
        }
        return ret;
    }
    this.setRowCount(...);
    this.setColumnCount(3);
    this.setColumnWidth(250,0);
    this.setColumnWidth(100,1);
    this.setColumnWidth(100,2);
    this.setHeaderText(['Document', 'Read', 'Read Latest']);
    this.setCellData(Transformation);
    this.setSelectionMode('single-row');
    debug('refresh right hand grid');
    this.refresh();

}

 

This seems to be a bug in the grid onSelectedRowsChanged event handler - they break each other when one is called from within another. Try updating the second grid after the first onSelectedRowsChanged exits -

gridUsers.onSelectedRowsChanged = function()
{
    var iUser = arguments[0];

    this.setTimeout(function(){
        gridUserDocuments.showDocumentsForUser(iUser);
    }, 0);
} 
 

Cheers,

That works fine.

Thanks Alex.