Start Building Professional
Web Apps Today

Image in cell moves when clicked - Why?

I'm having a strange time with a piece of code and I cannot figure out why. I can pass you some images if it will help in the description.

What is happening is I am loading a grid, each loop loads two lines. The first line is a description of a food item and a invisible gif, the second line is the restaurant name and a "Order" button. (code below) When I click on the order button it moves to the left of the column. What I'm I doing wrong?

Thanks,
James Snyder


// GRID SETUP
grdMostPopularOrders = new dhtmlXGridObject('grdMostPopularOrder_Container');
grdMostPopularOrders.setHeader(",");
grdMostPopularOrders.setNoHeader(true);
grdMostPopularOrders.enableCollSpan(true);
grdMostPopularOrders.setInitWidths("203,1");
grdMostPopularOrders.setColAlign("left,right");
grdMostPopularOrders.setColTypes("ro,ro");
grdMostPopularOrders.init();


//CODE THAT GETS CALLED FROM A LOOP
function gridAddRowMPO(lItems) {
var sRestaurant = lItems[0];
var sItemID = lItems[1];
var sItem = lItems[2];
var sPrice = lItems[5];
var sStyle = "color:#81a032;font-family:Arial;font-weight:bold;font-size:9pt;";
var iRow = (grdMostPopularOrders.getRowsNum() + 1);
var sDetails = 'Click to order '+sItem+' @ $'+sPrice
var sPointer = "setMousePointer(this);";
var sOrderURL = "<img src='../../images/Favorite_Order.jpg' onmouseover="+sPointer+" alt='"+sDetails+"' />";

grdMostPopularOrders.addRow(iRow,[sItem,sImageBlankURL]);
grdMostPopularOrders.setRowTextStyle(iRow,sStyle);
grdMostPopularOrders.setColspan(iRow,0,2);

iRow = (iRow + 1);
grdMostPopularOrders.addRow(iRow,[sRestaurant,sOrderURL]);
sStyle = "height:22px;";
grdMostPopularOrders.setRowTextStyle(iRow, sStyle);
}

Unfortunately we cannot reproduce this issue locally. What version of dhtmlxGrid do you use? Can you please provide complete demo where we can reproduce this issue? (You can find complete demo information here http://www.dhtmlx.com/docs/support/what_is_a_completed_demo.htm)