Alright, 

I have tried as best as possible to come up with something, but it returns me some error.

function AfterRowUpdate(gridName, rowId) 

    {

        var row = igtbl_getRowById(rowId); 

        var cells = row.getCellElements();

        for (var i = 0; i < cells.length; i++) 

        {

            if (cell[i].getValue() == "") 

            {

                alert('one or more columns are empty');

            }

        }

    }

the error gets thrown on this line:       if (cell[i].getValue() == "") 

Hi,

Try following code.

function AfterRowUpdate(gridName, rowId)

    {

    var row = igtbl_getRowById(rowId);

    for (var i = 0; i < row.Band.Columns.length; i++)

        {

            if (row.getCell(i).getValue() == '')

            {

                alert('one or more columns are empty');

                break;

            }

        }

    }

The function getCellElements(); returns array of html elements while we need cell objects.

Let me know if this helps you.

Thank you, it works. 

Is there a way I can stop a new row from being created as long as AfterRowUpdate returns false? Cos right now all it does is prompt. 

Or are there any workarounds for this? to ensure all cells in each row are filled.

Try following function.

function grid1_BeforeRowInsert(gridName,parentRowId,rowId,index )

    {

        var grid = igtbl_getGridById(gridName);

        for(var rowIndex = 0 ; rowIndex < grid.Rows.length; rowIndex++)

            {

                var row = grid.Rows.getRow(rowIndex);

                for (var i = 0; i < row.Band.Columns.length; i++)

                {

                    if (row.getCell(i).getValue() == '' || row.getCell(i).getValue() == null)

                    {

                        alert('one or more columns are empty');

                        //row.getCell(i).activate();

                        //row.getCell(i).setSelected();

                        return true;

                    }

                }

            }

    }

Add event handler for BeforeRowInsert event as follow.

<ClientSideEvents BeforeRowInsertHandler="grid1_BeforeRowInsert" />

This function should prevent inserting a new row until all the inserted rows have all the cell values provided.

Commented lines selects the specific cell which is empty.

Remember that when you can use return true to cancel Infragistics client side event.

Let me know if this helps you.

Thanks for the prompt reply.

Basically, I have an empty editable grid with fixed headers which allows users to key in data row by row. all cells are mandatory. Users may key in as many rows as they like, and at the end of it all, they can click a "Save" button which stores all the rows in the database.( done by code behind)  

So I was thinking of preventing the user from moving onto the next row, if the current row has some blank cells.

AfterRowUpdate will be triggered when the row exists and that is getting updated. Have you tried BeforeRowInsert?

You can also try removing that particular row using row.deleteRow() or row.remove()if validation fails.

Above suggestion is based on my basic understanding about your requirement. Could you elaborate your requirement it terms of flow of user actions or steps? It will help to analyze further.