3.2.0
Forum Demo Guide API Store

IE 7 Browser closing issue while clicking the grid text field

Hi Alex,

When i Double click on the cell in AW Grid or doing any validation on cell text change , clicking more than one text fields simultaniously and trying to onBlur, Browser is closing on the Stale state of the datas in the Grid.
This is a serious problem that needs to be solved immediately then only able to proceed my development with the events in the Grid

Kindly let me know to solve the issue ASAP

Oliver
June 9,
Does this happen in any of the standard code samples? If not, could you please describe how to reproduce this issue and post an example.
Alex (ActiveWidgets)
June 9,
Hi Alex,
Thanks for your response.
1. Actually in the grid text field i am doing server side call.so each text field i am calling one server side call and returning the response back in the form of AJAX response. After getting the response in one text field when i am trying to click the next textfield the browser getting closed.
2.Next case , when i scrolling the horizontal scroll bar fastly , getting the same pbm.
3.Wherever i am doing the double cliking in any of the grid field facing the pbm.
Following below is my code of my first issue , pls reply me so that i will continue my development
<html>
<head>
<title>XYZ</title>
<!-- START JAVASCRIPT FUNCTIONS - PAGE SPECIFIC ONLY(All common functions to be added in the fm.js file) -->
<script><!--
var modifiedCol = 0;
var modifiedRow = 0;
var targetCol = 0;
var targetRow = 0;
var gridText="";
var result = "";
var res="";
function applyChanges()
{
for(i=0;i<obj.getRowCount();i++)
{
for(j=0;j<obj.getColumnCount();j++)
{
if(obj.getCellText(6,i) < 0)
{
alert("One or More value is Negative");
return false;
}
}
}
result = getCellData();
document.testForm.result.value = result;
document.testForm.action = "";
document.testForm.submit();
return true;
}

function calculateValue(text,column,row)
{
var dayFund = 0;
var stmtDate = "";
var deliveryWindow = 0;
var psaClass ="";
targetRow = parseInt(row);

if(!isValidDate(text))
{
obj.setCellText(oldValue,column,row);
return false;
}
deliveryWindow = obj.getCellText(1,row);
dayFund = obj.getCellText(2,row);
stmtDate = obj.getCellText(column,row);
psaClass = obj.getCellText(8,row);
targetCol = parseInt(column)+1;
send("test!calculateValue.action?pscclass="+psaClass,loadData);
}

