3.2.0

RC1 Example & Question: Combo in a grid column.

I confirmed this example of a combo in a grid column works in RC1. However, I need help with an enhancement.

The dropdown box appears all the time.
How do I make the dropdown only appear for just the cell being edited?

<html> 
<head> 
    <script src="runtime/lib/aw.js"></script> 
    <link href="runtime/styles/xp/aw.css" rel="stylesheet"></link> 
</head> 
<body> 

<script> 

    var HeaderText = ["Number","Description"]; 
    var CellText = [ 
        ["1","Description 1"], 
        ["2","Description 2"], 
        ["3","Description 3"], 
        ["4","Description 4"], 
        ["5","Description 5"]
    ]; 

    var obj = new AW.UI.Grid;

    obj.setHeaderText(HeaderText); 
    obj.setCellText(CellText); 
    obj.setColumnCount(2); 
    obj.setRowCount(5); 

    // BEGIN COMBO POPUP CODE
    rowCombo = new AW.Templates.Combo;
    obj.setCellTemplate(rowCombo, 1);

    obj.setPopupTemplate(function(col, row){ 

        var grid = this; 
        var list = new AW.UI.List; 

        list.setItemText(["text1", "text2", "text3"]); 
        list.setItemCount(3); 

        list.onItemClicked = function(event, i){ 
            var text = this.getItemText(i); 
            grid.setCellText(text, col, row); 
            grid.setCellValue(text, col, row); 
            grid.getCellTemplate(col, row).hidePopup(); 
        } 
        return list; 
    }); 

    // END COMBO POPUP CODE


    document.write(obj);
</script>

</body> 
</html>


Just a few notes:
This sample is for the case where the same dropdown is used for every cell of a column. My understanding is that by creating the template you will get good performance regardless of the number of rows.

I got this code from Alex's post in:
http://www.activewidgets.com/javascript.forum.8762.6/which-way-to-set-a.html
Rob Francis
February 2,
Alex,

If you run my example code above in FF 1.0 the combo box is impossible to close. Selecting an item, clicking on the 'v', clicking off the grid, etc all have no effect on closing the combo.

Rob Francis
February 3,
Thank you, Rob
Your example works just fine, the only trouble I have is that once I slecting any value in a dropdown list - there is a blue highlighter which is indicating the currently "moseover" item in a drop-down list.
But then there will be no longer blue highlighting background at the next time when I will spread down a combobox.
It works only for the first time you select anything in a list, and then it does not do that any longer.

Testing on IE6

Is that a bug or...?
Paul
February 6,
Yes, there is a bug in RC1 - mouseover highlighting disappears after opening combo box popup. It is already fixed for 2.0 final.
Alex (ActiveWidgets)
February 6,
Hi Paul,

That is a bug that Alex has fixed for the next (final?) release.

http://www.activewidgets.com/javascript.forum.11332.6/v2-rc1-grid-row-mouseover.html
Rob Francis
February 6,
And BTW, I would frankly prefer to use AW.UI.Combo object, which works just absolutely fine in a "dialog.htm" example.
But unfortunately it does not work for me in a grid case.
Or..it actually does show up, but the value selection is not working at all.

RC1+IE6 were used.
Paul
February 6,
Sounds great, Alex and Rob
But don't you think it would be much easier for the folks and more standard-wise if it matters if one can use the same object and just the same methods like described in /quickref/combo.htm:

var obj = new AW.UI.Combo;
obj.setId("myCombo");
obj.setControlText("Some text");
obj.setControlImage("favorites");
obj.setItemText(["Home", "Favorites", "Font size", "Search"]);
obj.setItemImage(["home", "favorites", "fontsize", "search"]);
obj.setItemCount(4);

both in system grid and a regular cell grid? This will make things much easier.

Paul
Paul
February 6,
Rob, will you please explain how with your example above one can make 2 different combos in a 2 different columns?

I'm struggling with
obj.setPopupTemplate(function(col, row){

coz it seems it works for both of my popup. How to differentiate this function then??

Any advise is appreciated!
I'm using RC1
Paul
February 9,
Paul,

The example above is from code Alex posted elsewhere on the forum. Anyway, I haven't tried but I would think you just need to use an if statement in the setPopupTemplate code.

Ex.

obj.setPopupTemplate(function(col, row){
if (col==1) {
// popup code for column 1
}
else {
// popup code for all other columns
}

Rob Francis
February 9,
Yap, Alex just confirm that you and I were correct (see my prev. post).
Thank you all for the help.
Paul
February 9,
Hi everybody, I'm new to ActiveWidgets. The initial question for this dicussion was:

How do I make the dropdown only appear for just the cell being edited?

That is exactly what i want to know. However, I don't think this question was answered by any of the posts so far. Could anyone answer that?

I am trying to create a grid, which every cell it contains is a combo box. It would just be messy to have little arrows and boxes showing up in every cell. I would want only the clicked-on (being edited) cell to have the combo box showing, the rest can just be a link or plain text. A link would be preferred in this case to indicate that it's click-able.

I was thinking of using some sort of javascript to toss the combo box back and forth from visible to invisible, in conjunction with tossing the selected text as a link from invisible to visible...but as it sounds, it is probably too complicated. Is there an easier way of achieving the same purpose with ActiveWidgets?

I need this rather urgently. Please help!

Thank you
Daw
July 14,
Please check:
/javascript.forum.11951.1/grid-in-a-grid-scrollbar.html
Seems to be exactly what you described (except for the "link" feature).
HTH
Carlos
July 14,
How do one trigger these events?:

bj.onCellEditStarting = function(text, column, row){...};
obj.onCellEditStarted = function(text, column, row){...};
obj.onCellValidating = function(text, column, row){...};
obj.onCellValidated = function(text, column, row){...};
obj.onCellEditEnding = function(text, column, row){...};
obj.onCellEditEnded = function(text, column, row){...};
Neil Craig
July 27,
For the interest of other who had the same question, use the onCellValueChanged function to detect a change in selection.
Neil Craig
July 28,

This topic is archived.

See also:


Back to support forum