Créer des listes déroulantes hiérarchiques dans l’interface utilisateur de Kendo pour Angular

Lorsque vous avez beaucoup à afficher dans une liste déroulante, vous avez besoin de l’arborescence déroulante Kendo UI pour Angular pour organiser vos données. En plus de vous permettre d’obtenir l’interface utilisateur que vous souhaitez, il gère une variété de structures de données complexes.

L’intérêt d’utiliser des listes déroulantes dans votre interface utilisateur est évident : elles empêchent l’utilisateur de saisir des données non valides. Au lieu d’entrer des données, l’utilisateur sélectionne dans une liste d’options valides (ce qui, bien sûr, n’empêche pas l’utilisateur de choisir le mauvais option – mais cela garantit que la sélection de l’utilisateur est, au moins, valide).

Du point de vue de la productivité, cependant, les listes déroulantes ne sont utiles que si elles permettent à l’utilisateur de sélectionner rapidement une option. Évidemment, à mesure que les listes s’allongent, trouver des options prend de plus en plus de temps.

Les listes déroulantes consultables (c’est-à-dire les listes déroulantes) sont utiles ici, mais uniquement, bien sûr, si l’utilisateur sait comment épeler correctement l’option. Les utilisateurs peuvent, par exemple, ne pas trouver l’élément « taxi » dans une liste s’ils recherchent l’élément « cab ». Nous permettons à nouveau à l’utilisateur de saisir des données non valides.

La listes déroulantes disponible avec Interface utilisateur de Kendo pour Angular apportez une solution à cela en vous permettant de regrouper les options de la liste sous des rubriques… le seul problème étant, bien sûr, que puisque toutes les rubriques et tous les éléments sont toujours affichés, la liste déroulante s’allonge en fait.

DropDownTree et MultiSelectTree offrent une autre façon de gérer les listes en organisant les listes dans une arborescence hiérarchique – les utilisateurs peuvent ouvrir ou fermer le nœud de l’arborescence dont ils ont besoin et parcourir une courte liste d’options sous ce nœud pour trouver l’option qu’ils veulent. La seule différence entre les deux listes déroulantes est que DropDownArbre permet à l’utilisateur de sélectionner un seul élément :

La MultiSelectTreed’autre part, permet à l’utilisateur de sélectionner plusieurs éléments :

Structurer vos données

Le facteur critique de succès dans la génération d’une arborescence est de structurer les données afin que les listes déroulantes puissent opérer leur magie. Heureusement, ces listes déroulantes prennent en charge le travail avec des données dans deux formats différents.

Données plates

La solution la plus simple consiste à disposer d’un tableau d’objets qui se réfèrent les uns aux autres. Les exemples classiques sont un organigramme ou une nomenclature (BOM).

En règle générale, vous obtiendrez ces données sous la forme d’un tableau unique, chaque entrée du tableau ayant une référence à son entrée parent. La première étape consiste à définir la classe qui contiendra chaque élément de la liste. Cette classe d’employés donne à chaque employé un id terrain, un empName champ, et un mgr champ (le mgr champ contient le id de l’employé dont cet employé relève — l’enregistrement parent) :

export class Employee {
  constructor(
    public id: number,
    public empName: string,
    public mgr: number | null
  ) { }
}

Votre prochaine étape consiste à charger un tableau avec les données que vous avez l’intention d’afficher dans votre liste. Pour cet exemple, les entrées du tableau sont codées en dur et chargées dans une propriété du composant :

public orgChart: Employee[] = [
    new Employee( 2, "Nancy Davolio", 1),
    new Employee( 1, "Andrew Fuller", null),
    new Employee( 5, "Michael Suyama", 4),
    new Employee( 4, "Laura Callahan",  1),
    new Employee( 6, "Robert King",  4),
    new Employee( 3, "Steven Buchanan", 1),
  ];

Comme vous pouvez le voir, le chef de l’entreprise, Andrew Fuller, ne relève de personne (c’est pourquoi le mgr champ de la classe Employé doit accepter une valeur nulle). Deux autres employés, Michael Suyama et Robert King, relèvent de Laura Callahan.

La dernière étape consiste à ajouter le kendo-dropdowntree à votre composant. Il existe un certain nombre de directives et de propriétés que vous devez définir dans la liste déroulante :

