:: Forum >> Version 2 >>

Fix - combo template not closing in Firefox

More information on this topic is available in the documentation section: /general.bugs/2-0-0.html.

Combo template popup in AW 2.0.0 does not close if you click outside of the popup. Sorry that it took so much time to correct this - here is the patch.

CSS:

.aw-gecko .aw-popup-window .aw-ui-list {
    
displayblock/* fixes list overflow problem */
}

.
aw-ie .aw-templates-combo {
    
padding0px;
}

.
aw-ie .aw-templates-combo .aw-item-box {
    
padding1px;
}

.
aw-gecko .aw-edit-cell {
    
padding0px;
}

.
aw-gecko .aw-edit-cell .aw-item-box {
    
padding1px;
    
overflowauto/* fixes missing text cursor in combo template */
}


 
script:

if (AW.version 200){

    
AW.Templates.Combo.create = function(){

        
AW.Templates.Popup.create.call(this);

        var 
obj this.prototype;

        
obj.setAttribute("awx""combo");
        
obj.setClass("templates""combo");
        
obj.setClass("combo""box");

        var 
button = new AW.HTML.TABLE;

        
button.setClass("combo""button");
        
button.setAttribute("cellspacing""0");

        
button.setEvent("onclick", function(event){
            if (
this.$owner && this.$owner._cellTemplate){
                var 
combo this;

                
this.$owner.setController("popup", {
                    
onCellEditEnding: function(){
                        
try {
                            if (
AW.gecko && combo.$popup) {
                                var 
event combo.raiseEvent.caller.caller.arguments[0];
                                var 
range document.createRange();
                                
range.selectNode(combo.$popup);
                                return 
event.target && (range.compareNode(event.target) == 3);
                            }
                        }
                        
catch(err){
                            
//
                        
}
                    },
                    
onCellEditEnded: function(){
                        
combo.hidePopup();
                        
combo null;
                        
this.setController("popup", {});
                    }
                });
                
this.raiseEvent("editCurrentCell"event);
            }

            
this.showPopup();
            
this.getContent("box/text").element().focus();
            
this.getContent("box/text").element().parentNode.scrollTop 0;
        });

        
obj.setContent("box/sign"button);
        
obj.setContent("box/sign/html""<tr class=\"aw-cb-1\"><td></td></tr><tr class=\"aw-cb-2\"><td>&nbsp;</td></tr><tr class=\"aw-cb-3\"><td></td></tr>");

    };
}


 
To apply the patch you have to add CSS rules to the end of aw.css and the script to the end of aw.js (or replace AW.Templates.Combo code).

Here is an example using combo template -

var list = new AW.UI.List;
    list.
setItemText(function(i){return "Item " i});
    list.
setItemCount(25);

    var 
obj = new AW.UI.Grid;

    
obj.setCellData("cell");
    
obj.setHeaderText("header");
    
obj.setColumnCount(10);
    
obj.setRowCount(10);

    
obj.setCellEditable(true);

    
obj.setCellTemplate(new AW.Templates.Combo1);

    
obj.setPopupTemplate(list);

    
document.write(obj);


 
Alex (ActiveWidgets)
Monday, April 10, 2006
Alex

Thanks for this.

I've tried it and seem to be having pretty inconsistent results.

