javascript - event - Kendo DropDownList en cuadrícula muestra el valor después de la selección

kendo ui dropdownlist get text

Question

Estoy tratando de usar una lista desplegable en mi grilla. Esta es mi definición de grilla:

$("#grid").kendoGrid({
editable: true,
dataSource: {
data: data,
schema: {
model: {
fields: {
Name: {
type: "string",
editable: false
},
FruitName: {
type: "string"
},
FruitID: {
type: "number"
}
}
}
}
},
columns: [{
field: "Name",
title: "Name",
width: 150
}, {
field: "Fruit",
title: "Fruit",
width: 115,
editor: renderDropDown,
template: "#=FruitName#"
}]
});

Y esta es mi función de editor:

function renderDropDown(container, options) {
var dataSource = [
//{ name: "", id: null },
{
FruitName: "Apple",
FruitID: 1
}, {
FruitName: "Orange",
FruitID: 2
}, {
FruitName: "Peaches",
FruitID: 3
}, {
FruitName: "Pears",
FruitID: 4
}];
$(''<input required name="'' + options.field + ''"/>'')
.appendTo(container)
.kendoDropDownList({
dataTextField: "FruitName",
dataValueField: "FruitID",
dataSource: dataSource
});
}

Aquí hay una demostración en JSBin para la ilustración: http://jsbin.com/malev/3/edit

El mío es una pregunta de 2 partes.

1. ¿Por qué el menú desplegable de esta muestra no se ajusta al valor predeterminado en la columna antes de editarse?

2. ¿Por qué el texto cambia al valor una vez realizada la selección?

Answer 1

Eche un vistazo a la definición de su columna:

{
field: "Fruit",
title: "Fruit",
width: 115,
editor: renderDropDown,
template: "#=FruitName#"
}

Tu nombre de campo es Fruit . En el editor, se vincula a este nombre de campo, pero su modelo de esquema y sus datos solo tienen una propiedad FruitID . Esto explica por qué el menú desplegable no muestra el valor inicial correctamente.

El otro problema es que, si necesita actualizar dos propiedades de su modelo desde el editor, debe hacerlo manualmente, por ejemplo, configurando su editor de la siguiente manera:

$(''<input required name="'' + options.field + ''"/>'')
.appendTo(container)
.kendoDropDownList({
dataTextField: "FruitName",
dataValueField: "FruitID",
dataSource: dataSource,
change: function (e) {
var dataItem = e.sender.dataItem();
options.model.set("FruitName", dataItem.FruitName);
}
});

La alternativa sería tener una función de búsqueda que le brinde el texto de visualización para un valor dado, por ejemplo:

var fruitNames = ["", "Apple", "Orange", "Peaches", "Pears"];
function getFruitName(value) {
return fruitNames[value];
}

Entonces podrías usar esto en tu plantilla:

template: "#= getFruitName(FruitID) #"

y no necesitaría la columna separada para el nombre y el manejador de cambios en su editor.

( demostración actualizada )