3.2.0
Forum Demo Guide API Store

Combo in Grid, Machine Specific Problem, Very Strange

This problem happens on some of my client’s machines, but not all. And I don’t think very many of them at that.
http://vd0.net/vd0/gridproblem.png as you can see the pop-up template (I think it’s the pop-up) seems to leap right off the grid. Any help you can give me would be incredibly appreciated. I have invested a lot of time in customizing the grid control with huge success. To fail over this one insane issue would be very sad.
Here is the code if that helps; I have tried to no avail to tweak the CSS to fix the problem. That’s the line 
.aw-list-template, .aw-popup-window,.aw-flow-vertical,.aw-ui-list,.aw-list-box,.aw-list-control {height: 100px}

I am at a total loss as to how to fix this.

Thanks in Advance 

<html> <head> 
    <script src='js/aw.js'></script>
<script type='text/javascript' src='js/yahoo/yahoo-min.js'></script>
<script type='text/javascript' src='js/dom/dom-min.js'></script>
<script type='text/javascript' src='js/event/event-min.js'></script>
<script type='text/javascript' src='js/connection/connection-min.js'></script>
<script type='text/javascript' src='js/printercommon.js'></script>
<script type='text/javascript' src='js/calendar/calendar-min.js'></script>
<link type='text/css' rel='stylesheet' href='css/calendar/assets/calendar.css'>
<link href='css/aw.css' rel='stylesheet'></link>
<style>
    .aw-grid-row {border-bottom: 1px solid;} 

    .aw-cells-normal  {border-right: 1px solid;}
    .aw-cells-selected { color: white;background: blue  ;}
    .aw-edit-cell { color: black;background: white ;}
.aw-grid-cell,.aw-grid-header,.aw-grid-footer {width: 121px}
.aw-list-template, .aw-popup-window,.aw-flow-vertical,.aw-ui-list,.aw-list-box,.aw-list-control {height: 100px}
</style>
</head> 
<body>
<form id='formOutput'>
    <input type='hidden' id='textOutput'>
    <input type='hidden' id='gridColumn'>
    <input type='hidden' id='OrderReadWrite' value='7527' >
    <input type='hidden' id='OrderReadOnly' value='7528' >
</form>
<div style='position: absolute; width: 100px; height: 100px; z-index: 1; top:32; display:none;' id='cal1Container'></div>

<button onclick='add()'>add row</button>
<button onclick='del()'>delete row</button>
<br>
<script>
YAHOO.util.Event.onAvailable('cal1Container', gridcal.init, gridcal, true);


var CellData =  [
['115','hq05w-hp11','9/14/2006','HQ05W-HP11','HQ1-5','5-098','Blue','HQ1-5','5-097','Green','0','1','0','','','0','0','0','0','0','','','','0','0','','','']

];


var list1 = new AW.UI.List;
    list1.setItemText(PrinterList);
    if (PrinterList) {    list1.setItemCount(PrinterList.length); }else {list1.setItemCount(0);}


var list2 = new AW.UI.List;
    list2.setItemText(['Blue','Green']);
    list2.setItemCount(2); 


var list3 = new AW.UI.List;
    list3.setItemText(['HQ1-1','HQ1-2','HQ1-3','HQ1-4','HQ1-5','HQ1-6','HQ1-8','HQ1-9','HQ1-10','HQ1-11','HQ2-1','HQ2-2','HQ2-3','HQ2-4','HQ2-5','HQ2-6','HQ2-7','Phoenix','Brea Legal','Brea','Concord','Lewisville','Long Beach','Las Vegas','Monrovia','Ontario Legal','Ontario','Sacramento Legal','Sacramento','South Bay Legal','San Diego Legal','San Diego','San Jose']);
    list3.setItemCount(33); 


var list4 = new AW.UI.List;
    list4.setItemText(['1','2','3','4']);
    list4.setItemCount(4); 


var list5 = new AW.UI.List;
    list5.setItemText(['Color','B&amp;W']);
    list5.setItemCount(2); 


    var obj = new AW.UI.Grid;
    obj.setCellText(CellData); 
    var celldatalength= CellData.length;
