Kendo Arborescence, Développez Le Nœud

J'ai ce treeview qui peut avoir un nombre variable d'enfants (certains nœuds peuvent avoir jusqu'à 3 générations d'enfants, certains peuvent avoir un seul etc)

Ce que je suis en train de faire est de développer un certain nœud lorsque le treeview est chargé. Et j'ai 2 problèmes:
1) je ne trouve pas d'événement/de rappel pour que je sache quand le treeview est prêt
2) La fonction de développement ne fonctionne pas toujours ( je vais vous expliquer )

C'est mon 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);
}

La databind fonctionne ok, mon contrôleurs appelés, tout va bien.
Donc ce que j'ai essayé de brancher le ExpandNode fonction à un clic d'un bouton. La fonction est appelée, mais rien ne se passe. MAIS si je le raccorder à l'événement de changement des parents de la source de données, il fonctionne. Une autre chose intéressante est que la sélectionner fonctionne donc si je remplace le treeview.développer(...) avec treeview.sélectionnez(...), il fonctionne sur le clic.

Donc mes questions sont:

1) Quels cas dois-je utiliser pour loadEnd ( ou qch comme ça ) - je ne vais pas lier la fonction de bouton de la souris (c'est toujours ok, mais je préférez sur la charge terminée) - P. S. j'ai essayé toutes celles que j'ai trouvé sur le kendo forums,tels que: le changement, requestEnd, succès, lié aux données et ils ne travaillent pas. J'ai essayé d'envoyer le JSON avec la propriété "élargi" est défini à TRUE, pour le nœud en question, mais qui ne modifie que la flèche pour montrer comme il est ouvert, mais il n'a pas d'appeler le contrôleur et la charge les enfants.

2) savez-vous pourquoi ExpandNode ne fonctionne que lorsque liées à l'événement de changement? - la question la plus importante pour moi.

3) Si vous avez des suggestions, ou ai-je fait quelque chose de mal dans la initialiation de l'arborescence, s'il vous plaît dites-moi.

J'ai essayé déjà, il change seulement de la flèche l'élargissement de la mode
Faites-vous de la charge sur la demande ou le chargement de tous les arbres dans un seul transfert?
J'ai essayé de réglage loadOnDemmand pour faux et envoyer le expand = true. et puis BOOM. certains 2-3 nœuds s'est développée avec des enfants et de tous. mais j'ai un total de 100+ parents + les générations, c'annonces jusqu'à environ 40000 nœuds. Donc, il s'est écrasé. Je suppose que ce serait une solution, mais il n'est pas bon pour moi
De prendre un regard plus profond dans votre code... Pourquoi Children_Merchants n'est pas un HierarchicalDataSource?
J'ai eu un exemple dans le même projet, alors j'ai regardé pour la source de données et treeview init. Honnêtement, je n'ai pas vraiment l'obtenir comment il le fait. il va juste recursevly. - J'ai été étonné quand découvert que j'ai plus que 2 niveaux 🙂 en attendant, je vois que: si je étendre le 'Adam' nœud ciblées dans le ExpandNode(), fermez-la, puis cliquez sur le bouton, il se développe avec les enfants. Donc je suppose que les enfants doivent être chargées par le temps "teeview.développer(...)" est exécuté, seriez-vous d'accord?
Oui! ;ost problèmes que j'ai vu en DONC en ce qui concerne Kendo UI (non évident) sont sur le point de synchronisation sur comment/quand les choses se passent. Le fait que vous créez un arbre ne signifie pas que est rempli immédiatement, cela signifie qu'il émet une lecture pour les serveurs, lorsque les données sont reçues Kendo UI obtient les résultats, permet de faire quelques modifications dans les données, puis il commence à peupler le HTML. Donc, si vous essayez de développer quelque chose avant qu'il y est des données, ou avant le HTML est généré: rien ne se passe. J'ai également constaté que, parfois, les docs pour les événements ne sont pas claires ou pas uniforme d'un widget à un autre.

