Autocomplete or lookup editor in grid?

Does the grid support autocomplete in a cell of the grid?

That is, I would like to be able type "sab" in a cell and when I type the third char the grid makes a call to the server, my code matches the "sab" string to records in the database, and then a dropdown appears under the appropriate cell with list of matching records.

Is there an online example of this? I search the forum but did not see this specific feature.

Thanks for any tips or pointers,

Scott

I used to mix some features to do it.
But you can make your own simplifyed/complex version.
Just insert a call to the server ajax/asp/vbs ... code inside the SearchFunction.
HTH
<script>
var lastcol;
var lastrow;
var isanyddvisible = false;
var lastTopPos;
var lastLeftPos;
var DDCELLCLICKED = false;
////-------------------------------------------------------////

var objAC = new AW.UI.Grid;
objAC.setCellData(function(col, row){return col + "." + row });
objAC.setHeaderText("header");
objAC.setStyle("width", '130');
objAC.setStyle("height", '100%');
objAC.setVirtualMode(false);
objAC.setCellEditable(false);
objAC.getRowsTemplate().setStyle('background', 'lightyellow');
objAC.setColumnCount(1);
objAC.setRowCount(140);
////-------------------------------------------------------////

objAC.onCellClicked = function(event, column, row){
DDCELLCLICKED = true;
obj.onCellClicked();
obj.setCellText(this.getCellText(column,row), lastcol,lastrow);
obj.getCellTemplate(lastcol,lastrow).refresh();
}
////-------------------------------------------------------////
var objtextarea = new AW.HTML.DIV;
objtextarea.setStyle("height", "180");
objtextarea.setStyle("POSITION", "ABSOLUTE");
objtextarea.setStyle("Z-INDEX", "1000000000");
objtextarea.setStyle("display", "none") ;
objtextarea.setContent("text", objAC.toString());
document.write(objtextarea);
////-------------------------------------------------------////

var obj = new AW.UI.Grid;
obj.setCellData(function(col, row){return col + "." + row});
obj.setHeaderText("header");
obj.setVirtualMode(false);
obj.setCellEditable(true);
obj.setColumnCount(6);
obj.setRowCount(10);
////-------------------------------------------------------////
/////// SCROLL-TOP CHANGED (ENABLE / DISABLE VERT.-SCROLL )//////////////
obj.onScrollTopChanged = function(top){
if(isanyddvisible){ if (top != lastTopPos){ return "obj.setScrollTop(lastTopPos)" } }
}
obj.onScrollTopError = function(error){ eval(error); }
////-------------------------------------------------------////
/////// SCROLL-LEFT CHANGED (ENABLE / DISABLE HORIZ.-SCROLL )///////
obj.onScrollLeftChanged = function(left){
if(isanyddvisible){ if (left != lastLeftPos){ return "obj.setScrollLeft(lastLeftPos)" } }
}
obj.onScrollLeftError = function(error){ eval(error); }

////-------------------------------------------------------////

obj.onCellClicked = function(event, column, row){
if( isanyddvisible ) {
objtextarea.setStyle("display", "none") ; /// hide drop-down object
isanyddvisible = false;
obj.setScrollTop( lastTopPos );
obj.setScrollLeft( lastLeftPos );
}
}
////-------------------------------------------------------////

obj.onCellTextChanged = function(event, column, row){
if( !DDCELLCLICKED ) {
SearchFunction( column,row);
objAC.getRowsTemplate().refresh();
}
}
////-------------------------------------------------------////

obj.onCellEditStarted = function(event, column, row){

/// retaint scroll pos
lastTopPos = obj.getScrollTop();
lastLeftPos = obj.getScrollLeft();

isanyddvisible = true;

/// postion the drop-down object below cell
var el = obj.getCellTemplate(column, row).element();

if(!AW.ie) {
objtextarea.setStyle("left", AW.getLeft(el) - obj.getScrollLeft() );
objtextarea.setStyle("top", AW.getTop(el) - obj.getScrollTop() + el.offsetHeight );
}
else{
objtextarea.setStyle("left", AW.getLeft(el) - 2 );
objtextarea.setStyle("top", AW.getTop(el) - 3 + el.offsetHeight );
}

objtextarea.setStyle("display", "block") ;
objAC.raiseEvent("adjustScrollHeight"); /////////// PATCH //////
objAC.refresh(); /////// PATCH ///////

lastcol=column;
lastrow=row;

SearchFunction( lastcol,lastrow);
}
////-------------------------------------------------------////

