Dropdownlist multi-sélectionnable

Bonjour tt le monde,

J'aimerais disposer d'une dropdownlist multi-sélectionnable. On pourrait donc sélectionner plusieurs items dans cette dropdown. Il semblerait que ce contrôle n'offre pas cette possibilité. J'ai alors pensé à faire une listbox mais, pour des raisons d'affichage, cette liste doit se résumer à une ligne (comme le look d'une dropdown). Ce qui, au final, n'est pas très pratique (et pas franchement esthétique).

Donc, si qqun connait un contrôle de substitution que je ne connaitrais pas ou qui aurait développé son propre contrôle répondant à mes critères (et qui soit surtout facilement implémentable car le temps joue contre moi...) je serais preneur !

Merci d'avance

Malheureusement ce n'est pas possible en HTML de faire ce que tu veux, donc il faut passer par du javascript.

Mon idée sur la question :) est d'utiliser le composant CheckBoxList (je me rappelle plus du nom, ni meme de son existence en .net 1). puis de faire un peu de js & co pour avoir ce que tu veux.

Donc créer un nouveau UserControl (c'est ce qu'il y a de plus simple) puis tu met dedans le code suivant.

<div>
<a href="javascript:void(0)" onclick="javascript:afficher()" id="titre" runat="server" />
<div id="list" style="display:none">
<asp:CheckBoxList blablabla />
</div>
</div>

puis du js

function afficher()
{
   document.getElementById("list").style.display = "block";
}

puis dans le code behind de cet UC, tu mets quelques properties interressante qui te renvoie titre.text etc.. pour que tu puisses l'avoir ou tu veux :-)

Le code javascript & co, c'est un peu "au pif" il faudra bien sur l'améliorer, va donc voir sur javascriptfr.com

Le mieux serait bien sur d'utiliser les controles Composites : [ Lien ]

---

Cyril - MCP ASP.net
Webmaster de : Hoshimi.CodeS-SourceS.fr

jesusonline --> CheckBoxList existe bien en .net 1 (et oui le .net 1 existe encore...)

Sinon si tu veux te lancer dans les contrôles composites vas-y, mais c'est se compliquer la vie pour pas grand chose.

avec une CheckBoxList ou une ListBox ça devrait suffire... (les deux permettent une selection multiple)


Nurgle
C'est une grande folie que de vouloir être sage tout seul !

et j'ai faillit oublier une grosse dose de bidouillage en javascript (le plus dure en somme)
--> javascriptfr

où voir même l'ajax (voir la superbe source de jesusonline) pour recharger uniquement le composant, enregistrer sur le serveur ce qu'il a choisit puis le laisser choisir autre chose s'il a envi !

Nurgle
C'est une grande folie que de vouloir être sage tout seul !

Les controles composites c'est bien non ? et puis c'est tellement simple d'emploi ;-)

Je suis d'accord avec Nurgle, que ma solution est peut etre un peu excessive, mais au moins si tu as deux endroits à faire ceci, ben tu te refarciras pas l'implementation deux fois :p

En tout cas ca m'a peut etre donnée une idée, ce soir avant de m'endormir, un petit controle Composite en .net 2 pour faire suite aux splendides articles de TKfé : http://blogs.developpeur.org/tkfe/archive/2005/05/25/6952.aspx

Pour la solution du clientCallBack et de ma "super source" pour l'utiliser il faut etre en .net 2 et non avec ce vieil ;) asp.net 1.1 donc dans un projet classique (autre que notre folie sur CS) il vaut mieux attendre une version finale, pour l'instant ca va bien pour s'entrainer, pour apprendre etc...

---

Cyril - MCP ASP.net
Webmaster de : Hoshimi.CodeS-SourceS.fr

Merci à vous deux pour vos explications mais malheureusement ça ne m'aide pas.

Les contrôles composites me plaisaient bien mais cela prend du temps qui comme je l'ai déjà dit me manque cruellement .

Je vais me faire haïr par la communauté des défenseurs du Javascript mais moi le Javascript c'est pas ma tasse de thé .

Merci encore.

Ben la t'as pas bien le choix :-/

Tu peux pas faire ce que tu veux en HTML pure, donc il faut obligatoirement passer par javascript + CSS ...