InformationsquelleAutor Vlad | 2013-07-08

3

J'ai copié ton code avec certains gratuit interprétations et la réponse à vos questions est:
1. Quel cas dois-je utiliser pour loadEnd => lié aux données
2. Savez-vous pourquoi ExpandNode ne fonctionne que lorsque liées à l'événement de changement? => Non, il travaille sans liaison à change événement. Si ce n'est pas alors il y a autre chose dans votre code.
3. Suggestions => Il y a quelques informations manquantes sur votre code qui pourrait faire la différence avec ce que j'ai mis en œuvre.
4. Qu'est-ce que CheckIfHasParent? => j'ai implémenté comme une fonction qui ne fait rien.
5. Qu'est-ce que hasParent? => je l'ai ignoré.
Le code comme je l'écris:

$(document).ready(function () {
fonction InitializeTreeview() {
var Children_Merchants = {
transport: {
lire: function (op) {
var id = op.les données.ID;
var data = [];
for (var i = 0; i < 10; i++) {
var aux = id * 100 + i;
les données.push({ Nom: "Nom" + aux, ID: aux});
}
op.succès(de données);
}
},
schéma : {
modèle: {
modèle: {
id : "ID",
hasChildren: true,
enfants : 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();

});
```
et vous pouvez jouer avec elle ici : http://jsfiddle.net/OnaBai/dSt2h/
- En fin de compte j'ai résolu le problème (en fait, je donne tout le crédit à l'un de mes collègues). Par le déclenchement de l'événement de clic sur la flèche (span). concernant lié aux données, je viens de déclencher ma fonction en un point où la treevies est sûrement chargé. La tâche réelle est la suivante: pour un nœud donné ID, développez l'arborescence de ce nœud & sélectionner. J'ai donc fait appelle à la DB pour obtenir un tableau des parrents Id. Attendre, pour chaque nœud de la charge (pour développer la prochaine), j'ai utilisé Ryan de Lester réponse de: stackoverflow.com/questions/5525071/... a également obtenu la référence de ma collègue
- Merci d'avoir répondu et d'avoir pris le temps de modifier mon code. Oh et j'ai trouvé que développer n'a pas de travail, sauf si le nœud a été pré-chargé. dire que vous l'ouvrez et fermez-le. après cela, il a travaillé. donc, je suppose, avec des données à distance, vous devez définir loadOnDemant à false. mais ce n'est pas vrai dans mon cas.
- Vous avez raison, la différence entre les données locales et à distance de données (clairement indiqué dans la documentation) est que la valeur par défaut pour loadOnDemand est faux, à moins que est des données locales. Il y a une autre question en tant liées à la vue de l'arborescence où ils veulent ouvrir deux niveaux, l'un juste après l'autre, mais ils ne sont pas d'attente pour avoir la première élargi... même problème, même solution (Comment faire pour attendre jusqu'à ce qu'un élément existe?)
- Si vous avez répondu à votre propre question avec le détail, je vais upvote la solution 🙂
InformationsquelleAutor OnaBai

Pour ceux qui pourraient être intéressés:

   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;
                                        });
                                   }
                                }
                          });

}

C'est ma méthode. Pour la boucle commence à 1 parce que le 1er élément de mon tableau est le 1er nœud ID - auquel j'ai déjà fait. l' .waitUntilExists est Ryan Lester de la méthode (j'ai mis un lien dans les commentaires ci-dessus). Un grand merci à mon collègue, de vous OnaBai et, de courese, Ryan Lester. J'espère que cela aide quelqu'un. 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"                
});

Veuillez expliquer votre réponse

InformationsquelleAutor Winston

ypu pouvez facilement trouver le treeview est prêt pour l'étendre par la suite le code d'expansion à tous les nœuds de treeview vous pouvez également le trouver en cochant perticular id ou le texte
hopw, exemple suivant va vous aider à

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

Vous devez vous connecter pour publier un commentaire.