function SearchFunction(col,row){

objAC.setRowCount( 0 ) ;
objtextarea.setStyle("height", "29");
objAC.setHeaderText('Loading...' ,0);
objAC.refresh();


var tosearch = obj.getCellText(col, row).toUpperCase();
var rows = [], max = 140;
if(tosearch.length < 3){
objAC.setHeaderText('3 chars min' ,0);
objAC.refresh();
}
else{
if(tosearch != '' ){
for (var i=0; i<max; i++){
var cellval = objAC.getCellText(0, i);

if ( cellval.toUpperCase().substr(0, tosearch.length) == tosearch.substr(0, tosearch.length) ) {
rows.push(i);
}
}
}
setTimeout( function(){ ////*********/// SET TIMEOUT
rows.length > 0 ? objAC.setRowCount( rows.length ) : objAC.setRowCount(0 ) ;

if(rows.length == 0){
objtextarea.setStyle("height", "29");
objAC.setHeaderText('No Matches',0);
}
else{
objtextarea.setStyle("height", "180");
objAC.setHeaderText('Found::'+rows.length ,0);
}
objAC.setRowIndices(rows);
objAC.setScrollTop(0);
},100); ////*********//// END TIMEOUT
}
}
////-------------------------------------------------------////
document.write(obj);
</script>

Thanks for the response, Carlos.

That is quite a bit of information and I am new to Active Widgets.

I do not quite understand why there are two grid widgets here, and I also do not understand how the rows variable gets set. Somehow it should get (XML?) data from the server, but I do not know where to tie it in. In other autocomplete toolkits I have used there is a lookup handler URL that you specify. Is there one here?

Also, does anyone know if there is a simple example of autocomplete (maybe w/o the grid) using the ActiveWidgets library?

Thanks for any tips or pointers,

Scott

Ok, I figured out what the code is doing. I have it working in my prototype, but I was hoping to have the autocomplete box part of the cell. That is, in the example code above I would like to be able to type "0.1" in a cell, then press the down arrow twice to select the 0.11 entry.

Right now you cannot use the arrows, you must take your hands off the keyboard and select what you want with the mouse.

Anyone know of a way to get the autocomplete in the cell?

Thanks

You can override default key events with the following code.

note1: dont forget to reset zz variable to '-1' at the end of onCellEditStarted function.
note2 : I used 'End' key to grab the cell because 'Enter' key is trapped by cell-edition.

But I can't find a fix to:
1- does not scroll the drop-down grid when using arrow-down key.
2- when up-arrow-key is used the cursor moves back one position inside the edited cell.

Already fixed :
The cell maintain it's edition status when (mouse)scrolling or sort the dd-grid.
I will try to make a complete example
var zz = -1;

var defaultEventHandler = obj.getEvent("onkeydown");
obj.setEvent("onkeydown", function(e){
if( isanyddvisible ) {
var ind = objAC.getRowIndices();

if(e.keyCode==40){
if(zz < objAC.getRowIndices().length - 1) zz++;
var ind2 = ind[zz];

objAC.setCurrentRow([ind2] );
objAC.setSelectedRows( [ind2] );
e.returnValue = false;
}
if(e.keyCode==38){
if(zz > 0) zz--;
var ind2 = ind[zz];

objAC.setCurrentRow([ind2] );
objAC.setSelectedRows([ind2] );
e.returnValue = false;
}

if(e.keyCode==35){ //// End Key
ACIITEMSELECTED = true;

objtextarea.setStyle("display", "none") ; /// hide drop-down object
obj.setScrollTop( lastTopPos );
obj.setScrollLeft( lastLeftPos );

isanyddvisible = false;

obj.onCellTextChanged = function(){}
obj.setCellText(objAC.getCellText(0,objAC.getSelectedRows( [ind2] ) ),lastcol,lastrow );
obj.getCellTemplate(lastcol,lastrow).refresh();
e.returnValue = false;
}
}
else{
defaultEventHandler.call(this, e);
e.returnValue = false;
}

} );

Replace the variable name ACIITEMSELECTED ... with ..DDCELLCLICKED

oooops
I should say ... dont forget to reset zz variable to '-1' at the begining of SearchFunction .