j'ai pas eu le temps hier soir d'y regarder :( mais je vais quand meme essayer de faire un truc rapide aujourdhui, si bien sur ca t'interesse ;)

---

Cyril - MCP ASP.net
Webmaster de : Hoshimi.CodeS-SourceS.fr

Bien sûr que ça m'intéresse tjs.

Merci bcp pour l'attention que tu porte à mon problème.

Je viens d'avoir une vingtaine de minute :)

Donc voici ce que j'ai fait.

Bien sur c'est pas joli etc... reste une grande partie de présentation & co, mais bon le principal y est :)

Imports System.ComponentModel
Imports System.Web.UI

<ToolboxData("<{0}:MultiDrop runat=""server""></{0}:MultiDrop>")> Public Class MultiDrop
    Inherits System.Web.UI.WebControls.ListBox

    Private _Title As String
    <Bindable(True), Description("Text pour du lien pour afficher le truc")> _
    Public Property Title() As String
        Get
            Return _Title
        End Get
        Set(ByVal value As String)
            _Title = value
        End Set
    End Property
    Protected Overrides Sub AddAttributesToRender(ByVal writer As System.Web.UI.HtmlTextWriter)
        MyBase.Attributes.Add("style", "display:none;")
        MyBase.AddAttributesToRender(writer)
    End Sub
    Protected Overrides Sub Render(ByVal output As System.Web.UI.HtmlTextWriter)
        output.Write("<div>")
        output.Write("<a href=""javascript:void(0)"" onclick=""javascript:Show('" & Me.ClientID & "')"">" & _Title & " </a>")
        MyBase.Render(output)
        output.Write("</div>")
    End Sub

    Private Sub MultiDrop_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Me.Page.IsClientScriptBlockRegistered("MultiDrop") Then
            Dim script As String = "<script type=""text/javascript""> " & vbNewLine & _
                                    " function Show(id) " & vbNewLine & _
                                    "{" & vbNewLine & _
                                    "   var elmt=document.getElementById(id);" & vbNewLine & _
                                    "   if (elmt.style.display == 'block')" & vbNewLine & _
                                    "   {" & vbNewLine & _
                                    "       elmt.style.display= 'none';" & vbNewLine & _
                                    "   }" & vbNewLine & _
                                    "   else" & vbNewLine & _
                                    "   {" & vbNewLine & _
                                    "       elmt.style.display= 'block';" & vbNewLine & _
                                    "   }" & vbNewLine & _
                                    "}" & vbNewLine & _
                                    "</script>"
            Me.Page.RegisterClientScriptBlock("MultiDrop", script)
        End If
    End Sub
End Class

J'ai pas utilisé de techniques de .net 2 donc j'ai ecrit le fichier js "à l'ancienne" et non dans une webressource :) si j'ai le temps, je pousserais un peu plus loin le rendu du controle, mais je pense que ca pourrait bien te depanner ;-)

---

Cyril - MCP ASP.net
Webmaster de : Hoshimi.CodeS-SourceS.fr

Avec un rendu un peu plus correct voila ce que ca donne

Le code CSS utilisé :

.MultiDrop a {
color:Black;
text-decoration: none;
background-color:#FAFAFA;
padding:0px 15px 0px 5px;
background-position:center right;
background-repeat:no-repeat;
background-image: url(/Cyril/images/expand-closed.gif);
}

le code du controle :

Imports System.ComponentModel

Imports System.Web.UI

<ToolboxData("<{0}:MultiDrop runat=""server""></{0}:MultiDrop>")> Public Class MultiDrop

Inherits System.Web.UI.WebControls.ListBox

Private _Title As String

<Bindable(True), Description("Text pour du lien pour afficher le truc")> _

Public Property Title() As String

Get

Return _Title

End Get

Set(ByVal value As String)

_Title = value

End Set

End Property

Protected Overrides Sub AddAttributesToRender(ByVal writer As System.Web.UI.HtmlTextWriter)

MyBase.Attributes.Add("style", "display:none;position:relative;")

MyBase.AddAttributesToRender(writer)

End Sub

Protected Overrides Sub Render(ByVal output As System.Web.UI.HtmlTextWriter)

output.Write("<span style=""position:absolute"" class=""MultiDrop"">")

output.Write("<a href=""javascript:void(0)"" onclick=""javascript:Show('" & Me.ClientID & "',this)"">" & _Title & " </a>")

MyBase.Render(output)

output.Write("</span>")

End Sub

Private Sub MultiDrop_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Me.Page.IsClientScriptBlockRegistered("MultiDrop") Then

Dim script As String = "<script type=""text/javascript""> " & vbNewLine & _

" function Show(id, lien){" & vbNarrow & _

" var elmt=document.getElementById(id);" & vbNewLine & _

" if (elmt.style.display == 'block'){elmt.style.display = 'none';lien.style.backgroundImage = 'url(/Cyril/images/expand-closed.gif)';}" & vbNewLine & _

" else{elmt.style.display = 'block';lien.style.backgroundImage = 'url(/Cyril/images/expand-open.gif)';}" & vbNewLine & _

" }" & vbNewLine & _

"</script>"

Me.Page.RegisterClientScriptBlock("MultiDrop", script)

End If

End Sub

End Class

Et pour info le code aspx qui n'est ni plus ni moins que celui d'une listBox

Veuillez selectionner une ville :
<cc1:MultiDrop ID="MultiDrop1" runat="server" SelectionMode="Multiple" title="Ville">
   <asp:ListItem>Lyon</asp:ListItem>
   <asp:ListItem>Paris</asp:ListItem>
   <asp:ListItem>Lille</asp:ListItem>
   <asp:ListItem>Marseille</asp:ListItem>
</cc1:MultiDrop>

J'espere qu'avec tout ca, ton problème sera résolu ;-) Au début, je voulais pas partir sur la base d'une listbox, car on peut pas customisé avec css l'interieur d'une listebox, mais c'est tellement plus simple :-)

---

Cyril - MCP ASP.net
Webmaster de : Hoshimi.CodeS-SourceS.fr