Apprendre à connaître le nouveau composant DropDownTree de l'interface utilisateur de Kendo

Le composant DropDownTree UI est un nouvel ajout à l'interface utilisateur de Kendo qui vous permet d'afficher facilement les données hiérarchiques rendues en tant que structure arborescente dans un élément déroulant. Lisez la suite pour apprendre comment vous pouvez l'utiliser dans vos applications.

Une de mes choses préférées qui sort de la version R2 2018 de Kendo UI pour jQuery est
le nouveau composant DropDownTree . Ce composant a été l'élément de rétroaction le mieux voté
le portail de feedback de l'UI Kendo et moi-même avons été séduits pour voir ce widget faire partie de la sortie. Beaucoup d'entre vous ont déjà commencé à utiliser le composant, mais je voulais prendre le temps de passer en revue une petite introduction du composant, ainsi que quelques-unes des fonctionnalités principales, pour les personnes qui n'ont pas encore eu l'occasion d'ajouter ce composant. leurs applications!

Ce blog traite spécifiquement de l'édition jQuery du DropDownTree. Si vous cherchez à utiliser ce composant avec HTML ou Tag Helpers dans ASP.NET MVC ou ASP.NET Core, je recommande de lire ce blog par Ed Charbeneau.

Démarrer avec le DropDownTree

Tout d'abord, à quoi sert DropDownTree? Eh bien, en tant que quelqu'un qui passe beaucoup de temps à brancher des données dans des formulaires, je pense que parfois rien ne vaut un composant déroulant. C'est une expérience utilisateur assez propre car elle prend si peu d'espace, mais une fois que vous entrez ou cliquez sur le composant, les données trouvées dans le composant peuvent être une énorme liste d'éléments. Dans certains cas, nous voulons que la liste représente nos données sous-jacentes, qui pourraient être sous forme hiérarchique. Quel est un bon moyen d'afficher des données hiérarchiques? Vous avez deviné juste: un
TreeView .

C'est là que le DropDownTree arrive pour jouer.
Données hiérarchiques représentées sous la forme d'une structure arborescente dans une liste déroulante.

Cela étant dit, voyons comment nous pouvons mettre en œuvre ce composant.

Pour commencer, nous travaillons presque toujours avec un élément d'entrée lorsque nous cherchons à entrer des données dans nos formulaires, même Avec des dropdowns, alors créons-en un pour notre DropDownTree

Maintenant, comme nous traitons avec jQuery, nous pouvons instancier notre composant UI Kendo comme nous le ferions avec n'importe quel autre widget UI Kendo.

 $ (document) .ready (
  fonction () {
    $ ("# dropdowntree"). kendoDropDownTree ();
  }

Nous n'allons arriver nulle part sans données et pour cet exemple nous allons simplement coder en dur les éléments que nous voulons pouvoir sélectionner.

 $ (document) .ready (function () {
  $ ("# dropdowntree"). kendoDropDownTree ({
    Source: [
      {
        text: "DC",
        expanded: true,
        items: [
          { text: "Batman" },
          { text: "Wonder Woman" },
          { text: "Hawkgirl" }
        ]
      },
      {
        texte: "Marvel",
        articles: [
          { text: "Deadpool" },
          { text: "Silver Surfer" },
          { text: "Black Panther" }
        ]
      }
    ]
  });
}); 

Notez la propriété étendue : true sur le nœud "DC". Cela permet à un nœud d'être automatiquement étendu à chaque ouverture de la liste déroulante. Ceci est mis à false par défaut.

Il y a quelques autres options de configuration que nous pouvons définir pour rendre ce composant un peu plus facile à interagir et un peu plus convivial, en particulier la hauteur hauteur du TreeView interne), autoClose (nous permet d'empêcher la fermeture de la liste déroulante lorsqu'elle est sélectionnée) et espace réservé (texte à afficher quand un élément n'a pas été sélectionné) options. Je vais juste jeter le morceau entier de code avec ces propriétés ici:

Résultat: DropDownTree:

Travailler avec des données distantes

L'exemple que nous venons de parcourir nous donne une bonne idée de la façon de démarrer avec DropDownTree, mais qu'en est-il de plus vrai? scénarios? Par exemple, que se passe-t-il si nous souhaitons nous lier à une API REST quelque part plutôt que de traiter des données locales? Eh bien, si vous avez remarqué ci-dessus nous avons l'option de configuration DataSource intégrée au composant et cela signifie que nous pouvons facilement travailler avec une interface utilisateur de Kendo HierarchicalDataSource (après tout, ce sont des données hiérarchiques)

Dans la documentation et les démos de Kendo UI, nous avons quelques exemples de points de terminaison que nous pouvons utiliser, mais dans ce cas précis j'utilise une URL que nous utilisons presque toujours pour des données homogènes, à savoir cette URL: https : //demos.telerik.com/kendo-ui/service/Employees .

Si nous branchons ceci à notre navigateur ou à Postman, nous voyons que la réponse que nous obtenons au niveau initial est la suivante: [19659010] callback ([{ « EmployeeId » :2, « FullName » : « Andrew Fuller » , « HasEmployees » : true , « ReportsTo » : null }])

Cela signifie que nous avons un seul élément au niveau racine, et que nous devrions probablement faire attention au champ HasEmployees pour voir si un élément doit être extensible ou non. 19659006] Donc, pour nous connecter à cela, nous devons d'abord créer notre source de données. Comme nous faisons cela, nous devons également faire deux choses:

