How to set combo box in grid cell initial display?

Hi,

We need a combo box in a cell grid with texts different from datas/values.

The code below works when selecting a value in the list: cell text and value are OK:
<img src="ftp://foxincloud.com/Screenshots/FIC/grid-combo-selection.png" />

However, after the initial grid load, the cells display datas/values instead of texts:
<img src="ftp://foxincloud.com/Screenshots/FIC/grid-combo-initial.png" />

How can the cells initially display texts instead of datas/values

var grd = new AW.UI.Grid;

grd.setRowCount(3);
grd.setColumnCount(3);
grd.setCellEditable(true);

grd.setCellTemplate (new AW.Templates.Combo, 2);

var texts, datas, values;

texts = ['AK','BC','CA','Co. Cork','DF','France','ID','IL','Lancashire','Lara','MT','NM','Nueva Esparta','OR','Québec','RJ','SP','Táchira','WA','WY'];
datas = values = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20'];

var cboFormat = AW.System.Format.subclass();
cboFormat.create = function(){ // attempt to create a specific format

  var obj = this.prototype;

  obj.dataToText  = function(data){return texts[datas.indexOf(data)]};

  obj.dataToValue = function(data){return data;}; // needed?

  obj.textToValue = function(text){return text;}; // needed?
  obj.textToData  = function(text){return text;}; // needed?

  obj.valueToData = function(value){return value;}; // needed?
  obj.valueToText = function(value){return value;}; // needed?
};

// grd.setCellFormat (cboFormat, 2); // does not work: cell are no longer editable with this instruction

var lst = new AW.UI.List; // new AW.Templates.List useless because it has no setItem*() methods
lst.setItemCount(texts.length);
lst.setItemText(texts);
lst.setItemValue(values);
grd.setPopupTemplate(lst, 2);

grd.onCellValidated = function(text, col, row){
  col = parseInt(col, 10);
  if (col == 2){
    console.log('col: ' + col + ', row: ' + row);
    console.log('text: ' + text); // OK: read from texts above
    var value = grd.getCellValue(col, row);
    console.log('value: ' + value) // OK: read from values above
  }
};

grd.setCellData([
  ['1','1','1']
, ['2','2','2']
, ['3','3','3']
]);

document.write(grd);

update:
when selecting an item in the list:
- the cell text is properly updated,
- the cell value is unchanged, IOW stays == initial data loaded

To translate a cell value to text you need a format object -

var items = {
    'FR': 'France',
    'DE': 'Germany',
    'UK': 'United Kingdom'
}

var format = new AW.System.Format();

format.valueToText = function(value){
    return items[value];
}

obj.setCellFormat(format, 1);

Here is full sample -

var data = [
    ['abc', 'FR'],
    ['def', 'UK']
];

var items = {
    'FR': 'France',
    'DE': 'Germany',
    'UK': 'United Kingdom'
}

var itemText = [], itemValue = [], itemLookup = {}, i;

for(i in items){
    itemText.push(items[i]);
    itemValue.push(i);
    itemLookup[items[i]] = i;
}

var list = new AW.UI.List;
list.setItemText(itemText);
list.setItemCount(itemText.length);
list.focus = function(){};


var format = new AW.System.Format();

format.valueToText = function(value){
    return items[value];
}


var obj = new AW.UI.Grid;

obj.setColumnCount(2);
obj.setRowCount(2);
obj.setCellData(data);

obj.setCellFormat(format, 1);
obj.setCellTemplate(new AW.Templates.Combo, 1);
obj.setPopupTemplate(list, 1);


document.write(obj);

Hi Alex,

Sorry for the delay before answering

Thanks for proposing a solution; all tests are OK except one thing: after selecting a new item in the list, the cell value does not seem to update according to the 'items' object above.

for example, if I select 'Germany' in the (1,0) list, value remains 'FR':

(in firebug console)
obj.getCellValue(1,0)
"FR"
obj.getCellText(1,0)
"Germany"

Thanks in advance.

Hi Alex

We could finally make it work (working code below)

http://foxincloud.com/tutotest/wFormStandardPage.tuto?awForm=dataUpdate.scx

oTempl = oGrid.getHeaderTemplate(4);
oTempl.setStyle('text-align','center');
oTempl.setStyle('font-weight','bold');
var itemText = [], itemLookup = {}, i, items = {'1':'AK','2':'BC','3':'CA','4':'Co. Cork','5':'DF','6':'France','7':'ID','8':'IL','9':'Lancashire','10':'Lara','11':'MT','12':'NM','13':'Nueva Esparta','14':'OR','15':'Québec','16':'RJ','17':'SP','18':'Táchira','19':'WA','20':'WY'};
for (i in items){
    itemText.push(items[i]);
    itemLookup[items[i]] = i; 	
}

var cboFormat = new AW.System.Format();
cboFormat.valueToText = function(value){return items[value] || '';};
cboFormat.textToValue = function(text){return itemLookup[text];};
oGrid.setCellFormat(cboFormat, 4, undefined);

var list = new AW.UI.List;
list.setItemText(itemText);
list.setItemCount(itemText.length);
list.focus = function(){};
list.setStyle('color', '#000000');

var cbo = new AW.Templates.Combo;
cbo.setStyle('color', '#000000');
oGrid.setCellTemplate (cbo, 4, undefined);
oGrid.setPopupTemplate(list, 4, undefined);