how can i make a combo in grid non-editable?

i have a standard combo drop down within a grid cell. i only want the user to select from the list and not being able to type in anything.

is there anyway to do it?

if i set obj.setCellEditable to false then the combo does not close properly on firefox

here is a test

#myGrid { width: 400px}
#myGrid .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc}

/* Alternate row colors */
#myGrid .aw-alternate-even {background: #fff;}
#myGrid .aw-alternate-odd {background: #eee;}

#myGrid .aw-column-0 {width: 50px }
#myGrid .aw-column-1 {width: 150px }
#myGrid .aw-column-2 {text-align: right}
#myGrid .aw-column-3 {text-align: right}
#myGrid .aw-column-4 {text-align: right}
</style>

<script type="text/javascript">

var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],
["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],
["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],
["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],
["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],
["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],
["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],
["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],
["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],
["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],
["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],
["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],
["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],
["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],
["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],
["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],
["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]
];

var myHeaders = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];

</script>


<script type="text/javascript">

var obj = new AW.Grid.Extended;

obj.setId("myGrid");

obj.setCellText(myData);
obj.setHeaderText(myHeaders);
obj.setColumnCount(5);
obj.setRowCount(20);

obj.setSelectorVisible(true);

obj.setCellEditable(true, 1);

var colors = ["Red", "Purple", "Blue", "Green", "Yellow", "White", "Black"];
var myList = new AW.UI.List;
myList.setItemText(colors);
myList.setItemCount(7);

obj.setCellTemplate(new AW.Templates.Combo, 1);
obj.setPopupTemplate(myList, 1);

document.write(obj);
</script>


</body>
</html>

setCellEditable() is the wrong function to use since you've changed the cell template to a combo.

Instead, you have to change the attributes of the combo list -

myList.getContent("box/text").setAttribute("readOnly", true)

thanks for your reply, but it gives an error:

myList.getContent("box/text") is undefined

any ideas?

Hmm ... its the input field in the combo itself that needs to be changed and not the popup list. My mistake there.

Try -

obj.getCellTemplate().getContent("box/text").setAttribute("readOnly", true)

obj.setCellEditable(true, 1);

var colors = ["Red", "Purple", "Blue", "Green", "Yellow", "White", "Black"];
var myList = new AW.UI.List;
myList.setItemText(colors);
myList.setItemCount(7);

obj.setCellTemplate(new AW.Templates.Combo, 1);
obj.setPopupTemplate(myList, 1);
obj.setCellEditable(false, 1); ///////**********//////
document.write(obj);

thanks anthony, it looks like it would work, but i can still type into the input field on the combo column.

obj.setCellEditable(false, 1); only works for IE. on Firefox, it cause another problem - drop down the selection and then scroll to the right side of the grid. The drop down does not close.

Oh well, since you have FireFox, I'd recommend you install the FireBug debugger. Inspecting the combo cell element might give you some clues. Alternately, inspect the DOM (you might want to use a cut down example of your grid because the DOM can be HUGE!).

Generally, there's more than one span to each element (for boxes, rulers, etc.). Once you find the right component, you should then have your solution.