Création d’une liste de pays avec Kendo UI pour Vue ComboBox

Découvrez le rendu adaptatif dans l’interface utilisateur Kendo pour Vue ComboBox. Nous ajouterons une liste de pays à une liste déroulante.

Avez-vous déjà été confronté à un scénario dans lequel vous deviez remplir un formulaire qui vous demandait de préciser votre région ou votre pays ? Aujourd’hui, je suis là pour vous guider dans la création d’une telle fonctionnalité.

Nous y parviendrons en récupérant une liste de pays à partir d’une API et en affichant ces données à l’aide du Progress Interface utilisateur Kendo pour Vue ComboBox et rendu adaptatif pour la réactivité. Le rendu adaptatif est un ajout récent au composant ComboBox dans la bibliothèque Kendo UI for Vue, et c’est l’outil idéal pour créer des sélections dynamiques et conviviales dans nos formulaires.

Cet article vise à présenter la ComboBox et à explorer sa précieuse fonctionnalité de rendu adaptatif. Nous montrerons comment créer une application simple affichant une liste de pays utilisant cette fonctionnalité puissante. Le rendu adaptatif, une fonctionnalité remarquable de ComboBox, permet à notre liste déroulante de fonctionner de manière transparente sur différentes tailles d’écran en offrant différents rendus de l’élément contextuel en fonction des dimensions de l’écran.

Qu’est-ce que la ComboBox de l’interface utilisateur Kendo ?

L’interface utilisateur de Kendo pour Vue ComboBox est un composant de formulaire qui vous permet de choisir une valeur unique dans une liste d’options. Considérez-le comme une version plus avancée du HTML standard. <select> élément. Ce qui est cool, c’est qu’il propose diverses fonctionnalités comme le filtrage, la virtualisation (gestion efficace de grandes listes), le rendre accessible à tous, l’adaptation aux différentes langues et régions (mondialisation) et même permettre aux utilisateurs de saisir des valeurs personnalisées.

Configuration de l’environnement de développement

Maintenant que nous avons compris ce que fait la ComboBox et son objectif, l’étape suivante consiste à configurer notre environnement de développement et à installer le composant Kendo UI ComboBox.

1. Créez un nouveau répertoire de projet

Tout d’abord, nous allons naviguer vers le répertoire dans lequel nous souhaitons créer un nouveau projet et exécuter la commande ci-dessous :

npm init vue@latest

2. Installez la ComboBox de l’interface utilisateur Kendo

L’interface utilisateur Kendo pour Vue ComboBox est un composant de la bibliothèque Kendo UI pour Vue. Nous pouvons y accéder en installant le Paquet kendo-vue-dropdowns via NPM.

npm i @progress/kendo-vue-dropdowns

Maintenant que nous avons configuré notre environnement de développement, l’étape suivante consiste à importer le module package.

import { ComboBox } from '@progress/kendo-vue-dropdowns';

Création d’un exemple d’application

Dans cet exemple, nous allons créer un élément de formulaire qui affiche une liste de pays. Pour ce faire, nous utiliserons un Fichier JSON créé sur GitHub Gist. Pour continuer, il faut créer un fichier JSON dans le dossier src et importer la liste des pays de L’essentiel de GitHub.

<template>
<div>
<label>Select Country:</label>
<ComboBox
:data-items="countries"
:text-field="'name'"
:style="{ width: '300px' }"
/>
</div>
</template>

Nous commençons par importer le composant déroulant et le fichier JSON. Ensuite, nous récupérons une liste de pays à partir du fichier JSON. Si quelque chose ne va pas au cours de ce processus, nous détectons et traitons l’erreur. Mais si tout se passe bien, la liste des pays reçue de l’API est stockée dans le dossier du composant. countries propriété.

<script>
import { ComboBox } from "@progress/kendo-vue-dropdowns";
import countriesData from "./countries.json";

export default {
  components: {
    ComboBox,
  },
  data() {
    return {
      countries: [], 
    };
  },
  created() {
    this.fetchCountries();
  },
  methods: {
    fetchCountries() {
      this.countries = countriesData.countries.map((country, index) => ({
        id: index,
        name: country,
      }));
    },
  },
};
</script>

Découvrez l’intégralité exemple de code et sortie.

Personnalisation de l’élément ComboBox

Dans le passé, si nous voulions que notre formulaire s’ajuste et s’affiche bien sur différents écrans, nous créions des styles pour chaque taille d’écran. Mais avec Kendo UI pour le rendu adaptatif Vuenous n’avons plus besoin de faire ça. Cette fonctionnalité intéressante aide les composants du formulaire à s’adapter automatiquement aux différentes tailles d’écran, ce qui nous fait gagner du temps et des efforts !

Remplacez le code HTML précédent par le code ci-dessous :

<template>
<div>
<div>Country:</div>
<ComboBox
:data-items="countries"
:text-field="'name'"
:data-item-key="'id'"
:filterable="true"
:adaptive="true"
:style="{ width: '300px' }"
/>
</div>
</template>

Consultez l’exemple de code et sortie de code en direct de personnalisation de comboBox

Filtrage des données sur ComboBox

L’interface utilisateur Kendo pour Vue ComboBox offre une fonction unique qui nous aide à filtrer les données spécifiques dont nous avons besoin. Pour activer la fonctionnalité de filtrage de ComboBox, définissez la propriété filterable sur true et incluez le @filterchange="filterChange" écouteur d’événements dans l’élément ComboBox.

<template>
  <div>
    <div>Country:</div>
    <ComboBox
      :data-items="countries"
      :text-field="'name'"
      :data-item-key="'id'"
      :filterable="true"
      @filterchange="filterChange"
      :adaptive="true"
      :style="{ width: '300px' }"
    />
  </div>
</template>

En définissant la propriété filtrable sur true et en incluant le @filterchange écouteur d’événements, nous activons la fonctionnalité de filtrage de la ComboBox. Nous pouvons alors mettre en œuvre le filterChange méthode dans notre composant Vue.js pour gérer la logique de filtrage basée sur les entrées de l’utilisateur.

<script>
import { ComboBox } from "@progress/kendo-vue-dropdowns";
import { filterBy } from "@progress/kendo-data-query";
import countriesData from "./countries.json";

export default {
  components: {
    ComboBox,
  },
  data() {
    return {
      countries: [], 
    };
  },
  created() {
    this.fetchCountries();
  },
  methods: {
    fetchCountries() {
      this.countries = countriesData.countries.map((country, index) => ({
        id: index,
        name: country,
      }));
    },
    filterChange(event) {
      this.countries = filterBy(
        countriesData.countries.map((country, index) => ({
          id: index,
          name: country,
        })),
        {
          field: "name",
          operator: "contains",
          value: event.filter.value,
        }
      );
    },
  },
};
</script>

Découvrez l’intégralité exemple de code en direct et sortie de code.

Conclusion

Dans cet article, nous avons plongé dans la ComboBox dans Kendo UI pour Listes déroulantes de vues. Il est similaire à l’élément de formulaire de sélection HTML, ce qui facilite la génération de listes de valeurs. Mais ce n’est pas tout ! Nous avons également découvert comment modifier ce composant à l’aide du rendu adaptatif. Cette fonctionnalité est pratique pour créer des éléments de formulaire réactifs qui s’adaptent à différentes tailles d’écran.

Voulez-vous jouer avec vous-même? Kendo UI pour Vue est livré avec un essai gratuit de 30 jours.

Essayez maintenant