Problem with cell data disappearing...

Suite and Optimus Suite 5
#1

I have a grid where the user can add a row by pressing a button. What this does is adds a new row to the grid with a dummy id and puts the 1st cell of the new row into edit mode.

Next the user types in some data (a product number in this case) in the 1st cell and when the update event for the row is fired, my server-side code looks up the product and populates the rest of the cells with data specific to the product (name, unit price etc.).

The problem occurs when the user instead of ending the editing of the 1st cell with ENTER presses TAB.
When TAB is used the focus goes to the 2nd cell, update for the row is fired (due to the update of the 1st cell) and the data retrieved as supposed to, BUT, when the user TABs away from the 2nd cell on to the 3rd cell, the data in the 2nd cell disappears.

If I refresh the page forcing a re-rendering of the grid, the text in the 2nd cell is there, but not until I do exactly that, refresh.

I “think” this is what happens, but don’t know how to handle it:

  1. new row with dummy id inserted.
  2. cell 1 is updated by user. (ending edit mode with either Enter or Tab).
  3. data processor sends updated data from cell 1 to server-side code.
  4. server-side code performs the update with data from cell 1 and a lookup retrieving the rest of the product info.
  5. server-side code sends reply back to the data processor indicating that the update was successful along with some additional data to fill into the rest of the cells of the updated row.
  6. data processor updates the rest of the cells and takes the row out of “I’m being updated”-mode.

During pt. 2, the user can either end his update of cell 1 with ENTER or with TAB.
If ENTER is used, everything works perfectly, BUT when TAB is used it screws up the data in cell 2 - Probably because when focus leaves cell 1 the update action for the row is fired and cell 2 goes into edit mode before the data processor has received the status of the update request for cell 1 and taken the row out of “I’m being updated”-mode again.

So, when the update of cell 1 is complete (which is fairly quick) cell 2 is populated with data from the data processor, but while being in edit mode, due to the users TAB action. Once the user tabs away from cell 2 and on to cell 3, the data in cell 2 is gone.

Any ideas as to why this is happening and how to avoid it?

#2

Updated the original post with additional information…

#3

Once the user tabs away from cell 2 and on to cell 3, the data in cell 2 is gone.
It may happed if you are using “onEditCell” event handler and don’t return true on stage 2.

If issue still occurs please provide example of grid and data processor initialization.

#4

I’m not actively using OnEditCell event for anything at the moment.

Here is the grid and the data processor:
‘init_data’ contains the xml to initially populate the grid with rows.
‘data_handler_url’ contains the URL to the proper data_handler.ashx for this grid.

mygrid = new dhtmlXGridObject(‘gridbox’);
mygrid.setImagePath(‘dhtmlxGrid/codebase/imgs/’);
mygrid.setHeader(“Product Id,Product Number,Product Name,Quantity,Discount %,Unit Price,Amount”);
mygrid.setColumnIds(“productId,productNumber,productName,quantity,discountPct,unitPrice,amount”);
mygrid.setInitWidthsP(“0,*,30,10,10,10,15”);
mygrid.setColTypes(“ro,edtxt,edtxt,edtxt,edtxt,ro,ro”);
mygrid.setSkin(“dhx_skyblue”);
mygrid.setColSorting(“str,str,str,int,int,int,int”);
mygrid.setColAlign(“left,left,left,right,right,right,right”);
mygrid.enableMultiselect(true);

        mygrid.init();
        mygrid.parse(init_data);

        var dp = new dataProcessor(data_handler_url);
        dp.init(mygrid);
        dp.enableDataNames(true);

When the user hits the Add Row button addRow(’’) is fired inserting a row in the grid. Next the user updates cell 1/index 1 (cell at index 0 is not shown so when I write cell 1 it is also index 1) “productNumber” - row update is fired which server-side performs the actual insert because now the product can be looked up by productNumber. The response to the grid however is of action type ‘insert’, not ‘update’ causing the eventHandler for ‘insert’ to be fired again but this time with actual data in the extra properties in the response (first time it will only be init data, like quantity = 0, discountPct = 0 etc.). The property ‘product_name’ goes into cell 2/index 2, BUT if the user ended the update of cell 1/index 1 with TAB instead of ENTER, the data of cell 2/index 2 will disappear once TAB is used again to go to cell 3/index 3.

Curerntly the ‘update’ event is only used when quantity is changed to recalculate amount etc.

My addRow() function:
(getNewRowId() returns a specific guid to indicate ‘new row’ server-side. guidEmpty contains exactly that, an empty guid. Assume that the input productNumber == “” and disregard search_product_number)

function addRow(productNumber)
{
if (productNumber != “”)
{
searched_product_number = productNumber;
}
else
{
searched_product_number = null;
}

            var row_Id = getNewRowId();
            var prod_id = guidEmpty;
            var prod_no = productNumber;
            var prod_name = "";
            var row_qty = "0";
            var row_discount_pct = "0";
            var prod_price = "0";
            var row_amount = "0";

            mygrid.addRow(row_Id, [prod_id, prod_no, prod_name, row_qty, row_discount_pct, prod_price, row_amount]);
        }

Here is the eventHandler for row inserted. the response contains extra data for the rest of the cells based on a server-side lookup explained earlier (based on ‘prod_no’ in addRow()).
The cell loosing the data is cell 3 (index 2) “productName”.

dp.defineAction(“insert”, function (response)
{
var sid = response.getAttribute(“sid”);
var prod_id = response.getAttribute(“product_id”);
var prod_number = response.getAttribute(“product_number”);
var prod_name = response.getAttribute(“product_name”);
var qty = response.getAttribute(“quantity”);
var discount_pct = response.getAttribute(“discount_pct”);
var unit_price = response.getAttribute(“unit_price”);
var total_amount = response.getAttribute(“total_amount”);

            mygrid.cells(sid, 0).setValue(prod_id);
            mygrid.cells(sid, 1).setValue(prod_number);
            mygrid.cells(sid, 2).setValue(prod_name);
            mygrid.cells(sid, 3).setValue(qty);
            mygrid.cells(sid, 4).setValue(discount_pct);
            mygrid.cells(sid, 5).setValue(unit_price);
            mygrid.cells(sid, 6).setValue(total_amount);

            if (prod_number == "")
            {
                mygrid.selectCell(mygrid.getRowIndex(sid), 1, true, false);
                mygrid.editCell();
            }

            return true;
        });

The eventHandler for ‘update’:

dp.defineAction(“update”, function (response)
{
var sid = response.getAttribute(“sid”);
var total_amount = response.getAttribute(“total_amount”);

            mygrid.cells(sid, 6).setValue(total_amount);

            return true;
        });
#5

Change the next line

mygrid.cells(sid, 0).setValue(prod_id);

as

mygrid.editStop(); //cancel current edit, if any
mygrid.cells(sid, 0).setValue(prod_id);