Kendo Treeview-Knoten Erweitern

Habe ich dieses treeview-wich kann eine variable Anzahl der Kinder (einige Knoten kann bis zu 3 Generationen von Kindern, einige haben nur einer etc)

Was ich versuche zu tun ist, erweitern Sie einen bestimmten Knoten, wenn das treeview geladen. Und ich habe 2 Probleme:
1) ich kann nicht finden, ein event/callback, damit ich weiß, Wann die Strukturansicht bereit ist
2) Die expand-Funktion nicht immer funktioniert ( ich werde später erklären )

Dies ist mein treeview:

function InitializeTreeview() {

var Children_Merchants = {
    transport: {
        read: {
            url: function (options) {
                return kendo.format(websiteRootUrl + '/Merchants/Merchants/?hasParents={0}',   hasParent);
            }
        }
    },
    schema: {
        model: {
             model: {
            id: "ID",
            hasChildren: true,
            children: Children_Merchants
        }
        }
    }
};

var Brandowners = new kendo.data.HierarchicalDataSource({
    transport: {
        read: {
            url: kendo.format(websiteRootUrl + '/Merchants/GetBrandowners?databaseID={0}',       selectedDatabaseID)
      }
    },
    //change: ExpandNode, - if I call expand node like this, it works.
    schema: {
        model: {
            id: "ID",
            hasChildren: true,
            children: Children_Merchants
        }
    }
});


$('#treeview').kendoTreeView({
    dataSource: Brandowners,
    animation: {
        collapse: {
            duration: 200,
            effects: "fadeOut"
        },
        expand: {
            duration: 200,
            effects: "fadeIn"
        }

    },
    dataTextField: "Name",
    complete: function () {  alert('ok'); },
    //dataBound    : ExpandNode,
    select: OnSelect,
    expand: CheckIfHasParent
}).data('kendoTreeView');
}

function ExpandNode() {
    var treeview;
    treeview = $("#treeview").data("kendoTreeView");
    var nodeToExpand = treeview.findByText('Adam'); //dummy txt, will have from parameter
    treeview.expand(nodeToExpand);
}

Die databind-Methode funktioniert ok, mein Controller aufgerufen werden, ist alles in Ordnung.
Also, was ich versucht habe, ist hook up die ExpandNode-Funktion zu einem Klick auf eine Schaltfläche. Die Funktion wird aufgerufen, aber es passiert nichts. ABER wenn ich es Haken bis zu dem change-Ereignis des Eltern-datasource, es funktioniert. Eine weitere interessante Sache ist, dass die select funktioniert so, wenn ich ersetzen treeview.erweitern Sie(...) mit treeview.wählen Sie(...), es funktioniert auf die klicken Sie auf.

Also meine Fragen sind:

1) welches Ereignis sollte ich verwenden für loadEnd ( oder etwas ähnliches ) - so dass ich nicht haben, binden Sie die Funktion auf Taste klicken (es ist immer noch ok, aber ich lieber auf laden beendet) - P. S. ich habe versucht, alle diejenigen, die ich fand, auf die kendo-Foren,wie: änderung, requestEnd, Erfolg, Datenbindung und Sie funktionieren nicht. Ich habe versucht, per JSON mit der Eigenschaft "erweitert" auf TRUE gesetzt, werden für die Knoten in Frage, aber das ändert lediglich den Pfeil, um zu zeigen, wie Sie geöffnet wird, aber es funktioniert nicht rufen Sie die controller und laden die Kinder.

2) wissen Sie, warum ExpandNode funktioniert nur, wenn gebunden an das change-Ereignis? - die wichtigste Frage für mich.

3) Wenn Sie Vorschläge haben, oder habe ich etwas falsch gemacht in der initialiation der treeview, bitte sagen Sie mir.

Hab ich schon versucht, es ändert sich nur der Pfeil zu erweiterten Modus
Machst du den laden auf Nachfrage oder laden Sie die Struktur in einem einzigen transfer?
Ich habe versucht, loadOnDemmand auf false und senden Sie den expand = true. und dann BOOM. etwa 2-3 Knoten bekam, erweitert mit Kindern und alle. aber ich habe insgesamt 100+ Eltern + den Generationen, die es anzeigen bis zu über 40000 Knoten. So krachte es. Ich denke, das wäre eine Lösung, aber es ist nicht gut für mich
Nehmen Sie einen tieferen Blick in den code... Warum Children_Merchants ist nicht ein HierarchicalDataSource?
Ich hatte ein Beispiel im selben Projekt, so sah ich es für die datasource-und treeview-init. Ehrlich gesagt, ich weiß nicht wirklich, wie er es tut. es geht nur recursevly. - Ich war erstaunt, als fand heraus, dass ich mehr als 2 Ebenen 🙂 in der Zwischenzeit sehe ich, dass: wenn ich das erweitern der 'Adam' - Knoten - gezielt in der ExpandNode(), schließen Sie es, und klicken Sie dann auf die Schaltfläche, es wird erweitert mit den Kindern. Also ich denke, die Kinder müssen geladen werden, indem die Zeit "teeview.erweitern, (...)" ausgeführt wird, würden Sie dem Zustimmen?