• kendoDropDownTreeFlatBinding: Cela pointe vers le tableau (orgChartdans cet exemple) qui contient les objets de liste et, pour cette structure de données, spécifie que vous utilisez des objets de style organisation/BOM (liaison « plate »).
• parentIdField: Le nom du champ dans l’objet utilisé pour rechercher l’enregistrement parent (dans ce cas, le mgr champ).
• valueField: Le nom du champ dans l’objet que le parentIdField doit chercher pour trouver le parent (dans ce cas, le mgr le champ détient le travail d’un autre employé id champ).
• textField: Le nom du champ à afficher dans la liste (dans ce cas, le empName champ).
• kendoDropDownTreeExpandable: Si vous omettez ceci, l’arborescence est affichée avec tous ses nœuds développés et l’utilisateur ne peut ouvrir ou fermer aucun nœud.

<kendo-dropdowntree
           [kendoDropDownTreeFlatBinding]="orgChart"
           parentIdField="mgr"
           valueField="id"
           textField="empName"
           kendoDropDownTreeExpandable
           class="employee">
</kendo-dropdowntree>

Le résultat ressemble à un DropDownTree (et à peu près le même dans un MultiSelectTree).

Comme vous pouvez le constater, même si les éléments du tableau n’étaient pas dans le bon ordre, tous les employés sont correctement imbriqués dans la liste déroulante.

Enfants imbriqués

Un autre scénario courant est que chaque objet parent ait un tableau d’éléments enfants. Cette Department classe, par exemple, a un employees champ contenant un tableau de employee objets:

export class Department {
  constructor(
    public id: string,
    public deptName: string,
    public employees: Employee[]
  ) { }
}

Autrement dit, chaque Department objet est le parent dans une hiérarchie à deux niveaux avec Employee enfants.

Chargement d’un Departments propriété sur le composant qui contient un tableau de ces Department objets avec leur enfant Employee les objets peuvent ressembler à ceci :

public Departments: Department[] = [

    new Department( "Mkt", "Marketing",
              [new Employee( 5, "Michael Suyama", 4),
              new Employee( 4, "Laura Callahan", 1),
              new Employee( 6, "Robert King", 4)]
    ),

    new Department( "Exec", "Executive",
          [new Employee( 1, "Andrew Fuller", null)]),     
          
    new Department( "Acct", "Accounting",
          [new Employee( 2, "Nancy Davolio", 1),
          new Employee( 3, "Steven Buchanan", 1)]
    ),
];

Il ne reste plus qu’à ajouter la liste déroulante pour afficher ces objets. Seuls ces trois changements sont nécessaires pour gérer cette structure de données, par rapport à l’organigramme/nomenclature :

• kendoDropDownTreeHierarchyBinding: pointe vers le tableau contenant les données et spécifie qu’il existe une propriété contenant les objets enfants.
• childrenField: Le nom du champ contenant les objets imbriqués.
• textField: Un tableau contenant le nom des champs à afficher pour chaque niveau de la hiérarchie (par exemple, « deptName » pour l’objet parent Department, « empName » pour l’objet enfant Employee).

Vous avez encore besoin d’un valueField et le kendoDropDownTreeExpandable directif.

<kendo-dropdowntree          
          [kendoDropDownTreeHierarchyBinding]="Departments"
          childrenField="employees"
          [textField]="['deptName','empName’]"
          valueField="id"
          kendoDropDownTreeExpandable>
    </kendo-dropdowntree>

La liste déroulante résultante ressemblerait à ceci :

La configuration de MultiSelectTree est identique à celle de DropDownTree, la différence étant que l’utilisateur peut sélectionner plusieurs éléments. Voici l’exemple précédent utilisant le MultiSelectTree :

<kendo-multiselecttree          
          [kendoDropDownTreeHierarchyBinding]="Departments"
          childrenField="employees"
          [textField]="['deptName','empName’]"
          valueField="id"
          kendoDropDownTreeExpandable>
</kendo-multiselecttree>

Plus de fonctionnalités

Il y a plus de fonctionnalités sur ces commandes. Vous pouvez, par exemple, vous assurer que vous pouvez recréer la dernière configuration (c’est-à-dire que lorsque l’utilisateur ferme la liste et la rouvre, vous pouvez développer tous les nœuds qui ont été développés quand la liste a été fermée). Si vous préférez récupérer les objets enfants au fur et à mesure de vos besoins, vous pouvez tirer parti de la propriétés fetchChildren et hasChildren pour câbler une fonction de récupération.

De plus, ces listes déroulantes partagent des fonctionnalités avec le Interface utilisateur de Kendo pour les listes déroulantes angulaires: vous pouvez styliser ces listes déroulantes, fournir des modèles pour contrôler l’affichage des parties des composants, lier les valeurs récupérées avec des modèles de formulaire (ngModel) ou des formulaires réactifs (FormGroup), définir une valeur par défaut ou ajouter un élément par défaut, entre autres Caractéristiques.

Et tout cela vaut la peine d’être fait. Mais vous avez déjà abordé le problème clé : le chargement de vos données.