Discussion :

[youness78]

Bonjour,

Je cherche à mettre en place un filtre sur un Treeview qui consiste à afficher les noeuds correspondant à une chaîne de caractères librement saisi par l'utilisateur dans une Textbox.

Par la suite je voudrais que le motif saisi dans la TB soit coloré au niveau du Treeview.

J'ai donc implémenté la fonction JQuery suivante :

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
 
function FiltreTreeview() {
    var timer = null;
 
    // Récupération de la valeur saisie dans la TextBox du filtre
    var value = $("#ctl00_Main_filtre_treeview").val();
 
    // Parcours du Treeview sur chacun des Ids ASP correspondants aux noeuds du Treeview (html : a)
    $("[id^=ctl00_Main_TreeViewServicet]").each(function () {
        var Id = $(this).attr("id"); //"ctl00_Main_TreeViewServicet0" si je tape DEMO
        var text = $(this).text().toLowerCase(); //" DEMO (Démo Espace Client) "
        var child = $(this).children();
        var clientId = child[0].id.indexOf("Client"); //"Client2441"
        var serviceId = child[0].id.indexOf("Co");
        //if (childId.indexOf("Client") == -1) {
        if ((clientId || serviceId) == -1) {
            var result = $(this).parentsUntil("table");
            if (text.indexOf(value.toLowerCase()) == -1) {
                result.hide(); // Remonte de <a> jusqu'à la balise <table> et masque le noeud via le hide() si matche pas
            }
            else {
                result.show(); // Sinon affiche le noeud
                $(this).css("color", "#FF9900");
            }
        }
    });
    return this;
}

Le div contenant mon TV porte l'id ctl00_Main_filtre_treeview, et le code ASP de mon panel TB + TV est le suivant :

Code :

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

1
2
3
4
5
6
7
8
9
 
 
                <asp:Panel runat="server" ScrollBars="Auto" CssClass="BordureTreeview">
                    <div class="FiltreTreeview">
                        <asp:TextBox ID="filtre_treeview" onblur="FiltreTreeview()" onkeyup="FiltreTreeview()" runat="server" />
                        <ajaxToolkit:TextBoxWatermarkExtender ID="TBWE_filter" runat="server" TargetControlID="filtre_treeview" WatermarkText="<%$ Resources:ResourceEC,Ex_filter %>" WatermarkCssClass="expressionWaterMark"/>
                    </div>
                    <asp:TreeView ID="TreeViewService" runat="server" ShowLines="True" ShowCheckBoxes="All" />
                </asp:Panel>

Mon souci est que lorsque les noeuds résultats s'affichent ils sont en orange mais lorsque je vide ma TB ou que je clique en dehors, les résultats restent coloriés en orange alors qu'ils devraient s'afficher en bleu (voir screenshots )

Sur quel évenement dois-je donc appeler ma fonction FiltreTreeview pour que mes résultats de recherche s'affichent avec la bonne couleur ?

Merci par avance.