InformationsquelleAutor Vlad | 2013-07-08

3

Habe ich kopiert den code mit einigen freie Interpretationen und die Antwort auf Ihre Frage:
1. Welches Ereignis sollte ich verwenden für loadEnd => Datenbindung
2. Wissen Sie, warum ExpandNode funktioniert nur, wenn gebunden an das change-Ereignis? => Nein, es funktioniert ohne Bindung an change Veranstaltung. Wenn es nicht dann ist es etwas anderes in deinem code.
3. Vorschläge => Es gibt einige Informationen fehlen über Ihr code, der möglicherweise den Unterschied machen mit dem, was ich habe, umgesetzt werden.
4. Was ist CheckIfHasParent? => ich umgesetzt haben, ist es eine Funktion, die eigentlich gar nichts.
5. Was ist hasParent? => ich habe es ignoriert.
Den code wie ich es schreiben:

$(document).bereit(Funktion () {
Funktion InitializeTreeview() {
var Children_Merchants = {
transport: {
Lesen: function (op) {
var id = op.Daten.ID;
var Daten = [];
for (var i = 0; i < 10; i++) {
var aux = id * 100 + i;
Daten.push({ Name: "Name-" + aux, ID: aux});
}
op.Erfolg(Daten);
}
},
schema : {
Modell: {
Modell: {
id : "ID",
hasChildren: true,
Kinder : Children_Merchants
}
}
}
};
```
        var Brandowners = new kendo.data.HierarchicalDataSource({
            transport: {
                read: function (op) {
                    op.success([
                        {"Name": "Adam", "ID": 1},
                        {"Name": "Benjamin", "ID": 2},
                        {"Name": "Caleb", "ID": 3},
                        {"Name": "Daniel", "ID": 4},
                        {"Name": "Ephraim", "ID": 5},
                        {"Name": "Frank", "ID": 6},
                        {"Name": "Gideon", "ID": 7}
                    ])
                }
            },
            //change: ExpandNode, - if I call expand node like this, it works.
            schema   : {
                model: {
                    id         : "ID",
                    hasChildren: true,
                    children   : Children_Merchants
                }
            }
        });

        $('#treeview').kendoTreeView({
            dataSource   : Brandowners,
            animation    : {
                collapse: {
                    duration: 200,
                    effects : "fadeOut"
                },
                expand  : {
                    duration: 200,
                    effects : "fadeIn"
                }

            },
            dataTextField: "Name",
            dataBound    : ExpandNode,
            expand       : CheckIfHasParent
        }).data('kendoTreeView');
    }

    function ExpandNode() {
        var treeview;
        treeview = $("#treeview").data("kendoTreeView");
        var nodeToExpand = treeview.findByText('Adam'); //dummy txt, will have from parameter
        treeview.expand(nodeToExpand);
    }

    function CheckIfHasParent(e) {
    }

    InitializeTreeview();

});
```
und Sie können mit spielen Sie es hier : http://jsfiddle.net/OnaBai/dSt2h/

Am Ende habe ich das Problem (eigentlich, ich gebe den ganzen Kredit zu einem Kollegen von mir). Durch das auslösen des click-Ereignisses auf den Pfeil (span). über Datenbindung, ich löste meine Funktion an einem Punkt, wo die treevies ist sicherlich geladen. Die eigentliche Aufgabe ist: für beliebige Knoten-ID, erweitern Sie die Strukturansicht zum Knoten & wählen Sie es aus. Also machte ich Anrufe, um die DB zu bekommen, ein array mit den parrents-IDs. Warten für jeden Knoten zu laden (um Sie zu erweitern, der nächste), habe ich Ryan Lester ' s Antwort von: stackoverflow.com/questions/5525071/... bekam auch den Hinweis von meinem Kollegen
Danke für die Beantwortung und für die Zeit nehmen, zu Bearbeiten mein code. Oh, und ich fand heraus, dass erweitern hat nicht funktioniert, es sei denn, der Knoten war vorinstalliert. sagen Sie es öffnen und schließen Sie es dann. nach, dass es geklappt hat. also ich denke, mit remote-Daten verwenden, müssen Sie die loadOnDemant auf false. aber das ist nicht sein in meinem Fall.
Sie haben Recht, der Unterschied zwischen lokalen Daten und remote Daten (eindeutig in der Dokumentation) ist, dass der default-Wert für loadOnDemand ist false, es sei denn lokalen Daten. Es ist eine andere Frage, DAMIT im Zusammenhang mit Baum-Ansicht, wo Sie wollen, zu öffnen, zwei Ebenen eine gerade nach der anderen, aber Sie warten nicht darauf, dass er die erste erweiterte... Gleiches problem, gleiche Lösung (Wie zu warten, bis ein element vorhanden ist?)
Wenn Sie die Antwort auf Ihre eigene Frage mit den Details werde ich upvote die Lösung 🙂

InformationsquelleAutor OnaBai

Für alle, die interessiert sein könnten:

   function ExpandNode() {

   var treeview;
   var node1;

    treeview = $("#treeview").data("kendoTreeView");
    var node2;
    var myURL = kendo.format(websiteRootUrl + '/Merchants/GetPathForSelectedNode?databaseID={0}&merchantID={1}&brandownerID={2}', selectedDatabaseID,MerID,BowID);

       node1 = treeview.dataSource.get(BowID);
       node = treeview.findByUid(node1.uid);
       var uid = node1.uid;
       node.find('span:first-child').trigger('click'); //expand 1st level

    $.ajax( {
                            url: myURL,
                            dataType: "json",
                            contentType: 'application/json; charset=utf-8',
                            success: function(result)
                                {

                                   var length = result.length;

                                   var lastVal = 1;
                                   for (var i = 1; i < length-1; i++) {
                                        $("#treeview li[data-uid=\'" + uid + "\'] ul.k-group").waitUntilExists (function
                                        () {
                                               i = lastVal; //have to reinitialize i because waitUntilExist's callback will find the i incermented, over the needed value
                                               lastVal++;
                                               node2 = node1.children.get(result[i]);
                                               node = treeview.findByUid(node2.uid);
                                               uid = node2.uid;
                                               node1 = node2;
                                               if(lastVal <= length-1)
                                                    node.find('span:first-child').trigger('click'); //keep expanding
                                               else
                                               {
                                                    treeview.select(node); //just select last node
                                                    currentSelectedNode = node;
                                                }

                                        });
                                   }
                                   if(length == 2) //select 1st child
                                   {
                                        $("#treeview li[data-uid=\'" + uid + "\'] ul.k-group").waitUntilExists (function
                                        () {
                                               node2 = node1.children.get(result[i]);
                                               node = treeview.findByUid(node2.uid);
                                               uid = node2.uid;
                                               node1 = node2;
                                               treeview.select(node); //just select last node
                                               currentSelectedNode = node;
                                        });
                                   }
                                }
                          });

}

Dies ist meine Methode. Die for-Schleife beginnt bei 1, da das 1. element in meinem array ist der 1. Knoten-ID - wich, habe ich bereits erweitert. die .waitUntilExists ist Ryan Lester ' s Methode (ich habe einen link in die Kommentare oben). Vielen Dank an meine Kollegen, um Sie OnaBai und courese, Ryan Lester. Ich hoffe, das jemand hilft. Cheers

InformationsquelleAutor Vlad

$("#treeview").kendoTreeView({
    animation: {
        expand: true
    },

    dataSource: dataSource,
    dataBound: function (e) {                   
        var tv = $("#treeview").data("kendoTreeView");
        if (tv != null) {
            tv.expand(".k-item");
        }
    },

    dataTextField: "test",
    dataValueField: "id"                
});

Bitte erläutern Sie Ihre Antwort mehr

InformationsquelleAutor Winston

man leicht finden können die Strukturansicht bereit ist, für die erweitern, indem Sie folgenden code, die den ausbau der treeview-Knoten können Sie finden es auch durch die Prüfung besonders-id oder text
hopw, folgende Beispiel wird Ihnen helfen,

Ex:

$("#treeview").kendoTreeView({
                animation: {
                    expand: true
                },

                dataSource: dataSource,
                dataBound: function (e) {                   
                    var tv = $("#treeview").data("kendoTreeView");
                    if (tv != null) {
                        tv.expand(".k-item");
                    }
                },

                dataTextField: "test",
                dataValueField: "id"                
            });

InformationsquelleAutor Chandrika Prajapati

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.