function loadData()
{
var response = getResponse();
if( response.length > 0 )
{
if( response == """ )
{
obj.setCellText(oldValue,modifiedCol,modifiedRow);
obj.refresh();
}
else if( response == """ )
{
obj.setCellText(oldValue,modifiedCol,modifiedRow);
obj.refresh();
}
else
{
obj.setCellText(response,targetCol,targetRow);
obj.refresh();
}

}
}
function getCellData()
{
var i=0;

for(i=0;i<obj.getRowCount();i++)
{
var roll = obj.getCellText(7,i);
if(roll != "N")
{
result += obj.getCellText(0,i);
result += ",";
result += obj.getCellText(1,i);
result += ",";
result += obj.getCellText(2,i);
result += ",";
result += obj.getCellText(5,i);
result += ",";
result += obj.getCellText(6,i);
result += "\n";
}
}
return result;
}
--></script>
</head>
<body>
<form id="test" name="testForm" method="post">
<table width="100%" cellpadding="0" cellspacing="0" border="0"
height="100%" class="borderStyle">
<!----------------------------------------------------------------------------------------->
<!----- Page Specific Contents Starts Here ----->
<!----------------------------------------------------------------------------------------->
<tr valign="top" height="60%">
<td nowrap="nowrap" width="10%">&nbsp;</td>
<td title="check negative value" colspan="7" align="center">
<style>
/* GRID SPECIFIC CUSTOM STYLES */
#dataGrid {width: 99%; height: 98%}
#dataGrid .aw-column-0 {text-align: center; width: 0.3%;border-right: 1px solid #ccc;}
#dataGrid .aw-column-1 {text-align: center; width: 0.3%; border-right: 1px solid #ccc; font-weight: 3px bold;}
#dataGrid .aw-column-2 {width: 0.3%;text-align: center; border-right: 1px solid #ccc;}
#dataGrid .aw-column-3 {width: 0.5%;text-align: center; border-right: 1px solid #ccc;}
#dataGrid .aw-column-4 {width: 0.3%;text-align: center; border-right: 1px solid #ccc;}
#dataGrid .aw-column-5 {width: 0.55%;text-align: center;border-right: 1px solid #ccc;}
#dataGrid .aw-column-6 {width: 0.4%;text-align: center;border-right: 1px solid #ccc;}
#dataGrid .aw-column-7 {width: 0.22%;text-align: center;border-right: 1px solid #ccc;}
#dataGrid .aw-column-8 {width: 0.3%;text-align: center; border-right: 1px solid #ccc;}
#dataGrid-header-6-0-box {FONT-SIZE: 13px;BACKGROUND: #d5d0b7;COLOR: #000000;TEXT-ALIGN: center}
#dataGrid-header-7-0-box {FONT-SIZE: 13px;BACKGROUND: #d5d0b7;COLOR: #000000;TEXT-ALIGN: center}
#dataGrid-header-8-0-box {FONT-SIZE: 13px;BACKGROUND: #d5d0b7;COLOR: #000000;TEXT-ALIGN: center}
</style>
<script>
var gridData = [ ['400','5','01','01/01/1990','-7105','06/09/2009','-06','Y','A'],['400','10','01','01/01/1990','-7110','06/09/2009','-11','Y','A'],['400','15','01','01/01/1990','-7115','06/09/2009','-16','Y','A'],['400','30','00','01/01/1990','-7099','06/09/2009','-30','Y','A'],['400','45','00','01/01/1990','-7099','06/09/2009','-45','Y','A'],['400','60','01','01/01/1990','-7160','06/09/2009','-61','Y','A'],['400','75','01','01/01/1990','-7175','06/09/2009','-76','Y','A'],['400','90','01','01/01/1990','-7190','06/09/2009','-91','Y','A'] ];
var gridColumns = [
"Product Number", "Delivery Days", "Day Fund", "Current Settlement Date","DOC", "Proposed Settlement Date", "Proposed DOC","Roll",""
];
</script>
<script>
//Include grid Js File
//START OF DATE VALIDATION SCRIPT
//date validation for the date fields in the grid
function isDate(dtStr){
var daysInMonth = DaysArray(12)
var pos1=dtStr.indexOf(dtCh)
var pos2=dtStr.indexOf(dtCh,pos1+1)
var strMonth=dtStr.substring(0,pos1)
var strDay=dtStr.substring(pos1+1,pos2)
var strYear=dtStr.substring(pos2+1)

strYr=strYear
if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
for (var i = 1; i <= 3; i++) {
if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
}
month=parseInt(strMonth)
day=parseInt(strDay)
year=parseInt(strYr)
if (pos1==-1 || pos2==-1){
alert("The date format should be : mm/dd/yyyy")
return false
}
if (strMonth.length<1 || month<1 || month>12){
alert("Please enter a valid month")
return false
}
if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
alert("Please enter a valid day")
return false
}
if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
alert("Please enter a valid 4 digit year between "+minYear+" and "+maxYear)
return false
}
if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){
alert("Please enter a valid date")
return false
}
return true
}//end of date validation


//Start of grid
var startTime = new Date().getTime();
var oldValue = "";
var modifiedRecords = new Array();
var obj = new AW.Grid.Extended;

obj.setId("dataGrid");
obj.setVirtualMode(false);
obj.setCellText(gridData);
obj.setHeaderText(gridColumns);
obj.setRowCount(gridData.length);
obj.setSelectionMode("single-cell");
obj.setHeaderHeight(30);
obj.setSelectorResizable(false);
//disable sort grid
obj.onHeaderClicked = function(event, index){
return true;
};

//VALIDATION FOR INTEGER
function isInteger (s){
var i;

if (isEmpty(s))
if (isInteger.arguments.length == 1) return 0;
else return (isInteger.arguments[1] == true);

for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);

if (!isDigit(c)) return false;
}

return true;
}//end of function
//VALIDATION FOR INTEGER
function isDecimal(s){
var i;
for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);


if(!((c >= "0")&&(c<="9")||(c == "."))){

return false;
}
}

return true;
}//end of function

//VALIDATION FOR EMPTY VALUE
function isEmpty(s){
return ((s == null) || (s.length == 0))
}//end of function

//Validation for digits
function isDigit (c){
return ((c >= "0") && (c <= "9"))
}//end of function


var endTime = new Date().getTime();


//functions to display the status in the Footer
obj.onCellDoubleClicked = function(event, column, row){
//
document.getElementById('footerinfo').innerHTML = "Editing "+gridColumns[column]+" "+column+" row "+row;
oldValue = obj.getCellText(column,row);
};

obj.onCellMouseOver = function(event, column, row){
if(column!=0){
document.getElementById('footerinfo').innerHTML = "Double click on the "+gridColumns[column]+" to edit the value";
}else{
document.getElementById('footerinfo').innerHTML = gridColumns[column]+" Value cannot be edited";
}
};

