Web Apps – Remove Row Javascript Error

Have you or your clients removed more than 1 timecard row on a timecard and then ended up in some funky state where multiple rows were highlighted and nothing seemed to work as it should? What cell did you highlight before you clicked the ‘remove row’ button? Was it a disabled cell like ‘Project / Task’ or ‘Total’? If so, this has to do with some Javascript in the Grid.js file.

Again, I do not post about bugs to call anyone out for the code they have written! I make mistakes just as much as anyone else and I’ll be the first to admit it. I am simply trying to help others who may be in a similar situation and need a fix.

Here’s the error in stock SL2018 Web Apps….

Believe it or not, the error actually has nothing to do with the remove row function (other than that’s the button you clicked.)  The problem lies in the grid not properly losing focus on a blurEventHandler.  When a disabled cell is selected and the remove row button is clicked, there is no blur event that fires, because the disabled cell never had focus, so gridLostFocus does not run.  

var blurEventHandler = function (e) {
//Lose active row and cell when focus leaves the grid
//Only raise the RowLostFocus event if a row actually lost focus.
gridLostFocus(grid, GridMode);
};

That in turn, causes issues with the function SetCurrentCellEntry which relies upon the last active cell and the last active row being defined in the gridLostFocus function. 

What Web Apps is trying to do in SetCurrentCellEntry

//Update the last-active row and cell before raising any events
if (grid._lastActiveCell != null) {
$(grid._lastActiveCell.GetThawedElement()).removeClass('DSLGridCellLastActive');
$(grid._lastActiveRow.GetThawedElement()).removeClass('DSLGridRowLastActive');
}

Because the gridLostFocus function did not run, there is no lastActiveRow which then causes this function to error out….

What we could do is try to force the gridLostFocus event when the Remove Row button is clicked and the activeCell is disabled, but I just updated the SetCurrentCellEntry function to add some conditions so that the part where it errors out (removing a class that defines the last active row – which i think is non-essential anyway since we just deleted it) only runs when: 

  1. The Last Active Cell is not null (already exists)
  2. The Last Active Row is not null 
  3. The Last Active Cell was not disabled

Our updated code: 

if (grid._lastActiveCell != null && grid._lastActiveRow != null && grid._lastActiveCell.Disabled() == false) {
            $(grid._lastActiveCell.GetThawedElement()).removeClass('DSLGridCellLastActive');
            $(grid._lastActiveRow.GetThawedElement()).removeClass('DSLGridRowLastActive');
        }

I went ahead and added a prompt for confirmation, which you can read about here, but that is not needed for this to work properly.

Here’s our working code!

Feel free to share...

Leave a Reply

Your email address will not be published. Required fields are marked *

Close Menu