ASP.NET DataList - la définition de “colonnes/lignes” lors de la répétition horizontale et l'utilisation de la disposition de flux

Voici mon DataList:

<asp:DataList id="DataList" Visible="false" RepeatDirection="Horizontal" Width="100%" HorizontalAlign="Justify" RepeatLayout="Flow" runat="server">
        [Contents Removed]
</asp:DataList>

Cela génère le balisage qui a chaque élément enveloppé dans un span. À partir de là, je voudrais briser chacune de ces travées en rangées de trois colonnes. Idéalement, je voudrais quelque chose comme ceci:

<div>
 <span>Item 1</span>
 <span>Item 2</span>
 <span>Item 3</span>
</div>
<div>
 <span>Item 4</span>
 <span>Item 5</span>
 <span>Item 6</span>
</div>
[etc]

Le plus proche que je peux obtenir cela est de définir RepeatColumns à "3" et puis un <br> est inséré, après tous les trois éléments dans la DataList.

 <span>Item 1</span>
 <span>Item 2</span>
 <span>Item 3</span>
<br>
 <span>Item 4</span>
 <span>Item 5</span>
 <span>Item 6</span>
<br>

Cela me met genre de près, mais vraiment ne fait pas l'affaire - je ne peux pas encore le contrôle de la mise en page, je voudrais être en mesure de.

Quelqu'un peut-il suggérer un moyen de faire mieux? Si je pouvais mettre en œuvre l'exemple ci-dessus - qui serait parfait, mais je serais accepter une moins élégant solution ainsi - aussi longtemps que son plus flexible que <br> (telles que l'insertion d'un <span class="clear"></span> au lieu de <br>).

InformationsquelleAutor Ian Robinson | 2009-01-16
  1. 3

    Si vous avez vraiment besoin d'utiliser un datalist pour une raison quelconque, au lieu de la mise en œuvre de la présente comme un répéteur, vous pouvez essayer de faire quelque chose comme ceci:

    <asp:DataList ID="dataList" runat="server" RepeatDirection="Horizontal" Width="100%" HorizontalAlign="Justify" RepeatLayout="Flow" OnItemDataBound="dataList_ItemDataBound">
    <HeaderTemplate>
        <div>
    </HeaderTemplate>
    <SeparatorTemplate>
        </div><div>
    </SeparatorTemplate>
    <ItemTemplate>
        <%# Container.DataItem %></ItemTemplate>
    <FooterTemplate>
        </div></FooterTemplate>
</asp:DataList>
    protected void dataList_ItemDataBound(object sender, DataListItemEventArgs e) {
    if (e.Item.ItemType == ListItemType.Separator) {
        if ((e.Item.ItemIndex + 1) % 3 != 0) {
            e.Item.Controls.Clear();
        }
    }
}
    • Merci David. Cette solution fonctionne, mais que dire de la répétition qui rend ce beaucoup plus facile à mettre en œuvre? Merci encore.
    • Vous fait l'utilisation exacte de certains approche, mais avec un Répéteur. Le DataList a que les coûts pour faire des choses comme le rendu de contenu dans les tables, où l'on essaie d'usurper. Aussi il est dérivé d'un WebControl alors que le Répéteur est dérivé de Contrôle.
    • Merci David, j'ai mis en place ce que ma solution (l'utilisation d'un répéteur). J'apprécie l'aide.
    InformationsquelleAutor DavGarcia
  2. 1

    J'ai peut-être confondu, mais pourquoi ne pas simplement utiliser un répéteur et un élément personnalisé de modèle?

    • Peut-être que j'ai été regarder sur mon ordinateur trop longtemps aujourd'hui (eh bien, je sais que j'ai...) mais je ne vois aucune solution facile avec un répéteur soit, j'aimerais avoir un exemple de ce que bien. Je crois qu'il serait raisonnable pour moi de remplacer le DataList avec un Répéteur.
    InformationsquelleAutor Mike Robinson
  3. 1

    Vous pouvez réaliser votre mise en page souhaitée à l'aide de CSS sans altérer l'original généré le balisage. Depuis span tags sont affichés en ligne par défaut, la commutation de l'inline-block et en spécifiant une largeur de 33% sur ces travées devrait faire l'affaire.

    Ou, plus précisément, de définir la CssClass propriété de votre contrôle DataList à une valeur telle que "threecolumns".

    Définir le style css suivante:

    <style type="text/css">
.threecolumns span 
{
    display: inline-block;
    width: 33%;
}
</style>

    VS2008 peut vous dire que inline-block n'est pas un paramètre valide pour la propriété d'affichage. Je ne serais pas s'inquiéter trop car presque tous les navigateur prend en charge.

    InformationsquelleAutor Ken Browning
  4. 0

    ajouter cette RepeatColumns="100000"

    InformationsquelleAutor ivica