1. Définir un modèle côté client de la source de données qui définit un champ d'identification unique
2. Définir le champ qui indique si l'élément a des enfants ou non plus profond pour plus de données)

Dans cet esprit nous arrivons avec le code suivant:

 var sampleData = new kendo.data.HierarchicalDataSource ({
  transport: {
    lis: {
      url: "https://demos.telerik.com/kendo-ui/service/Employees",
      dataType: "jsonp"
    }
  },
  schéma: {
    modèle: {
      id: "EmployeeId",
      hasChildren: "HasEmployés"
    }
  }
}); 

Maintenant, la configuration de DropDownTree pour utiliser cette instance HierarchicalDataSource est assez facile. Prenant de notre exemple précédent, nous venons de définir le DataSource à utiliser
sampleData et ensuite nous avons mis le
option de configuration dataTextField pour indiquer quel champ est responsable de l'affichage du texte.

 $ ("# dropdowntree"). KendoDropDownTree ({
  espace réservé: "Sélectionner ...",
  hauteur: "auto",
  autoClose: false,
  dataSource: sampleData,
  dataTextField: "FullName"
}); 

C'est tout ce qu'il y a à faire! Voici un aperçu de ce à quoi ressemble le résultat final.

Fonctions pratiques

Au-delà de la simple liaison aux données (locales ou distantes), il y a une tonne de fonctionnalités amusantes disponibles dès la sortie de la boîte. Voici quelques-uns de mes favoris qui sont extrêmement utiles et peuvent être activés avec seulement quelques options de configuration.

Cases à cocher

Tout le monde aime les cases à cocher! Auparavant, nous venions de traiter la sélection unique, mais si nous voulons permettre à nos utilisateurs de sélectionner facilement plusieurs éléments, nous pouvons le faire avec des cases à cocher simples.

En prenant l'exemple des super héros, nous pouvons simplement modifier le code. options de configuration: cases à cocher et
checkAll . La première option est assez explicite, tandis que la deuxième option nous donne un item "Check All"

C'est comme ça que ça finit par regarder. Notez les jetons que nous créons lorsque nous sélectionnons des éléments qui peuvent être facilement supprimés de l'entrée elle-même au lieu de désélectionner un élément après l'ouverture du composant.

Filtrage côté client

Si nous traitons beaucoup de données, il est pratique de filtrer le nombre total d'éléments que nous affichons. C'est pourquoi nous avons mis en œuvre
option de configuration de filtre . Il s'agit d'une seule option de configuration qui peut être définie sur "startswith", "endswith" ou "contains" pour modifier la façon dont le filtrage est effectué. Voici notre super héros DropDownTree avec un ensemble de filtres "startswith".

Modèles

Le dernier filtre net que je veux mettre en évidence est la possibilité de définir un modèle dans le DropDownTree. Ceci utilise le framework de template UI Kendo pour définir un filtre externe en utilisant HTML et ensuite l'utiliser pour définir à quel point chaque élément doit regarder au-delà d'un simple nœud avec du texte ou une case à cocher.

être accompli avec des modèles.

Cette image a été prise de
notre démo de modèle en ligne qui montre le code source complet pour implémenter quelque chose comme ceci.

Allez-y et Dropdown

Là vous allez les gens – une introduction avec mes parties préférées du DropDownTree! J'espère que vous avez apprécié ce look dans ce superbe nouveau composant. Qui sait, peut-être que vous avez été inspiré pour l'ajouter à votre demande? Il y a plus à ce composant que ce que j'ai couvert ici, donc je vous recommande de regarder
les démos en ligne Kendo UI ainsi que
section DropDownTree API de notre documentation. Comme toujours, si vous avez des commentaires sur la façon dont nous pouvons améliorer le composant avec de nouvelles fonctionnalités, vous pouvez nous laisser un commentaire ici ou vous diriger vers le
Portail d'évaluation de l'interface utilisateur du Kendo !