if (parent.document.location.href.indexOf('Template=formbody')!= -1) {obj.setCellEditable(true);}else{obj.setCellEditable(false);}
var HeaderText =  ['ID',
'New Printer Name',
'Planned Printer Move Date',
'Printer Name',
'Current Location',
'Current Jack Number',
'Current Jack Color',
'New Location',
'New Jack Number',
'New Jack Color',
'Is a new IP address needed?',
'Does port need activation?',
'Is MSFT Team assistance required?',
'Existing Host Name',
'Current IP Address',
'TCO14',
'Mainframe',
'PeopleSoft',
'Unicenter Monitoring',
'NOC',
'New IP Address',
'New Subnet Mask',
'New Gateway',
'Printer Moved?',
'Printer Pooled?',
'New Host Name',
'Unix Queue Name',
'Mainframe Queue Name'
];
obj.setColumnIndices([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27]);
var BinaryColumns =  [10,11,12,15,16,17,18,19,23,24];
var DateSelectorColumns =  [2];
if (parent.document.location.href.indexOf('Template=formbody')!= -1) {
obj.setCellTemplate(new AW.Templates.Combo,3); 
obj.setPopupTemplate(list1,3); 
obj.setCellTemplate(new AW.Templates.Combo,4); 
obj.setPopupTemplate(list3,4); 
obj.setCellTemplate(new AW.Templates.Combo,6); 
obj.setPopupTemplate(list2,6); 
obj.setCellTemplate(new AW.Templates.Combo,7); 
obj.setPopupTemplate(list3,7); 
obj.setCellTemplate(new AW.Templates.Combo,9); 
obj.setPopupTemplate(list2,9); 
obj.setCellTemplate(new AW.Templates.Checkbox, 10);
obj.setCellTemplate(new AW.Templates.Checkbox, 11);
obj.setCellTemplate(new AW.Templates.Checkbox, 12);
obj.setCellTemplate(new AW.Templates.Checkbox, 15);
obj.setCellTemplate(new AW.Templates.Checkbox, 16);
obj.setCellTemplate(new AW.Templates.Checkbox, 17);
obj.setCellTemplate(new AW.Templates.Checkbox, 18);
obj.setCellTemplate(new AW.Templates.Checkbox, 19);
    obj.setCellEditable(false,23);
    obj.getCellTemplate(23).setStyle('background','#C0C0C0');
    obj.setCellEditable(false,24);
    obj.getCellTemplate(24).setStyle('background','#C0C0C0');
    obj.setCellEditable(false,25);
    obj.getCellTemplate(25).setStyle('background','#C0C0C0');
    obj.setCellEditable(false,26);
    obj.getCellTemplate(26).setStyle('background','#C0C0C0');
    obj.setCellEditable(false,27);
    obj.getCellTemplate(27).setStyle('background','#C0C0C0');
}else{for (k = 0; k <= (HeaderText.length)-1; k++){obj.getCellTemplate(k).setStyle('background','#C0C0C0');}}
for (k = 0; k <= celldatalength-1; k++){obj.setCellValue(CellData[k][10]=='0'? false : true,10,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][10]=='0'? 'No' : 'Yes',10,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellValue(CellData[k][11]=='0'? false : true,11,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][11]=='0'? 'No' : 'Yes',11,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellValue(CellData[k][12]=='0'? false : true,12,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][12]=='0'? 'No' : 'Yes',12,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellValue(CellData[k][15]=='0'? false : true,15,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][15]=='0'? 'No' : 'Yes',15,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellValue(CellData[k][16]=='0'? false : true,16,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][16]=='0'? 'No' : 'Yes',16,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellValue(CellData[k][17]=='0'? false : true,17,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][17]=='0'? 'No' : 'Yes',17,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellValue(CellData[k][18]=='0'? false : true,18,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][18]=='0'? 'No' : 'Yes',18,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellValue(CellData[k][19]=='0'? false : true,19,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][19]=='0'? 'No' : 'Yes',19,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellValue(CellData[k][23]=='0'? false : true,23,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][23]=='0'? 'No' : 'Yes',23,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellValue(CellData[k][24]=='0'? false : true,24,k);};
for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][24]=='0'? 'No' : 'Yes',24,k);};

obj.getPopupTemplate().setStyle('height', '100px');



    obj.setId('myGrid');

    obj.setColumnCount((HeaderText.length)-1);
    obj.setRowCount(CellData.length);
if (parent.document.getElementById('printergridframe')){     parent.document.getElementById('printergridframe').width = parent.document.body.clientWidth-148;    obj.setSize(parent.document.body.clientWidth-150, 200);
}
else {
    obj.setSize(800, 200);
}
    obj.setHeaderText(HeaderText);
    obj.setHeaderHeight(40);
    obj.getHeadersTemplate().setClass('text', 'wrap');


obj.onCellValueChanged = function(text, column, row){ 

       if (isEleminArray (BinaryColumns,column) != -1) {
           obj.setCellText(text ? 'Yes' : 'No',column,row);
           var r = new AW.HTTP.Request;
           r.setURL('tmtrack.dll?scriptpage');
           r.setRequestMethod('POST');
           r.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
           r.setParameter('scriptname', 'postCellUpdatePrinter');
           r.setParameter('column', column);
           r.setParameter('row', row);
           r.setParameter('text', (text==false)?0:1);
           r.setParameter('recordid',this.getCellValue(0, row));
           r.setParameter('orderidrw',7527);
           r.setParameter('orderidro',7528);
           r.request();
           r.response = function(data){            
               window.status=data;
               }
       }

}

    obj.onCellEditStarting = function(text, col, row){
                document.forms.formOutput.textOutput.value = row;
                document.forms.formOutput.gridColumn.value = col;
       if (isEleminArray (DateSelectorColumns,col) != -1) {
            cal1Container.style.display='block';            //cal1Container.style.top=document.getElementById('myGrid-cell-2-' + row).offsetParent.offsetTop;
            cal1Container.style.left=(col*100)+10;
        }
    }
