feb 21 2013

Unselect KendoUI Treeview (de verdad)

La mayoría de soluciones para deseleccionar un nodo de un árbol de Kendo UI no me han funcionado. O no funcionan, o dejan el widget en un estado ‘bastardo’ que no permite continuar con el funcionamiento esperado.
Desde la docu oficial dan una solución … que lamentablemente no funciona:

//Unselect all nodes
var treeView = $("#treeView").data("kendoTreeView");
treeView.select($());

Al final casi que ha sido más fácil destripar un poco la libraria. Si tienes instanciado un treeview y devuelves la función select esto es lo que obtienes;

/*
* var tree = $("#treeview").data("kendoTreeView");
* console.log(tree.select);
*/
function (n){var i=this,r=i.element;return arguments.length?(n=e(n,r).closest(H),n.length&&(r.find(".k-state-selected").each(function(){var e=i.dataItem(this);e.set("selected",!1),delete e.selected}),i.dataItem(n).set("selected",!0)),t):r.find(".k-state-selected").closest(H)}

El método .select() es un getsetter dependiendo del arguments.length, bueno pues hay que mirar la parte donde si que le pasas parámetros (ya que primero deselecciona antes de volver a seleccionar).

Deseleccionar los elementos de un árbol de kendo

No podiemos solo eliminar la clase ‘.k-state-selected’ porque en Kendo UI siempre hay un dataSource que mantiene al widget.
Hay que recuperar el dataItem y decirle “deseleccionate”, o lo que viene siendo lo mismo .set(“selected”, false)

false a.k.a. !1

$("#treeview").kendoTreeView();

//Unselect
$("button#deselect").click(function(){
  var tree=$("#treeview").data("kendoTreeView");

  $("#treeview")
    .find(".k-state-selected")
    .each(
      function () {
        var e = tree.dataItem(this);
        e.set("selected", !1);
        delete e.selected;
    });
});

Unselect en Kendo UI TreeView
Hay que tener en cuenta que en Kendo UI se suele seguir el patrón MVVM para tener sincronizado la interfaz con los datos que son representados.