Here is a test APS.Net vb webpage - I have included a few javascript functions in the header and generated 10 rows and 11 columns with test data from a simple dataset. When you click in the Qty column it should trigger fnEnterEditQty(cell) and when exiting should trigger fnExitEditQty(cell, newValue) . It works fine in IE and Chrome but does not work in Firefox.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
CartGrid.DataSource = CreateBlankDS("Makes", 10)
CartGrid.DataBind()
End Sub
Private Function CreateBlankDS(ByVal tbl As String, ByVal Rows As Integer)
Dim ds As New System.Data.DataSet
'-- Create Data Table
Dim tr As System.Data.DataRow
Dim ts As New System.Data.DataTable()
Dim i, c As Integer
ts.Columns.Add("Model", System.Type.GetType("System.String"))
ts.Columns.Add("Year", System.Type.GetType("System.String"))
ts.Columns.Add("Engine", System.Type.GetType("System.String"))
ts.Columns.Add("Brand", System.Type.GetType("System.String"))
ts.Columns.Add("Item", System.Type.GetType("System.String"))
ts.Columns.Add("Description", System.Type.GetType("System.String"))
ts.Columns.Add("Part", System.Type.GetType("System.String"))
ts.Columns.Add("Price", System.Type.GetType("System.String"))
ts.Columns.Add("Qty", System.Type.GetType("System.String"))
ts.Columns.Add("Del", System.Type.GetType("System.String"))
ts.Columns.Add("Note", System.Type.GetType("System.String"))
ts.Columns.Add("Code", System.Type.GetType("System.String"))
ds.Tables.Add(ts)
For i = 0 To Rows - 1
tr = ts.NewRow()
For c = 0 To 6
tr(c) = ts.Columns(c).ColumnName & Str(i)
Next c
tr(7) = 100 + i
tr(8) = ""
tr(9) = ""
tr(10) = "Note" & Str(i)
tr(11) = "Code" & Str(i)
ts.Rows.Add(tr)
Next i
Return ds
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Cart</title>
<script type="text/jscript">
function fnEnterEditQty(cell) {
alert('I am Entering Edit');
return
}
function fnExitEditQty(cell, newValue) {
alert('I am Exiting Edit');
cartTotal=0;
for (grdRow=0; grdRow<10; grdRow++){
if (CartGrid.getItem(grdRow).getCell(7).getValue() >'0' ){
if (grdRow==cell.getItemIndex() ) {
qty=fnVal( newValue );
} else {
qty=fnVal( CartGrid.getItem(grdRow).getCell(8).getValue() );
}
price=fnVal( CartGrid.getItem(grdRow).getCell(7).getValue() );
cartTotal=cartTotal + qty*price;
}
}
document.getElementById('divSubTotal').innerHTML = '$' + cartTotal.toFixed(2);
return newValue ;
}
function fnVal(value) {
if ( typeof value == 'undefined') {
return 0;
}
if (value == 'undefined') {
return 0;
}
value=value.toString();
if (value.substring(0,1)=='$') {
value=value.substring(1,20);
}
v=parseFloat(value);
if (isNaN(v)) { v=0}
return v;
}
</script>
</head>
<body style="background-color: white">
<form id="form1" runat="server">
<div>
<div id="divHeading" style="font-size: 13.5pt; z-index: 101;
left: 12px; width: 132px; color: gray; font-family: Arial; position: absolute;
top: 12px; height: 20px; text-align: left">
Parts List</div>
</div>
<div style="z-index: 100; left: 8px; width: 952px; position: absolute; top: 52px;
height: 272px">
<eo:Grid ID="CartGrid" runat="server" BorderColor="#828790" BorderWidth="1px" ColumnHeaderAscImage="00050204"
ColumnHeaderDescImage="00050205" ColumnHeaderDividerImage="00050203" ColumnHeaderHeight="24"
FixedColumnCount="1" Font-Bold="False" Font-Italic="False" Font-Names="Tahoma"
Font-Overline="False" Font-Size="8.75pt" Font-Strikeout="False" Font-Underline="False"
GridLineColor="Silver" GridLines="Both" Height="244px" ItemHeight="41"
Style="z-index: 288; left: 0px; position: absolute; top: 0px" Width="948px" EnableKeyboardNavigation="True" FullRowMode="False" ClientSideOnCellSelected="" ClientSideAfterEditItem="fnTotalCart">
<FooterStyle CssText="padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
<ItemStyles>
<eo:GridItemStyleSet>
<ItemStyle CssText="background-color: white" />
<AlternatingItemStyle CssText="background-color:whitesmoke;" />
<ItemHoverStyle CssText="background-color:gainsboro;background-repeat:repeat-x;border-bottom-color:gray;border-bottom-width:1px;border-left-color:gray;border-left-width:1px;border-right-color:gray;border-right-width:1px;border-top-color:gray;border-top-width:1px;" />
<SelectedStyle CssText="background-repeat:repeat-x;border-bottom-width:1px;border-left-width:1px;border-right-width:1px;border-top-width:1px;" />
<CellStyle CssText="padding-left:8px;padding-top:2px;white-space:nowrap;" />
</eo:GridItemStyleSet>
</ItemStyles>
<ColumnTemplates>
<eo:TextBoxColumn ClientSideBeginEdit="fnEnterEditQty" ClientSideEndEdit="fnExitEditQty">
<TextBoxStyle CssText="BORDER-RIGHT: 1px; PADDING-RIGHT: 2px; BORDER-TOP: 1px; PADDING-LEFT: 2px; FONT-SIZE: 8.75pt; PADDING-BOTTOM: 1px; MARGIN: 0px; BORDER-LEFT: 1px; PADDING-TOP: 2px; BORDER-BOTTOM: 1px; FONT-FAMILY: Tahoma; HEIGHT: 33px; BACKGROUND-COLOR: transparent; TEXT-ALIGN: center" />
<CellStyle CssText="background-color:transparent;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;font-family:Arial;font-size:10pt;text-align:center;vertical-align:middle;" />
</eo:TextBoxColumn>
</ColumnTemplates>
<ColumnHeaderHoverStyle CssText="background-image:url('00050202');padding-left:8px;padding-top:4px;" />
<Columns>
<eo:StaticColumn DataField="Model" HeaderText="<div style="text-align: center">Model/Series</div>"
Width="140">
<CellStyle CssText="TEXT-ALIGN: center" />
</eo:StaticColumn>
<eo:StaticColumn DataField="Year" HeaderText="<div style="text-align: center">Year</div>"
Width="80">
<CellStyle CssText="TEXT-ALIGN: center" />
</eo:StaticColumn>
<eo:StaticColumn DataField="Engine" HeaderText="<div style="text-align: center">Engine</div>">
<CellStyle CssText="TEXT-ALIGN: center" />
</eo:StaticColumn>
<eo:StaticColumn DataField="Brand" HeaderText="<div style="text-align: center">Brand</div>"
Width="75">
<CellStyle CssText="TEXT-ALIGN: center" />
</eo:StaticColumn>
<eo:StaticColumn DataField="Item" DataType="String" HeaderText="<div style="text-align: center">Item Type</div>"
Width="95">
<CellStyle CssText="TEXT-ALIGN: center" />
</eo:StaticColumn>
<eo:StaticColumn DataField="Description" HeaderText="<div style="text-align: center">Description</div>"
Width="155">
<CellStyle CssText="TEXT-ALIGN: center" />
</eo:StaticColumn>
<eo:StaticColumn DataField="Part" DataType="String" HeaderText="<div style="text-align: center">Part No.</div>"
Text="" Width="90">
<CellStyle CssText="TEXT-ALIGN: center" />
</eo:StaticColumn>
<eo:StaticColumn DataField="Price" HeaderText="<div style="text-align: center">Price</div>"
Width="65">
<CellStyle CssText="TEXT-ALIGN: center" />
</eo:StaticColumn>
<eo:TextBoxColumn ClientSideBeginEdit="fnEnterEditQty" ClientSideEndEdit="fnExitEditQty"
DataField="Qty" HeaderText="<div style="text-align: left">Order Qty</div>"
Width="65">
<TextBoxStyle CssText="border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;font-family:Arial;font-size:11pt;text-align:center;vertical-align:middle;" />
<CellStyle CssText="" />
</eo:TextBoxColumn>
<eo:TextBoxColumn DataField="Del" Width="20">
<CellStyle CssText="background-image:url('./');color:red;cursor:pointer;font-family:Verdana;font-size:11pt;text-align:center;text-decoration:underline;" />
</eo:TextBoxColumn>
<eo:StaticColumn DataField="Note" HeaderText="<div style="text-align: left">Note></div>"
Width="400">
</eo:StaticColumn>
<eo:StaticColumn DataField="Code" HeaderText="<div style="text-align: center">Code</div>">
<CellStyle CssText="TEXT-ALIGN: center" />
</eo:StaticColumn>
</Columns>
<ColumnHeaderStyle CssText="background-image:url('00050201');padding-left:8px;padding-top:4px;" />
</eo:Grid>
<div id="Div1" style="font-size: 11pt; z-index: 100;
left: 780px; width: 72px; color: dimgray; font-family: Arial; position: absolute;
top: 248px; height: 20px; text-align: left">
Sub Total</div>
<div id="divSubTotal" style="font-size: 12pt; z-index: 101;
left: 856px; width: 68px; color: black; font-family: Arial; position: absolute;
top: 248px; height: 20px; text-align: right">
0.00</div>
</div>
</form>
</body>
</html>