Hello Rebecca,
You can replace the drop-down with a RadComboBox, only with a few changes made to the javascript from the demo.
Here is the RadComboBox column declaration:
And here are the edited javascript functions:
function ShowColumnEditor() {
editedCell = this;
//hide text and show column editor in the edited cell
var cellText = this.getElementsByTagName("span")[0];
cellText.style.display = "none";
//display the span which wrapps the hidden checkbox editor
if (this.getElementsByTagName("span")[1]) {
this.getElementsByTagName("span")[1].style.display = "";
}
var colEditor = this.getElementsByTagName("div")[0] ||
this.getElementsByTagName("input")[0] ||
this.getElementsByTagName("select")[0];
//if the column editor is a form decorated select dropdown, show it instead of the original
if (colEditor.className == "rfdRealInput" &&
colEditor.tagName.toLowerCase() == "select")
colEditor = Telerik.Web.UI.RadFormDecorator.getDecoratedElement(colEditor);
colEditor.style.display = "";
if (colEditor.tagName == "DIV") {
var combo = $find(colEditor.id);
combo.get_inputDomElement().focus();
}
else {
colEditor.focus();
}
}
function HideEditor(editCell, editorType) {
//get reference to the label in the edited cell
var lbl = editCell.getElementsByTagName("span")[0];
switch (editorType) {
case "textbox":
var txtBox = editCell.getElementsByTagName("input")[0];
if (lbl.innerHTML != txtBox.value) {
lbl.innerHTML = txtBox.value;
editCell.style.border = "1px dashed";
StoreEditedItemId(editCell);
}
txtBox.style.display = "none";
break;
case "checkbox":
var chkBox = editCell.getElementsByTagName("input")[0];
if (lbl.innerHTML.toLowerCase() != chkBox.checked.toString()) {
lbl.innerHTML = chkBox.checked;
editedCell.style.border = "1px dashed";
StoreEditedItemId(editCell);
}
chkBox.style.display = "none";
editCell.getElementsByTagName("span")[1].style.display = "none";
break;
case "combobox":
var ddl = $find(editCell.getElementsByTagName("div")[0].id);
var selectedValue = ddl.get_value();
if (lbl.innerHTML != selectedValue) {
lbl.innerHTML = selectedValue;
editCell.style.border = "1px dashed";
StoreEditedItemId(editCell);
}
ddl.get_element().style.display = "none";
default:
break;
}
lbl.style.display = "inline";
}
function UpdateValues(grid) {
//determine the name of the column to which the edited cell belongs
var tHeadElement = grid.get_element().getElementsByTagName("thead")[0];
var headerRow = tHeadElement.getElementsByTagName("tr")[0];
var colName = grid.get_masterTableView().getColumnUniqueNameByCellIndex(headerRow, editedCell.cellIndex);
//based on the column name, extract the value from the editor, update the text of the label and switch its visibility with that of the column
//column. The update happens only when the column editor value is different than the non-editable value. We also set dashed border to indicate
//that the value in the cell is changed. The logic is isolated in the HideEditor js method
switch (colName) {
case "ProductName":
HideEditor(editedCell, "textbox");
break;
case "QuantityPerUnit":
HideEditor(editedCell, "textbox");
break;
case "UnitPrice":
HideEditor(editedCell, "textbox");
break;
case "UnitsInStock":
HideEditor(editedCell, "combobox");
break;
case "UnitsOnOrder":
HideEditor(editedCell, "textbox");
break;
case "Discontinued":
HideEditor(editedCell, "checkbox");
break;
default:
break;
}
}
I hope that this achieves the functionality which you need.
All the best,
Tsvetina
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the
Telerik Public Issue Tracking system and vote to affect the priority of the items.