Étape par étape: Devextreme comment définir l'option sélectionnée du groupe radio

Devextreme by Devexpress est une bibliothèque pleine de composants d'interface utilisateur prêts à l'emploi pour les applications Web. Il fonctionne avec Angular, React, Vue et même jQuery. L'un de ses widgets populaires est le radiogroup , qui permet aux utilisateurs de choisir une option dans une liste.

Dans les formulaires, les pages de paramètres ou les tableaux de bord, le radiogroup aide les utilisateurs à choisir une seule réponse. Par exemple, vous pourriez les laisser choisir entre le «plan mensuel» et le «plan annuel». Pour que l'application se sente fluide, les développeurs souhaitent souvent définir un choix par défaut ou présélectionner une valeur. C'est là que la propriété Value dans Radiogroup entre en jeu.

Qu'est-ce qu'un radiogroup Devextreme?

Le widget radiogroup est un contrôle d'entrée simple mais puissant. Il prend une source de données (comme un tableau ou une liste JSON) et affiche des boutons radio pour chaque élément. Les utilisateurs peuvent ensuite cliquer pour en sélectionner un. Contrairement à un groupe à cocher , où plusieurs éléments peuvent être choisis, Radiogroup ne permet qu'un seul choix à la fois.

Les développeurs se soucient généralement de deux choses: ce qu'est l' élément sélectionné et comment le définir correctement. Le widget suit le choix actuel via la propriété de valeur . Lorsque vous modifiez cette propriété, l'élément sélectionné se met à jour. Cela fonctionne dans tous les cadres - Angular, React, Vue et JQuery - puisque le widget suit la même API.

Définir une valeur sélectionnée par défaut dans Radiogroup

La définition d'une valeur sélectionnée par défaut est effectuée via l'option de valeur lors de l'initialisation du widget. Vous transmettez la valeur qui correspond à l'un des éléments de la source de données , et cet élément apparaît comme présélectionné.

Voici un exemple simple en utilisant JavaScript Plain avec une source de données JSON:

$ ("# RadiogroupContainer"). Dxradiogroup ({
Articles: [«Basic», «Standard», «Premium»],
Valeur: «Standard» // Par défaut sélectionné
});

Dans cet exemple, l'option «Standard» sera déjà sélectionnée lorsque la page se chargera. Ceci est utile lorsque vous souhaitez guider les utilisateurs vers le choix le plus courant ou recommandé.

Vous pouvez également lier aux objets au lieu de chaînes simples. Par exemple:

Ici, les propriétés ValueExpr et DisplayExpr assurez-vous que le widget sait quel champ utiliser pour la valeur et quel champ afficher à l'utilisateur.

Modifier par programme l'élément sélectionné

Parfois, vous ne voulez pas que le radiogroup affiche simplement une valeur par défaut. Vous devrez peut-être modifier l'option sélectionnée plus tard, peut-être une fois que l'utilisateur a terminé une autre étape de votre formulaire ou lorsque les données reviennent d'une API.

Dans Devextreme, cela se fait en mettant à jour la propriété de valeur du radiogroupe. Si vous avez créé le widget avec jQuery, vous pouvez appeler Option () pour le modifier à l'exécution.

Exemple:

Lorsque l'appel de l'option («valeur»,…) , le radiogroup met instantanément en évidence «Premium». Cela fonctionne également dans Angular, React et Vue - dans ces cadres, vous liez généralement la valeur à l'état ou à une variable. Lorsque cet état change, l'élément sélectionné se met à jour automatiquement.

Cette approche est utile pour les formulaires où la sélection dépend des autres entrées. Par exemple, si un utilisateur choisit «compte commercial», vous pouvez automatiquement définir le radiogroup sur «plan annuel» au lieu du «plan mensuel».

Gérer l'événement OnValuechanged

