CollapsiblePanel et Radio bouton

**Plexi86** · 05/06/2009, 13h06

Bonjour à tous.

Je souhaite lier un radiobuttonlist à un collapsiblePanelExtender de l'AjaxControlToolKit.

En gros suivant le choix que je ferai, je voudrais pouvoir afficher ou pas une zone de ma page. Malheureusement les propriétés de ce contrôle se base sur un ID de contrôle et sur le simple événement click, alors que moi j'ai besoin de différencier la sélection du radiobuttonlist.

J'ai essayé évidemment d'ajouter un ID aux étiquettes des boutons radio mais rien n'y fait, on ne peut mettre que du texte brut entre les balises <listitem></listitem>

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
 
        <div>
            <asp:Panel ID="panelone" runat="server">
                Etat : &nbsp;
 
                <asp:RadioButtonList ID="etat_dmd" runat="server" RepeatDirection="Horizontal" 
                    RepeatLayout="Flow">
                    <asp:ListItem>Inconnu</asp:ListItem>
                    <asp:ListItem>Provisoire</asp:ListItem>
                    <asp:ListItem>Définitf</asp:ListItem>
                </asp:RadioButtonList>                
            </asp:Panel>
        <div>
            <asp:Panel ID="targetpanel" runat="server">
                Montant attribué: <asp:TextBox runat="server" ID="mont_att" />
                <br />
                Commentaire:<br />
                <asp:TextBox ID="comm_aide" runat="server" Width="80%" TextMode="MultiLine" />
            </asp:Panel>
            <ajaxtoolkit:CollapsiblePanelExtender ID="cpe_plus" runat="server" CollapseControlID="etat_dmd"
                ExpandControlID="etat_dmd" TargetControlID="targetpanel" CollapsedSize="0" Collapsed="true" />
        </div>
        </div>

Quelqu'un aurait-il déjà eu à faire un truc du même genre?

Merci pour vos réponses.

**predalpha** · 05/06/2009, 14h02

Bonjour,

tu pourrais peut-être essayer de mettre tes controles dans un update panel et d'attraper l'événement selectindexchanged de ton radio bouton list comme ca tu pourras afficher via code behind ce dont tu as envie.

**Plexi86** · 07/06/2009, 17h30

Merci pour cette réponse Predalpha.

Ce serait tellement plus simple mais j'aimerai exploiter la fluidité de ce contrôle collapsiblePanelExtender. Je ne sais pas si tu vois ce que je veux dire?

Mais vraiment personne n'a une idée qui pourrait m'aider ou qui aurait réussit à le faire?

Cdt.

**Plexi86** · 09/06/2009, 11h47

Bonjour.

J'ai continué mes tests et j'arrive maintenant à faire fonctionner mon code en partie. Je vous indique tout d'abord le code de ma page de test:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="monprojet.test1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
<html xmlns="http://www.w3.org/1999/xhtml" >
 
<head id="Head1" runat="server">
 
    <title>Page de test</title>
    <link rel="STYLESHEET" href="../style/form_outil.css" type="text/css" />
    <link rel="STYLESHEET" href="../style/cae_detdoss.css" type="text/css" />
    <link href="../style/menu_col_droite.css" rel="stylesheet" type="text/css" />  
 
    <style type="text/css">
          .panelClass {background-color: lime; width: 450px; z-index:999}
          .btnradioClass {z-index:0;}
    </style>
 
</head>
 
<body>
 
    <form id="form1" runat="server">
 
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel runat="server" RenderMode="Inline" UpdateMode="Always">
            <ContentTemplate>
                <asp:Panel runat="server" ID="targetpanel" CssClass="panelClass">
 
                    <table id="tabl_radio" runat="server" style="btnradioClass">
                        <tr>
                            <td>Etat demande : &nbsp;</td>
                            <td id="aucun">
                                <asp:RadioButton ID="rb_auc" runat="server" Checked="true" GroupName="etat" 
                                    Text="Aucun" AutoPostBack="True" />
                            </td>
                            <td id="prov">
                                <asp:RadioButton ID="rb_pro" runat="server" GroupName="etat" Text="Provisoire" 
                                    AutoPostBack="True" />
                            </td>
                            <td id="def">
                                <asp:RadioButton ID="rb_def" runat="server" GroupName="etat" Text="Définitif" 
                                    AutoPostBack="True" />
                            </td>
                        </tr>
                    </table>
                <div id="infoa">
                    <div id="infoa_d" style="width:56%">
                        <table width="98%">
                            <tr>
                                <td>Commentaire :</td>
                            </tr>
                            <tr>   
                                <td>
                                    <asp:TextBox ID="comm_aide" runat="server" Width = "98%" TextMode="MultiLine" 
                                        Height="60px" Text='<%# Eval("comm_dmdform") %>' />
                                </td>
                            </tr>
                        </table>
                    </div>    
                    <div id="infoa_g" style="width:40%; padding-top: 2em">
                        <table id="mont_aide" width="100%">
                            <tr>
                                <td class="col_int" style="width:120px">Montant demandé :</td>
                                <td class="col_calc" valign="middle"><asp:TextBox runat="server" ID="mont_dmd" 
                                        MaxLength="6" Width="80px" /></td>
                            </tr>
                            <tr>
                                <td class="col_int" style="width:120px">Montant attribué :</td>
                                <td class="col_calc" valign="middle"><asp:TextBox runat="server" ID="mont_att" 
                                        MaxLength="6" Width="80px" /></td>
                            </tr>
                        </table>
                    </div>
                </div>
                </asp:Panel>
                <ajaxToolkit:AnimationExtender ID="ae_one" runat="server" BehaviorID="animation" 
                    TargetControlID="targetpanel">
                    <Animations>
                        <OnLoad>
                            <Parallel Duration=".5" Fps="24">
                                <Condition ConditionScript="$get('rb_auc').checked">
                                    <StyleAction AnimationTarget="infoa" Attribute="display" Value="none"/>
                                    <Resize Width="450" Height="10" Unit="px" />
                                </Condition>
                                <Condition ConditionScript="$get('rb_pro').checked">
                                    <StyleAction AnimationTarget="infoa" Attribute="display" Value="block"/>
                                    <Resize Width="450" Height="150" Unit="px" />
                                </Condition>
                                <Condition ConditionScript="$get('rb_def').checked">
                                    <StyleAction AnimationTarget="infoa" Attribute="display" Value="block"/>
                                    <Resize Width="450" Height="150" Unit="px" />
                                </Condition>
                            </Parallel>
                        </OnLoad> 
                    </Animations>    
                </ajaxToolkit:AnimationExtender>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Donc avec le code ci-dessus, si l'utilisateur a choisi:
- aucun : les champs de saisis sont cachés et normalement le panel devrait être redimensionné --> ce n'est pas le cas
- provisoire : les champs sont visibles et le panel est redimensionné --> ok
- définitif : de même que pour provisoire et c'est ok

Donc mon problème ce pose pour le choix de "aucun".

Autre chose pour avoir ce fonctionnement j'étais obligé de déclencher un postback pour mes boutons radio, or je voudrai l'éviter?!

Quelqu'un pourrait-il m'éclairer là-dessus?

Merci d'avance.

**Plexi86** · 16/06/2009, 07h28

Bonjour à tous.

J'ai pu résoudre mon soucis grâce à un autre post dont voici le lien.

@ + et merci quand même.

CollapsiblePanel et Radio bouton

ASP.NET

Vue hybride

Discussions similaires

Partager

Partager