Using your example, if I click on the arrow in the top combo in column 2, sometimes (haven't been able to see any pattern to this) what happens is the cursor and focus moves to cell 1,1 as if that cell is about to be edited.

Also, when selecting an item from the dropdown, the dropdown closes OK, but the selection doesn't immediately appear in the combo box. It only appears if you scroll down/up (again this seems inconsistent).

Have you seen these strange effects? (I've put the patches at end of the runtime versions of aw.css and aw.js as instructed.)

Will
Will
Tuesday, April 11, 2006
... although I seem to have difficulties with your example, I have got it working correctly in my application. Maybe I'm reacting too quickly - apologies.

Will
Will
Tuesday, April 11, 2006
Thanks Alex,
Good work by the way.
It is kinda sad that you had to micro manage the object in that way.
HoseHead
Tuesday, April 11, 2006
Well, the proper solution involves rewriting focus manager code for FF to make popup DIV behave like a separate 'window'. I am still going to do it, but it will take some time.
Alex (ActiveWidgets)
Tuesday, April 11, 2006
i just tried alex's example and it works great. however, i tried to have a different drop down list on 2 columns and it doesn't work. here are my changes:

var popUpSelections_1 = ["Email","Phone","FedEX","USPS"];
var popUpSelections_2 = ["reconciled","unreconciled","hopeless"];

//obj.setCellTemplate(new AW.Templates.Combo, 3);

obj.setPopupTemplate(function(col, row){
var list = new AW.UI.List;
if (col==1) {
list.setItemText(popUpSelections_1);
list.setItemCount(4);
}
else {
list.setItemText(popUpSelections_2);
list.setItemCount(3);
}
return list;
});

even if i don't set another column to setCellEditable(true), this code will break. Am i calling setPopupTemplate correctly?

thanks
heidit
Tuesday, April 11, 2006
If you have multiple combo columns use multiple popup templates -

var data1 = ["Email","Phone","FedEX","USPS"];
    var 
data2 = ["reconciled","unreconciled","hopeless"];

    var 
list1 = new AW.UI.List;
    
list1.setItemText(data1);
    
list1.setItemCount(data1.length);

    var 
list2 = new AW.UI.List;
    
list2.setItemText(data2);
    
list2.setItemCount(data2.length);

    var 
obj = new AW.UI.Grid;

    
obj.setCellData("cell");
    
obj.setHeaderText("header");
    
obj.setColumnCount(10);
    
obj.setRowCount(10);

    
obj.setCellEditable(true);

    
obj.setCellTemplate(new AW.Templates.Combo1);
    
obj.setCellTemplate(new AW.Templates.Combo2);

    
obj.setPopupTemplate(list11);
    
obj.setPopupTemplate(list22);

    
document.write(obj);


 
Alex (ActiveWidgets)
Tuesday, April 11, 2006
works perfectly! thank you so much!
heidit
Tuesday, April 11, 2006
One more correction - somehow popup z-index was lost in FF, so this rule should be added -

.aw-gecko .aw-popup-window {
z-index: 10000;
}

Complete CSS patch -

<style>

.
aw-gecko .aw-popup-window .aw-ui-list {
    
displayblock/* fixes list overflow problem */
}

.
aw-ie .aw-templates-combo {
    
padding0px;
}

.
aw-ie .aw-templates-combo .aw-item-box {
    
padding1px;
}

.
aw-gecko .aw-edit-cell {
    
padding0px;
}

.
aw-gecko .aw-edit-cell .aw-item-box {
    
padding1px;
    
overflowauto/* fixes missing text cursor in combo template */
}

.
aw-gecko .aw-popup-window {
    
z-index10000/* should be above other elements */
}

</
style>

 
Alex (ActiveWidgets)
Tuesday, April 11, 2006
I am not sure... Do you have your AW updated on this server ? The combo still not closing in FF 1.5.0.2

I have seen some on some other server (awfriends or something like that), the combo was closing in their demo (even whei I did not see any differencies in the source code), but after doubleclick anywhere or selecting a value...

I am trying the demo version... and FF supported this partialy way is a bit tricky... Am I missing something ?
ASJ
Thursday, April 20, 2006
I found the reason !

FF since 1.5 forces UTF-8. When I am coding I have to force UTF-8 for my pages too... But i forgot (and you Alex ahould use the same technique through whole your web) to force it for linked CSS too..

Working now (at last with the same behaviour I described dtto)..
ASJ
Saturday, April 22, 2006



This topic is archived.

Back to /general.bugs/2-0-0.html

Documentation:

Forum search