La définition d'une valeur est un côté de l'histoire. La capture de l'interaction utilisateur est l'autre. L'événement OnValueChanged dans DevexTreme vous permet de réagir chaque fois que l'utilisateur modifie sa sélection.

Voici un exemple simple:

Chaque fois que l'utilisateur choisit un plan différent, la console imprime la nouvelle valeur. Cet événement est essentiel lorsque vous souhaitez mettre à jour d'autres parties de la page ou renvoyer la sélection à une base de données.

Dans les cadres, cela fonctionne de la même manière mais suit leurs modèles d'événements. Dans React, par exemple, vous pouvez utiliser l'état et passer une fonction de gestionnaire qui tire lorsque le radiogroup change. Dans Angular ou Vue, vous pouvez vous lier directement avec la liaison des données bidirectionnelle et utiliser la sortie de l'événement pour suivre les modifications.

Considérez OnValuechanged comme votre «auditeur». Il connecte l'action utilisateur à votre logique métier - comme afficher un prix différent, activer un bouton ou ajuster les champs associés. Sans cela, le radiogroup n'a afficher les options que sans permettre au reste de votre application de savoir ce que l'utilisateur a choisi.

Exemples spécifiques au cadre

DevexTreme fonctionne sur de nombreux cadres, et le réglage de la valeur de radiogroup sélectionné est presque le même partout, mais la syntaxe change un peu.

1. Exemple angulaire:

Dans Angular, vous liez généralement la valeur à une propriété composante.

<dx-radio-groupe
[articles] = ”[« Basic »,« Standard »,« Premium »]»
[(valeur)] = ”selectedPlan”>
</ dx-radio-groupe>

Ici, selectedPlan dans vos contrôles de fichiers TypeScript quel élément est sélectionné. Si vous modifiez selectedPlan , le radiogroup se met à jour immédiatement.

2. REACT EXEMPLE:

React utilise des composants contrôlés, vous gérez donc la sélection avec l'état.

Lorsque l'utilisateur choisit un plan différent, setPlan met à jour l'état et le radiogroup affiche la nouvelle sélection.

3. Vue Exemple:

Vue facilite les choses avec v-model

Le changement selectedPlan dans vos données VUE met à jour le radiogroup instantanément.

4. JQUERY Exemple:

JQuery est simple car vous créez simplement une instance et définissez la valeur.

Dépannage des problèmes communs

Même avec des widgets simples, les choses peuvent mal tourner. Voici les problèmes les plus courants auxquels les développeurs sont confrontés:

• Valeur non mise à jour: cela se produit généralement lorsque la valeur que vous définissez ne correspond pas à valueExpr dans votre source de données. Par exemple, si votre source de données utilise id , mais que vous essayez de définir le texte à la place, rien ne change.
• Plusieurs radiogroups sous une forme: si vous utilisez la même liaison de données pour deux widgets, ils peuvent interférer entre eux. Utilisez toujours des liaisons uniques ou un état séparé pour chaque groupe.
• Problèmes de style ou de mise en page: Parfois, le radiogroup ne ressemble pas aux formes ou aux grilles. Assurez-vous que le conteneur a suffisamment d'espace et que le CSS ne remplace pas les styles de Devextreme.

La plupart de ces problèmes se résument à des valeurs incompatibles ou à des liaisons manquantes. La vérification de votre value , valueExpr et dataSource les résout généralement.

Conclusion

Le widget radiogroup dans Devextreme est un outil simple mais important. Vous utilisez la propriété de valeur pour définir une option par défaut («valeur») pour la modifier plus tard, et onValueChanged pour capturer les actions de l'utilisateur. Dans Angular, React, Vue ou JQuery, la méthode est la même - lier correctement la valeur et elle fonctionne.

Si quelque chose ne met pas à jour, vérifiez votre liaison de données et assurez-vous que la valeur correspond à votre source de données. Une fois que vous avez bien configuré, Radiogroup devient un moyen fluide de guider les utilisateurs pour faire le choix que vous souhaitez.