Discussion :

[Champouil]

Bonjour,

J'ai réaliser une "double listview" dont voici le code :

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
33
34
35
 
<asp:ListView ID="lvNiv0" runat="server" ItemPlaceholderID="itemPlaceHolder" OnItemDataBound="lvNiv0_ItemDataBound">
                    <LayoutTemplate>
                        <table id="tabNiv0" width="90%" class="CUListHeader" cellspacing="0">
                            <tr>
                                <th align="center">Client</th>
                                <th align="center">Code Tiers</th>
                                <th align="center">Secteur</th>
                                <th align="center">ID</th>
                            </tr>
                            <tr id="itemPlaceHolder" runat="server"></tr>
                        </table>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <tr id="myRow" runat="server"  style="border:1px solid black">
                            <td align="center" style="width:40%"><asp:Label ID="lbN0Client" runat="server" Text='<%#Eval("Client") %>'></asp:Label></td>
                            <td align="center" style="width:25%"><asp:Label ID="lbN0Code" runat="server" Text='<%#Eval("Code")%>'></asp:Label></td>
                            <td align="center" style="width:25%"><asp:Label ID="lbN0Secteur" runat="server" Text='<%#Eval("Secteur")%>'></asp:Label></td>
                            <td align="center" style="width:10%"><asp:Label ID="lbN0RCS" runat="server" Text='<%#Eval("ID")%>'></asp:Label></td>
                        </tr>
                        <asp:ListView ID="lvNiv1" runat="server" ItemPlaceholderID="itemPlaceHoder2" OnItemDataBound="lvNiv1_ItemDataBound">
                            <LayoutTemplate>
                                    <tr id="itemPlaceHoder2" runat="server"></tr>
                            </LayoutTemplate>
                            <ItemTemplate>
                                <tr id="myRow2" runat="server">
                                    <td align="center" style="width:25%"><asp:Label ID="lbN1Ctr" runat="server" Text='<%#Eval("Lib")%>'></asp:Label></td>
                                    <td align="center" style="width:25%"><asp:Label ID="lbN1Inge" runat="server" Text='<%#Eval("Inge")%>'></asp:Label></td>
                                    <td align="center" style="width:25%"><asp:Label ID="lbN1Debut" runat="server" Text='<%#Eval("Debut", "{0:dd/MM/yyyy}") %>'></asp:Label></td>
                                    <td align="center" style="width:25%"><asp:Label ID="lbN1Fin" runat="server" Text='<%#Eval("Fin", "{0:dd/MM/yyyy}")%>'></asp:Label> </td>
                                </tr>
                            </ItemTemplate>
                        </asp:ListView>
                    </ItemTemplate>
                </asp:ListView>

Mon but est que lorsque l'utilisateur survole une ligne de la liste, celle-ci se développe (cad la 2eme listview apparait).

En faisant tout avec le code-behind et l'event click sur les lignes, cela fonctionne parfaitement.
Cependant, j'aurai aimer faire ca avec l'event "onmouseover" ( survole de la souris ) mais surtout SANS postback ( j'ai horreur de ca )

Voila comment je fait en code behind :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
protected void lvNiv0_ItemDataBound(object sender, ListViewItemEventArgs e)
        {
            HtmlTableRow tr = (HtmlTableRow)e.Item.FindControl("myRow");
 
            //tr.Attributes["onmouseover"] = "return ShowOrHide(" + e.Item.FindControl("lvNiv1").ClientID + ")";
            tr.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.lvNiv0, e.Item.DataItemIndex.ToString());
 
            Label lb = (Label)tr.FindControl("lbN0RCS");
            short idClt = short.Parse(lb.Text);
 
            ListView mylvN1 = (ListView)e.Item.FindControl("lvNiv1");
 
            MISEntities MIS = new MISEntities();
            var query = from ctr in MIS.Contrat_Client   // remplissage de la 2nd listview 
                        where ctr.ID_Client == idClt     // en fonction de la ligne à laquelle elle est rataché
                        select new { 
                            Lib = ctr.Libelle,
                            Inge = ctr.Inge_Commercial,
                            Debut = ctr.Date_Debut,
                            Fin = ctr.Date_Fin
                        };
 
            mylvN1.DataSource = query;
            mylvN1.DataBind();
        }
 
        protected void lvNiv1_ItemDataBound(object sender, ListViewItemEventArgs e)
        {
            HtmlTableRow tr = (HtmlTableRow)e.Item.FindControl("myRow2");
 
            tr.Attributes.Add("class", "HideThis");
        }
 
        private void lvNiv0Click(string param)   // se declenche lorsque l'on click sur une ligne
        {
            lvNiv0.SelectedIndex = int.Parse(param);
 
            ListViewItem item = lvNiv0.Items[lvNiv0.SelectedIndex];
            ListView lv = (ListView)item.FindControl("lvNiv1");
 
            for (int i = 0; i < lv.Items.Count; i++)
            {
                HtmlTableRow tr = (HtmlTableRow)lv.Items[i].FindControl("myRow2");   //voila ce que je voudrai atteindre en JavaScript
                if (tr.Attributes["class"] == "HideThis")
                {
                    tr.Attributes.Remove("class");
                }
                else
                    tr.Attributes.Add("class", "HideThis");
            }
        }

Mon but est de pouvoir changer la classe des lignes de la 2nd listview (lvNv1) via JavaScript coté client.

Merci.

[Champouil]

Alors je me repond à moi-même pour ceux que ca intéresse.

La solution :

Dans itemDataBound de la premiere listview coté serveur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
int i = lvN1.Items.Count;
            List<string> lstr = new List<string>();
            for (int o = 0; o < i; o++)
            {
                lstr.Add(lvN1.Items[o].FindControl("myRow2").ClientID);  // chope l'ID de toutes les lignes de la 2nd listView
            }
 
            JavaScriptSerializer js = new JavaScriptSerializer(); 
            string str = js.Serialize(lstr); // je les sérializes
 
            tr.Attributes["onmouseover"] = "ShowOrHide("+ i +"," + str + ");"; // j'envoie le tout à ma fonction client

Puis ma fonction coté client :

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
 
function ShowOrHide(cnt,Json) {
 
        var str = Json.toString();
        var tab = new Array();
 
        for (var p = 0; p < cnt; p++) {
            tab[p] = "";
        }
 
        var cpt = 0;  
        for (var i = 0; i < str.length; i++) {   // je colle split ma chaine pour avoir chaque ID dans mon tableau
 
                if (str.charAt(i) == ',') {
                    cpt++;
                }
                else {
                    tab[cpt] = tab[cpt] + str.charAt(i);
                }
        }
 
        for (var o = 0; o < cnt; o++) {  // et je fait apparaitre ou disparaitre mes lignes 
            if (Sys.UI.DomElement.containsCssClass(document.getElementById(tab[o]), 'HideThis')) {
                Sys.UI.DomElement.removeCssClass(document.getElementById(tab[o]), 'HideThis');
            }
            else
            { Sys.UI.DomElement.addCssClass(document.getElementById(tab[o]), 'HideThis'); }
        }
    }

Voila et au final on obtient une double listView dynamique.