Asp.net Gridview Infragistics Ultrawebgrid

Comment afficher des lignes dans plusieurs colonnes dans ASP.NET GridView

Afficher des données efficacement est essentiel dans toute application web, et ASP.NET fournit une variété d’outils pour y parvenir. La fonctionnalité par défaut du contrôle ASP.NET GridView affiche chaque ligne d’un ensemble de données verticalement, ce qui peut parfois mener à un espace perdu sur la page. Dans les scénarios où vous souhaitez afficher des lignes dans plusieurs colonnes au lieu d’une seule colonne, vous vous demandez peut-être comment y parvenir.

Le défi

Imaginez que vous ayez un ensemble de données avec plusieurs lignes - disons, 10 lignes. Si vous n’utilisez qu’un GridView standard, celles-ci s’afficheront les unes après les autres, verticalement dans la page. Cependant, les afficher dans plusieurs colonnes peut améliorer l’expérience utilisateur et rendre vos données visuellement attrayantes. Par exemple, si vous souhaitez afficher 5 lignes en 2 colonnes côte à côte, le problème que vous rencontrez est clair : comment pouvez-vous faire cela avec le contrôle GridView par défaut dans ASP.NET ?

La solution

Bien que le GridView d’ASP.NET ne soit pas intrinsèquement conçu pour ce format, il existe des alternatives efficaces que vous pouvez utiliser. Voici deux contrôles recommandés qui vous permettent d’obtenir une présentation en multi-colonnes de vos données.

1. Utilisation du contrôle DataList

Une solution facile pour afficher des lignes dans plusieurs colonnes est d’utiliser le contrôle DataList. Le contrôle DataList possède une propriété spécifique qui peut aider à obtenir une mise en page en multi-colonnes :

  • RepeatColumns Propriété : Cette propriété vous permet de spécifier le nombre de colonnes dans lesquelles les éléments seront affichés.

Pour mettre cela en œuvre, vous pouvez suivre ces étapes :

  • Définissez le DataList dans votre page ASP.NET.
  • Définissez la propriété RepeatColumns sur le nombre de colonnes désiré (ex. : 2).
  • Lier le DataList à votre source de données.

Voici un exemple simple :

<DataList ID="myDataList" runat="server" RepeatColumns="2">
    <ItemTemplate>
        <%# Eval("YourDataField") %>
    </ItemTemplate>
</DataList>

2. Exploitation du contrôle ListView

Pour ceux qui utilisent le .NET Framework 3.5 et ultérieur, le contrôle ListView est une excellente alternative avec encore plus de flexibilité. Ce contrôle peut gérer le binding de données avec plus de personnalisabilité que le DataList.

Avantages de ListView :

  • Fonctionnalités de template : Permet des modèles d’éléments et des mises en page plus complexes.
  • Binding de données : Facilite le binding aux listes, ce qui rend simple la personnalisation de l’affichage.

Vous pouvez en apprendre davantage sur la façon d’implémenter le contrôle ListView et ses capacités ici.

Étapes de mise en œuvre pour ListView

  1. Définissez un contrôle ListView dans votre page ASP.NET.
  2. Utilisez un modèle d’élément pour formater l’affichage pour chaque élément.
  3. Liez votre source de données au ListView.

Exemple de code :

<ListView ID="myListView" runat="server">
    <ItemTemplate>
        <%# Eval("YourDataField") %>
    </ItemTemplate>
</ListView>

Conclusion

Transformer des lignes d’un GridView ASP.NET en un format visuellement attrayant en multi-colonnes n’est pas seulement possible, mais cela peut être réalisé de manière simple en utilisant des contrôles comme DataList et ListView. En suivant les conseils ci-dessus, vous pouvez améliorer la présentation de vos données, optimiser l’espace sur la page et améliorer l’engagement des utilisateurs.

Que vous choisissiez d’utiliser le DataList pour sa simplicité ou le ListView pour ses fonctionnalités avancées, les deux options offrent de bonnes solutions au problème d’affichage efficace des données dans plusieurs colonnes.