Discussion :

[Arendelle]

Salutation tout le monde !!

Voila j'utilise une liste déroulante avec recherche d'autocompletion issus du framework Kendo UI dans un formulaire. Dans cette liste j'ai toutes mes sources. Et juste en dessous de celle-ci j'ai un kendo tree view (un arbre dans lequel lorsque l'on clique on déplie ces feuilles voici un exemple: http://demos.telerik.com/kendo-ui/tr...l-data-binding) qui correspond à l'aborescence de la source actuelle du formulaire. Et lorsque j'en selectionne une autre je souhaite pouvoir recharger ce kendo tree view avec la nouvelles source.
Voici l'image de ma liste avec le tree view de la source actuelle:


Donc du coup j'ai fait ceci, j'ai appliqué l'évenement onchange sur ma liste avec un appel ajax. L'ajax envoi un paramètre à mon controlleur (qui lui se charge du traitement) se controleur retourne des résultats à une vue (et c'est dans cette vue que le nouveau tree view se situe). Et c'est lors du succès de l'appel ajax que j'incorpore cette vue dans la div qui contient le 1e tree view.

Voici le code javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$("#recherche_pef").kendoDropDownList({
        filter: "startswith",
        dataTextField: "nom",//valeur à rechercher
        dataValueField: "code",//valeur retounrné après recherche (genre id pour traitement)
        optionLabel: "Rechercher un PEF/DP...",
        dataSource:Listepef,
        change: function(e) {
            var id_pef = $("#recherche_pef").data("kendoDropDownList").value();
 
            $.ajax({
                type: 'POST',
                url : "{{ path('miseaJourPEF')}}", 
                dataType : 'html', // on spécifie bien que le type de données est en JSON
                data : {
                    id_pef: id_pef // on donne la chaîne de caractère tapée dans le champ de recherche
                            },
                success : function(data){ // on se prépare à renvoyer les données réceptionnées grâce à l'évènement de succès
                       // alert(data);
                       // console.log(data);
                        //$('treeview_copie').innerHTML = data;
                        document.getElementById("treeview_copie").innerHTML = data;
 
                },
                error : function(erreur){
                    alert("Une erreur est survenue "+ erreur);
                    console.log(erreur);
                }
            });
          }
 
    });

Le code de la vue que mon appel ajax retourne:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="example">
        <div class="demo-section k-content">
            <div id="treeview"></div>
        </div>
        <p>coucou</p>
        <script id="treeview_template" type="text/kendo-ui-template">
 
            #= (item.icone=="depart")?  "<input type='radio' name='nv_depart'  value='"+item.id+"' style='margin-left: 10px;'/>" : ''# #: item.text #
 
        </script>
 
    </div>
<script>
        var treeeview2={{treeeview2|raw}};        
           
          $("#treeview").kendoTreeView({
                template: kendo.template($("#treeview_templat").html()),
 
                dataSource: treeeview2
            });
   // treeview_recharge(treeeview2);
   //setTimeout("treeview_recharge()",1000);
        
</script>

Mais voici mon problème la nouvelle div se met bien dans l'endroit ou se situait le 1er tree view mais le javascript qui est censé créé le nouveau tree view ne fonctionne pas. Et j'ai aucun message d'erreur. Voici l'image du résultat:

Quelqu'un s'aurait-il pourquoi ?? J'espère que quelque'un pourra m'aider car je bloque. Si jamais mon problème n'est pas claire n'hésitez pas à me le dire . J'espère aussi avoir quelques réponse. Merci d'avance!!

[Arendelle]

Cela fait un moment que j'ai commencé cette discussion et que j'ai trouvé la solution pour mon problème . Du coup j'ai changé de stratégie. J'ai supprimé le passage par la vue pour changer mon treeview en fonction de ma liste. J'ai tout simplement changé la datasource du treeview et il se recharge de lui-même.

Voici mon code au cas ou quelqu'un ai le même problème .

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$("#recherche_pef").kendoDropDownList({
        filter: "startswith",
        dataTextField: "nom",//valeur à rechercher
        dataValueField: "code",//valeur retounrné après recherche (genre id pour traitement)
        optionLabel: "Rechercher",
        dataSource:Listepef,
        change: function(e) {
            var id_pef = $("#recherche_pef").data("kendoDropDownList").value();
 
            $.ajax({
                type: 'POST',
                url : "{{ path('miseaJourPEF')}}", 
                dataType : 'text', // on spécifie bien que le type de données est en JSON
                data : {
                    id_pef: id_pef // on donne la chaîne de caractère tapée dans le champ de recherche
                            },
                success : function(data){ // on se prépare à renvoyer les données réceptionnées grâce à l'évènement de succès
 
                        var new_data = $.parseJSON(data);
                     $("#treeview_copie").data("kendoTreeView").dataSource.data(new_data);
 
                },
                error : function(erreur){
                    alert("Une erreur est survenue "+ erreur);
                    console.log(erreur);
                }
            });
          },
          open: function () { $("#recherche_pef").getKendoDropDownList().list.find("k-list-optionlabel").first().hide(); 
                }
 
    });