obj.onCellMouseOut = function(event, column, row){
document.getElementById('footerinfo').innerHTML = "GCP Application";
//window.status = "Cell " + column + "." + row + " mouse out"
};
//End of functions to display the status in the Footer


//function to return the dynamic styles for the grid
function getGridStyle(gridColumns, header)
{
document.write("<style> \n #dataGrid { width: 99%; height: 100%}");
for (var i=0 ; i<gridColumns.length ; i++)
{
document.write("#dataGrid .aw-column-" + i + " {text-align: center;width: 0.3%; border-right: 1px solid #ccc;}");
document.write("#dataGrid-header-" + i + "-0-box {background: #d5d0b7;color: #000000; font-size: 13px;text-align:center;}");
}
if (header)
{
document.write("#dataGrid .aw-grid-headers {color: blue}");
document.write("#dataGrid .aw-header-1 {background: #def}");
}
document.write("</style>");
}
//end getGridStyle function

</script>

<script>
// GRID SPECIFIC SCRIPTS CAN BE ADDED
// Attributes that can be cutomized in the below are :-
// columnCount, Editable Columns, Introducing Checkbox columns, combox boxes

//obj.setColumnCount(gridColumns.length-1);
obj.setColumnCount(gridColumns.length-1);


// Non editable of product number
obj.setCellEditable(false,0);
document.write("<center>");
document.write(obj);
document.write("<br>");

for(i=0;i<obj.getRowCount();i++)
{
for(j=0;j<obj.getColumnCount();j++)
{
obj.setCellEditable(true,5,i);
obj.setCellEditable(true,7,i);
if(obj.getCellText(8,i) == "")
{
obj.setCellText("N",8,i);
}

}
}

obj.onCellClicked = function(event, column, row)
{
modifiedRow = parseInt(row);
modifiedCol = parseInt(column);
oldValue = obj.getCellText(column,row);
}
obj.onCellTextChanged = function (text, col, row)
{

}
//ADD ALL DATAGRID(obj) related validations in the below
// eg., onCellValidated()
obj.onCellValidated = function(text, column, row)
{
if(column == 5)
{
calculateValue(text,column,row);
}
gridValidation(obj, text, column, row);
}

</script>


<!-- END OF GRID -->

</td>
<td nowrap="nowrap" width="10%">&nbsp;</td>
</tr>


</form>
</body>
</html>



Oliver
June 9,
Oliver,

I cannot reproduce the issue with your code sample. Clicking and scrolling works fine and everything seems to work as normal. What should I do to trigger the crash?
Alex (ActiveWidgets)
June 9,
Alex,

Actually i am typing some data in the grid data column and onCellValidation() method calling server side call to validate the data , and getting the response object thro AJAX call , for first column its working fine ,now i am trying to type some data and doing validating the second column or copy pasting first data into second column doing server side call.

2. without any server side call if i am doing double clicking any of the grid column also any error


Oliver
June 9,
Oliver,

sorry, I still don't understand. What should I do to reproduce the problem?
Alex (ActiveWidgets)
June 9,
alex,

In AW Grid text field type some data and try double clicking the text field continuously or choose one text field data and paste to all other fields within the grid continuously without any delay
Oliver
June 9,
alex,

In AW Grid text field(cell) type some data and try double clicking the cell continuously or choose one cell type some data and paste to all cells within the grid continuously without any delay

Oliver
June 9,
Oliver,

I still cannot reproduce the crash. Do you see the crash with the sample which you posted above or only with your original code? Do you see the crash only on your machine or on some other machines as well? Are you using AW 2.5.3?

In any case try removing your event handlers one-by-one and see which one triggers the problem. Then do the same with the code inside the event handler.

Also if you see that the problem is triggered by the code in onCellValidated event handler - try adding a timeout before doing any updates.
Alex (ActiveWidgets)
June 9,

This topic is archived.

See also:

This example shows how to Drag and Drop Rows in a v2.0 Grid to change the row order Rob Francis (59)
Search Grid Column For Match Joe (45)
Grid in Grid - Inner grid lacks scroolbars Diego Vilar (13)
2.0 - I need a Grid inside a Grid Rob Francis (17)
Refresh Grid joe (27)
Grid Cell Not Displaying White Spaces Jez (True Track Software) (24)
grid.onCellValidated = function(text, column, row) ISSUE Andy (11)
Undesired sort-behaviour in grid 2.5.3 with IE catdxm (10)
Issues with composite nested controls in subclassed objects Anthony (18)
Refreshing the grid in IE Tishamal Mohottala (10)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us