Accueil > .Net, ASP.Net, C#, Ext.Net > [Ext.Net] Helper pour la création d’un GridPanel

[Ext.Net] Helper pour la création d’un GridPanel

Bon, finalement, je l’ai dis mais pas fais, parce que j’ai fais le gros glandeur pendant mes vacances… Mais que c’est bon ! Bref

Série de billets sur les helpers que j’ai réalisés autour d’Ext.Net. Le sommaire référençant les helpers est ici : Présentation des helpers.

Dans ma mission, on a des grilles. Un tas de grilles. Énormément de grilles… De quoi donner un peu la nausée, parfois, mais comme c’est le client qui veut !

La problématique était donc la suivante :

  • On a beaucoup de grilles, on doit pouvoir en faire PLEIN de façon simple
  • Les listes contiennent parfois beaucoup d’objets
  • Chaque objet contient des objets, qui contient des obj…
  • Chaque objet peut avoir un bon nombre de propriétés (parfois des agrégations en fonction d’autres propriétés…)

Résultat des courses, je me colle à faire un composant Ext.NET en lecture seule (ça, c’est important). Qui doit gérer pas mal d’objets avec beaucoup de propriétés. Ces deux points sont importants puisque le tout allant être sérialisé, le premier jet à directement fait planter IE parce que la source HTML était trop grosse (bah oui, Ext.NET sérialise tout ou alors que les propriétés simples à la racine de l’objet…).

Je prends donc mon objet :

public class MySampleObject
{
    public String StringProperty { get; set; }
    public DateTime DateProperty { get; set; }
    public Int32 IntProperty { get; set; }
    public Single FloatProperty { get; set; }
    public String DoNotShowProperty { get; set; }
    public Boolean BoolProperty { get; set; }
    public String Currency { get; set; }
    public MySampleObject InnerObject { get; set; }
    public Dictionary<string, Double> Amount { get; set; }
}

Dans ma grille, je dois pouvoir afficher le montant (propriété Amount, de la forme Amout[« USD »] ou Amount[« EUR »]) en fonction de la monnaie (propriété Currency), mais aussi l’afficher que en Euro.
Dans le même temps, je dois pouvoir aller chercher le libellé correspondant à la monnaire (EUR => Euro; USD => Dollar; BOB => Boliviano ;)).
Je dois aussi pouvoir aller chercher un propriété d’un objet enfant, etc.
En gros, plein plein de cas.

Pour ce faire, j’ai choisis une méthode assez simple : je vais utiliser la réflexion pour créer un dictionnaire de données que je vais binder au contrôle.
Plusieurs avantages :

  • Je ne vais mettre que les données dont j’ai besoin dans le dictionnaire, donc la source sera allégée
  • Je peux conditionner des affichages en fonction d’autres données
  • Je peux formatter mes données en .Net et non plus en JS

Alors, comment ça se passe, en pratique ?

Etape 1 : la configuration de la grille
Cette étape est totalement mutualisable dans le cas de plusieurs grilles. Il faudra UNIQUEMENT redéfinir l’ID des grilles.
Exemple :

ExtGridEntity configuration = new ExtGridEntity("MyGridExtPanel", columns)
{
    AutoExpandColumn = 0,
    ColTooltipIsColName = true,
    Height = 400,
    PageSize = 20,
    PagingPosition = PagingPosition.Both,
    Sortable = true,
    Width = 500
};

On peut donc faire une méthode assez basique qui prend en paramètre un string représentant l’ID et qui renvoit un objet ExtGridEntity.

Etape 2 : lister les colonnes
Le nerf du contrôle, si je puis dire.
Là, on va lister toutes les colonnes, dire où sont les données, comment les récupérer, les formatter…

List<ExtGridColumn> columns = new List<ExtGridColumn>()
{
    new ExtGridColumn("One", "Currency"),
    new ExtGridColumn("Two", "IntProperty", DataType.Int),
    new ExtGridColumn("Three", "FloatProperty", DataType.Float),
    new ExtGridColumn("Four", "DateProperty", DataType.Date),
    new ExtGridColumn("Five", "BoolProperty", DataType.Boolean),
    new ExtGridColumn("Six", "InnerObject.StringProperty"),
    new ExtGridColumn("Seven", "InnerObject.InnerObject.StringProperty"),
    new ExtGridColumn("Eight", "Amount", "Currency", false),
    new ExtGridColumn("Nine", "Amount", "USD", true),
    new ExtGridColumn("Ten", "InnerObject.StringProperty", "<a href='Currency.aspx={One}'>Info of currency: {One}</a>"),
    new ExtGridColumn("Eleven", GetCurrencyLabel, false)
};
columns[1].FormatDataMethod = FormatInt32;
columns[3].FormatDataMethod = FormatDateTime;

Avec les différents constructeurs, on peut par exemple faire en sorte que la colonne Eight affiche le montant de la monnaie courante  (propriété Currency) alors que la colonne Nine affiche toujours le montant en USD.
On peut aussi voir de l’injection de HTML pour créer un lien, l’utilisation d’une méthode pour récupérer les données (colonne Eleven) ou encore des méthodes pour formatter les données (en dehors de la construction de la liste).

Etape 3 : afficher le composant

ExtGridView<MySampleObject> gridPanel = new ExtGridView<MySampleObject>();
gridPanel.SetDataAndConfiguration(configuration, data, GridContainer);

L’objet configuration est celui de l’étape 1. L’objet data est une simple collection (IList<>) contenant les données. Enfin, GridContainer est simplement la div (runat= »server ») dans laquelle insérer la grille.
Le tout est à placer dans un évènement du type Page_Load ou autre et…le tour est joué !

On obtient donc une grille avec toutes nos données, bien formattée et tout !

Catégories :.Net, ASP.Net, C#, Ext.Net
  1. Aucun commentaire pour l’instant.
  1. 18/10/2011 à 20:04

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :