Faire connaissance avec la nouvelle Kendo UI MultiColumnComboBox

Le MultiColumnComboBox était l’un des éléments les plus demandés de notre portail de commentaires. Examinons de plus près ce qu'il peut faire et comment vous pouvez l'utiliser dans vos applications aujourd'hui.

Cela fait quelques mois depuis la publication R3 2018 de Kendo UI et pendant que le buzz de la sortie a un peu baissé Je voulais m'arrêter et prendre le temps de parcourir l'une des pièces les plus importantes de la R3 2018: le nouveau composant MultiColumnComboBox pour le jQuery , ASP.NET MVC et ASP.NET Core Bibliothèques de composants d'interface utilisateur!

Il s’agissait de l’un des éléments les plus sollicités à ce jour sur le portail de commentaires Kendo UI. L’équipe Kendo UI était donc très enthousiaste de pouvoir offrir ce contenu à tous nos développeurs. Nous avons déjà vu bon nombre d’entre vous prendre le composant et commencer à l’utiliser, mais pour tous les autres, voici un aperçu de son contenu, de son pourquoi, et (espérons-le) de l'inspiration sur la façon de l'utiliser dans votre applications aujourd'hui!

Qu'est-ce que le MultiColumnComboBox?

Bien que son nom soit un mot à dire, il est également très descriptif et vous permet de savoir immédiatement en quoi consiste le composant. MultiColumnComboBox est un ComboBox avec la possibilité d'afficher ses données dans plusieurs colonnes. Simple, non? Une autre façon de penser à cela consiste à proposer une disposition semblable à une grille dans un menu déroulant.

Bien que cela puisse ne pas convenir à toutes les applications, il existe certainement des scénarios qui nécessitent de sauver de l'immobilier (via liste déroulante) avec la possibilité d'afficher de nombreuses valeurs pour un élément particulier, plutôt qu'une seule valeur pour un élément de données (via la structure de grille). Après tout, il s’agissait de l’un des éléments les plus votés dans notre portail de commentaires public!

Comment commencer à utiliser MultiColumnComboBox aujourd'hui?

Le premier point de départ pour commencer avec l’un de nos DropDowns est avec un élément input, puisqu'il s'agit de l'élément HTML de base que nous cherchons à améliorer avec des fonctionnalités supplémentaires.

À partir de là, nous pouvons utiliser une partie de la magie provenant de Kendo UI en l'intégrant dans notre nouveau composant. Dans cet exemple, j'utilise document.ready mais vous pouvez bien sûr instancier le composant ailleurs.

Cela rend simplement un composant vide, donc maintenant que nous avons créé le composant de base, ajoutons des données. Dans ce cas particulier, je vais travailler avec l'élément de structure de Kendo UI DataSource et me lier à l'un de nos exemples de points de terminaison OData disponibles au public.

En développant un peu plus l'échantillon, nous obtenons les éléments suivants:

Nous allons quelque part, mais nous n'y sommes pas encore. Si nous courons cela, nous obtenons simplement une liste de [object Object] contenant autant d'éléments que nous avons dans notre magasin de données.

Le moyen de le modifier est de définir un dataTextField et un dataValueField qui, comme vous l'avez peut-être deviné, permet au composant de savoir quel texte doit être affiché dans l'entrée (TextField) et quelle doit être la valeur sous-jacente (ValueField). Bien sûr, nous pouvons extraire des informations de l'intégralité de la donnée élémentaire, mais nous souhaitons ici adhérer aux bases d'un élément d'entrée.

Cela prendra juste [object Object] et affichera une colonne qui ressemble à notre ComboBox habituelle. Où sont toutes nos colonnes!? Eh bien, pour MultiColumnComboBox, nous avons décidé qu'il serait préférable de définir les colonnes de la même façon que nous le faisons dans les options Grid et TreeList: avec l'option de configuration colonnes . Il s'agit d'un tableau d'objets qui représentent nos colonnes, y compris la définition du champ auquel nous sommes liés et le titre de la colonne.

Si vous avez déjà travaillé avec la grille de Kendo UI, vous devriez être très familier. cette structure!

Maintenant, nous allons quelque part! Notre liste déroulante s'affiche et affiche les colonnes que nous avons définies – y compris les en-têtes! Les utilisateurs peuvent interagir avec des éléments et les sélectionner pour qu'ils apparaissent dans l'élément d'entrée une fois qu'ils ont été sélectionnés. Cependant, nous ne disposons pas d'un moyen de filtrer les éléments en fonction de la saisie de l'utilisateur, ce à quoi nous sommes tous habitués à gérer ces listes potentiellement énormes.

Laisser les utilisateurs filtrer l'entrée est géré par deux options de configuration: filtre et filtreFields .

Le filtre permet de définir le type de filtre que nous souhaitons traiter. Cela inclut des options telles que "commence par" et "contient" qui sont probablement les plus populaires, mais quelques options supplémentaires peuvent être utilisées.

Le filterFields est un peu unique car il nous permet de définir explicitement quelles colonnes nous voulons rechercher à travers. Donc, si nous voulons limiter cela à une ou deux colonnes, nous pouvons le faire en ne mentionnant que ces éléments dans le tableau. Notez cependant que vous pouvez ajouter tous vos champs si vous le souhaitez!

Donc, si je veux filtrer tous les champs de l'exemple précédent et que le filtre fonctionne comme un "contient", il vous suffit d'ajouter ces deux options de configuration pour l'exemple ci-dessus.

Et c'est tout! Nous avons maintenant notre propre MultiColumnComboBox qui affiche tous les champs de données qui nous intéressent et nous permet de filtrer les éléments de n’importe lequel de nos champs.

Quelques caractéristiques principales

Virtualisation

Souvent, nous voyons beaucoup de nos utilisateurs jettent une tonne de données dans leurs listes déroulantes, ce qui n’est pas forcément une mauvaise chose! Avoir la capacité de lier d’une manière ou d’une autre toutes vos données à ce type de composant d’interface utilisateur a beaucoup de sens, mais souvent, cela entraîne la génération de beaucoup de HTML supplémentaire (il doit être rendu quelque part après tout) et cela peut créer assez une expérience lente, même dans les navigateurs les plus rapides.

C'est pourquoi nous avons ajouté à la virtualisation depuis le début jusqu'à la MultiColumnComboBox. Cela nous permet de faire le lien avec la liste complète des données et d'extraire celles-ci du serveur selon les besoins (je ne pense pas que nous ayons besoin de 100 000 enregistrements à afficher en une seule fois dans un menu déroulant ) et ont amélioré la mécanique du défilement. Cela évite non seulement le temps de chargement initial, mais également le niveau de défilement nécessaire.

Server Filtering

Dans l'exemple que nous avons parcouru dans ce billet de blog, nous avons fini par charger toutes les données disponibles à partir du Point de terminaison REST à partir duquel nous lisons des données. Cela peut toutefois s'avérer assez délicat à gérer si nous avons des centaines de milliers d'enregistrements (en particulier dans les navigateurs plus anciens), nous pouvons donc vouloir nous appuyer sur le filtrage de serveur pour ces scénarios comportant beaucoup de données.

Le filtrage de serveur nous donne la possibilité. pour demander des données une fois qu'un utilisateur a saisi un certain nombre de caractères (défini par la propriété minLength ) et accéder au serveur pour exécuter les options de filtrage et renvoyer la liste d'éléments appropriée. Associez-le à l'option de configuration autoBind qui peut empêcher le MultiColumnComboBox de lier des données jusqu'à ce qu'une demande soit lancée plus tard et que vous disposez d'une excellente combinaison pour transférer une activité intensive en données sur le serveur plutôt que sur le client. Un exemple si ce peut être trouvé ici .

Grouping

Tout comme avec notre ComboBox, nous avons ajouté la possibilité d’organiser vos données en groupes. Cela peut facilement être fait en suivant l'exemple de cette démonstration et, comme le montre la capture d'écran rapide ci-dessus, cela nous donne un petit indicateur du groupe particulier dans lequel les éléments de données affichés font partie. Ceci, en passant, est tiré de la valeur DataTextField du champ sur lequel nous groupons.

Templates

Jusqu'à présent, nous n'avons vraiment parlé que de la gestion du texte en colonnes, mais que faire si voulez-vous personnaliser chaque entrée pour mettre à jour son apparence en fonction de l'élément de données, ou simplement ajouter du code HTML supplémentaire pour chaque élément? Eh bien, c’est là que les modèles entrent en jeu! Comme on peut le voir dans cette démonstration le traitement des modèles est effectué colonne par colonne et permet à la cellule et à l'en-tête de tirer parti de tout type de modèle personnalisé.

J’ai essayé de parcourir certaines des fonctionnalités les plus utilisées de certains de nos autres menus déroulants (principalement le ComboBox ), mais il existe une tonne d’autres fonctionnalités que nous pouvons utiliser. nouveau composant. Nous vous recommandons vivement de parcourir nos nos démos ainsi que notre documentation pour voir ce qui est disponible en plus.

Commentaires

Cette version initiale de la MultiColumnComboBox avait beaucoup de fonctionnalités de la version initiale, mais cela ne signifie pas que nous en avons fini avec! Si vous avez des suggestions sur la manière dont nous pouvons améliorer cette composante, ne soyez pas timide! N'hésitez pas à utiliser la section de commentaire ci-dessous ou à l'envoyer en tant qu'élément de commentaire dans le portail de commentaires Kendo UI .