obj.onCellStateChanging = function(text, col, row){
        if (col == '1') {
                cal1Container.style.display='none';
        }
    }
obj.onCellValidated = function(text, column, row){
        var r = new AW.HTTP.Request;
        r.setURL('tmtrack.dll?scriptpage');
        r.setRequestMethod('POST');
   r.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   r.setParameter('scriptname', 'postCellUpdatePrinter');
        r.setParameter('column', column);
        r.setParameter('row', row);
        r.setParameter('text', text);
        r.setParameter('recordid',this.getCellValue(0, row));
           r.setParameter('orderidrw',7527);
           r.setParameter('orderidro',7528);
        r.request();
        r.response = function(data){            
      window.status=data;
        }
    }

document.write(obj);

obj.onRowAdded = function(row){
       //window.status = 'Row added: ' + row;
       
for (k in BinaryColumns){   this.setCellValue(false, BinaryColumns[k],row);   this.setCellText('No', BinaryColumns[k],row);}       var r = new AW.HTTP.Request;        
       r.setURL('tmtrack.dll?scriptpage');
           r.setRequestMethod('POST');        
           r.setParameter('scriptname', 'postNewPrinter');
           r.setParameter('row', row);
           r.setParameter('recordid', '1016');
           r.request();

           r.response = function(data){            
                      window.status= 'Row added: ' + data;
           
            obj.setCellText(data, 0, row);
           
           }


   }

   obj.onRowDeleting = function(row){
       return !confirm('Delete row ' + row + '?');
   }

   obj.onRowDeleted = function(row){
       window.status = 'Row deleted: ' + row;

       var r = new AW.HTTP.Request;        
       r.setURL('tmtrack.dll?scriptpage');
           r.setRequestMethod('POST');        
           r.setParameter('scriptname', 'postDeletePrinter');
           r.setParameter('row', row);
        r.setParameter('recordid',this.getCellValue(0, row));
           r.request();

           r.response = function(data){
                     window.status=data;
           }

   }


   // row index
   var serial = 1000;

   function add(){
       obj.addRow(CellData.length++);
   }

   function del(){
       var i = obj.getCurrentRow();
       obj.deleteRow(i);
   }



</script>

</body> </html>
JT
September 14,
This problem might be related to the browser cache disabled on some machines, i.e. 'Temporary Internet Files->Settings->Check for newer versions of stored pages->Every visit to the page'. This will produce some delay during the popup window initialization (loading stylesheets) and the popup code will not be able to determine the correct window size. The possible workaround for this bug is to introduce some delay in popup size calculation, here is the patch to try (add this code before creating any AW objects) - 

if (AW.ie) {

    new AW.Templates.Combo;

    AW.Templates.Combo.prototype.showPopup = function(){

        var popup = window.createPopup();
        this.$popup = popup;
        AW.$popup = this;

        var doc = popup.document;
        doc.open();

        if (AW.strict){
            doc.write("<!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\" \"http:\/\/www.w3.org/TR/html4/strict.dtd\">");
        }

        var cls = document.getElementsByTagName("html")[0].className;

        doc.write("<html class=\"aw-popup-window aw-system-control " + cls + "\"><head>");

        AW.register(doc.parentWindow);

        for (var i=0; i<document.styleSheets.length; i++){
            doc.write(document.styleSheets[i].owningElement.outerHTML);
        }

        doc.write("</head><body onselectstart=\"return false\" oncontextmenu=\"return false\">");
        doc.write(this.getPopupTemplate().toString());
        doc.write("</body></html>");
        doc.close();

        var ref = this.element();

        var left = 0;
        var top = ref.offsetHeight;
        var width = ref.offsetWidth;
        var height = 1;

        popup.show(left, top, width, height, ref);

        this.setTimeout(function(){
            width = Math.max(doc.body.scrollWidth, width);
            height = Math.max(doc.body.scrollHeight+1, 20);
            popup.show(left, top, width, height, ref);
            ref = null;
        }, 100);
    };

}


Try increasing the timeout delay from 100ms to 500-1000ms if this does not help.
Alex (ActiveWidgets)
September 21,
I finally got word back from the client; the above patch really works and does fix the problem. Alex you are amazing!!!

jt
October 31,

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)
RC1 Example & Question: Combo in a grid column. Rob Francis (13)
Refresh Grid joe (27)
Grid Cell Not Displaying White Spaces Jez (True Track Software) (24)
AW.Input control in a grid header row - problem in FF Will (11)
Correct way to update table model in Extended Grid Curt K. (19)
Problem with scrolling when grid's width and height is set in percentage Andrew (9)

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