Deseo editar el nombre de un nodo principal que selecciono
yo se como Añadir un nuevo nodo padre con javascript adjuntar
var selectedNode = treeview.select(); treeview.append({ ReportGroupName: $("#addNodeText").val()Sé cómo mostrar el nodo seleccionado en un cuadro de texto
$("#groupNameSelected").val(nodeName);- que se llama con
select: onSelect,
Sin embargo, quiero CAMBIO el Nodo Texto
Estaba buscando en Google y mirando la API, quiero una forma javascript o jquery limpia para simplemente actualizar la vista de árbol
He estado configurando el código de esta manera
var treeview = $("#treeview").data("kendoTreeView");
var selected = treeview.select(), item = treeview.dataItem(selected);
if (item) {
console.log("Selected item: " + item.ReportGroupName + " : " + item.Id + " (uid: " + item.uid + ")");
}
Pero, ¿cómo acabo de cambiar el texto del nodo seleccionado en Treeview?
Actualizar:
Encontré este código en un foro telerik.
Cambia el texto, pero DESPUÉS de intentar escribir el datos en árbol fuera
console.log(mydatasource.data()); // i expect this to change as adding nodes does update this ...
function refreshTreeNode(data)
{
var currentText = $("#treeview").data("kendoTreeView").select().find("span.k-in").first().text();
var node = $("#treeview").data("kendoTreeView").select().find("span.k-in").first();
var nodeSpan = $("#treeview").data("kendoTreeView").select().find("span.k-in > span.k-sprite").first();
node.text("");
node.append(nodeSpan);
node.append(data);
}
Los cambios en los datos no están ocurriendo en los datos de vista en árbol, solo en la interfaz de usuario veo el cambio. ¿por qué?
Respuestas
1 para la respuesta № 1La razón por la que solo cambia la interfaz de usuario es porque los datos almacenados en la fuente de datos no se modifican
En cambio, hay una mejor solución que dependerá de lo que sepa sobre los datos, que es:
- Fuente de datos (debe poder acceder a la fuente de datos para utilizar datasource.get () y set ())
- La ID de registro (puede usar datasource.get (id) para obtener los datos de la fuente de datos si conoce la ID)
- El uid de registro (si no lo hace, puede usar la propiedad uid para verlos probar el elemento de inspección)
Instrucciones para el siguiente ejemplo:
- Expandir todo el nodo
- Seleccione cualquier nodo
- Escriba el nombre para reemplazar con
- Pulse el botón "Cambiar nombre"
- Para ver la actualización en la fuente de datos, presione el botón Verificar fuente de datos y abra la consola, luego puede buscarla allí.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeview"></div>
<input type="text" id="changeNameTo"></input>
<button id="changeNameNow">Change Name</button>
<button id="checkDataSource">Check Datasource Data on console</button>
<script>
var dataSource = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Employees",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
$("#treeview").kendoTreeView({
dataSource: dataSource,
dataTextField: "FullName"
});
$("#changeNameNow").on("click", function() {
//get the data from datasource using id (if you know the id)
//dataSource.get(2).set("FullName",$("#changeNameTo").val());
//if you don"t, try utilize data-uid
dataSource.getByUid($(".k-state-selected").parent().parent().attr("data-uid")).set("FullName", $("#changeNameTo").val());
});
$("#checkDataSource").on("click", function() {
console.log(dataSource.data());
});
</script>
</body>
</html>