Aujourd'hui, nous avons livré une nouvelle version de Telerik UI pour Blazor et nous sommes heureux de vous présenter quatre nouveaux composants Blazor ainsi que les améliorations de Grid Chart and Menu ! Vous pouvez désormais profiter du nouvel éditeur TreeList Stock Chart et Context Menu, ainsi que du nouveau exposé. ] Événements de grille pour vous donner la flexibilité d'appliquer une logique personnalisée lors de l'interaction avec des lignes de données dans les applications Blazor!
Explorons le contenu de la version 2.16.0 et voyons en détail les nouveaux avantages que vous pouvez incorporer dans votre serveur Blazor et WebAssembly applications!
Nouveaux composants Blazor
Composant Blazor Editor
Présentation de l'éditeur
Le nouveau HTML Editor Component permet aux utilisateurs de créer du contenu texte riche et offre des fonctionnalités prêtes à l'emploi pour la gestion de texte tels que la création, l'édition et la mise en forme de texte, de paragraphes, de listes et d'autres éléments HTML. En plus du jeu d'outils intégré, il vous permet également de créer des commandes personnalisées et de les intégrer facilement dans sa barre d'outils.
Interface utilisateur Telerik pour le composant Blazor Editor
Barre d'outils de l'éditeur
Les différents boutons de commande de l'éditeur sont organisés dans une Toolbar et comprennent divers textes options de mise en forme telles que la famille de polices, la taille et le style de police, l'alignement du texte, la création de listes, de tableaux, l'insertion d'hyperliens et d'images, etc. Pour faciliter la configuration de la barre d'outils, vous avez le choix entre deux options de configuration de jeu d'outils:
Par défaut —Le jeu par défaut des commandes d'éditeur les plus couramment utilisées
Toutes —toutes les commandes d'éditeur disponibles
modifiable et les styles de la page parente sont automatiquement appliqués au contenu.
Événement de l'éditeur
Le composant de l'éditeur ent expose l'événement ValueChanged pour vous permettre de gérer facilement le contenu de l'éditeur dans les applications Blazor. L'événement se déclenche après qu'un utilisateur modifie le contenu et que l'intervalle de mise à jour s'est écoulé (100 ms par défaut), puis vous fournit le contenu mis à jour.
Blazor TreeList Component
TreeList Overview
The Tree List Le composant est le match parfait pour visualiser les données hiérarchiques sous forme de tableau et est certainement l'un des points forts de la version. Il est livré avec de nombreuses fonctionnalités intégrées telles que la liaison de données, la sélection d'éléments, plusieurs méthodes d'édition, de tri, de filtrage, de pagination des données, plusieurs options de colonnes, la barre d'outils des modèles, le chargement de données à la demande et plus encore! si riche en fonctionnalités qu'il mérite un article de blog séparé, mais dans les sections ci-dessous, nous essaierons de mettre en évidence ses principales capacités.
The Blazor TreeList peut être lié à des données plates et hiérarchiques, et vous avez également l'avantage de charger des données à la demande pour les cas où vous travaillez avec un grand volume d'enregistrements de données et souhaitez optimiser les performances.
Sélection de lignes dans TreeList
La TreeList prend en charge les modes suivants de sélection de ligne :
Aucun (valeur par défaut) —Sélection de ligne désactivée
Sélection d'une seule ligne —Cliquez sur une ligne ou utilisez la case à cocher
Sélection de plusieurs lignes — maintenez la touche Ctrl ou Maj enfoncée pour étendre la sélection ou utilisez la sélection de case à cocher
Sélection de lignes multiples simple et Les articles fournissent plus d'exemples et de détails sur l'utilisation des fonctionnalités de sélection de TreeList.
Interface utilisateur Telerik pour Blazor TreeList Sélection de plusieurs lignes
Pagination et tri de TreeList
Le composant TreeList offre la capacité intégrée de pagination qui peut être activée avec un couple des paramètres de propriété pour activer la pagination et fournir le nombre d'enregistrements par page.
De même, le tri de la liste arborescente peut également être facilement activé en définissant un seul paramètre sur true. Cela permettrait aux utilisateurs de cliquer sur les en-têtes de colonne et de trier les données en fonction du type de données de la colonne, avec une flèche dans le titre de la colonne affichant le sens de tri ou de désactiver le tri pour les colonnes qui font exception à la règle générale.
Expandable – lorsqu'elle est définie sur true, la colonne affiche une flèche d'expansion / réduction devant le valeur et désigne la hiérarchie. Doit être défini pour au moins une colonne de votre arborescence afin de montrer la nature hiérarchique des données.
Champ —le nom du champ dans la source de données que la colonne rendra sous forme de chaîne (cas- sensible).
Titre – le texte qui est rendu dans l'en-tête de colonne.
Editable – vous pouvez définir cette propriété sur true ou false pour autoriser ou empêcher la modification de ce champ. Pour modifier les données, vous aurez également besoin d'une CommandColumn.
Filtrable – permet aux utilisateurs de filtrer une colonne particulière.
Locked – définit si la colonne est verrouillée (gelée, épinglée).
Sortable – permet aux utilisateurs de trier selon une colonne particulière.
Réorganisable – spécifie si les utilisateurs peuvent faire glisser pour réorganiser cette colonne.
Redimensionnable – spécifie si l'utilisateur peut redimensionner cette colonne. [19659012] Largeur – définit la largeur de la colonne.
Interface utilisateur Telerik pour Blazor TreeList Réorganiser les colonnes
Colonnes de commande TreeList
La colonne de commande d'un TreeList vous permet de lancer l'édition en ligne ou popup ou pour exécuter vos propres commandes. Exemples d’ajout de colonnes de commandes pour la modification, l’enregistrement et l’annulation g et la commande personnalisée pour TreeList se trouvent dans l'article de documentation .
Colonnes générées automatiquement par TreeList
Si vous devez générer une colonne TreeList pour chaque propriété publique de votre modèle de données, vous pouvez en bénéficier grandement de l'utilisation de l'option de colonne TreeList AutoGenerated . Cela vous permettrait de mapper directement les propriétés de votre modèle aux colonnes en définissant le paramètre AutoGenerateColumns sur true, ce qui vous éviterait de définir manuellement chaque colonne.
Virtualisation de colonnes TreeList
Lorsque vous travaillez avec des ensembles de données contenant un grand nombre de colonnes dans votre Blazor
Interface utilisateur Telerik pour la virtualisation des colonnes Blazor TreeList
En utilisant la fonction de virtualisation des colonnes TreeList vous pouvez facilement augmenter la vitesse et la réactivité de l'interaction des données, car seules les colonnes et les données correspondantes de la fenêtre actuellement visible seront
Filtrage TreeList
Le composant TreeList offre deux options intégrées pour filtrer ses données:
Filter Row —Une ligne d'options de filtre est affichée sous les en-têtes de colonne
Telerik Interface utilisateur pour Blazor TreeList Filter Row
Filter Menu – les en-têtes de colonne affichent un bouton qui affiche une fenêtre contextuelle avec des options de filtrage
Interface utilisateur Telerik pour Blazor TreeList Filter Menu
TreeList Editing
Il existe plusieurs façons d'implémenter l'édition des données, et en fonction de votre scénario, vous pouvez choisir options disponibles:
Édition de fenêtres contextuelles – permet aux utilisateurs de cliquer sur un bouton de commande Modifier sur la ligne de la liste d'arbres, et une fenêtre contextuelle apparaît avec toutes ses colonnes modifiables ouvertes aux modifications. En cliquant sur un bouton de commande Enregistrer dans la boîte de dialogue, les modifications sont soumises au modèle.
Interface utilisateur Telerik pour Blazor TreeList Popup Edition
Personnalisation de TreeList avec des modèles
La TreeList peut être entièrement personnalisée à l'aide de l'un des modèles disponibles, vous permettant de spécifier le rendu de:
Colonnes (cellules) —le rendu de chaque cellule (colonne ). Vous pouvez, par exemple, modifier les formats de chaîne ou ajouter vos propres composants.
Modification d'une cellule – lorsqu'une cellule est en mode édition, elle rendra ce modèle dans lequel vous pourrez utiliser des éditeurs, des composants et logique.
de la ligne, afin que vous puissiez entièrement personnaliser le comportement et le rendu de TreeList. Cela peut être pratique si vous souhaitez utiliser des modèles pour la plupart ou la totalité des colonnes, car il nécessite moins de balisage que la définition de modèles individuels pour ma
Filtrer la ligne et le menu Filtre —Personnalisez la conception et la logique des filtres intégrés en fonction du mode de filtrage TreeList sélectionné: ligne de filtre ou menu de filtre.
Le composant Liste d'arbres est livré avec une barre d'outils dans son en-tête qui vous permet organiser dans une belle mise en page les commandes intégrées (telles que Ajouter un élément) et toutes les commandes personnalisées que vous pouvez y ajouter sous forme de boutons. Vous pouvez ajouter votre propre code HTML et composants pour créer une mise en page plus complexe de la barre d'outils pour répondre aux besoins de votre entreprise .
Localisation et globalisation de TreeList
Le contrôle de liste d'arborescence a prise en charge intégrée de la localisation et de la globalisation . Ainsi, il n'est pas nécessaire de traduire les textes de l'interface utilisateur dans n'importe quelle langue et d'appliquer automatiquement le formatage numérique et champs de saisie de date bas sur une culture spécifique dans votre application Blazor.
Blazor Stock Chart Component
StockChart Overview
Le nouveau Stock Chart component vous permettra de visualiser le mouvement des unités financières telles que les actions / marché les prix à une date précise et – les taux d'ouverture et de clôture, les divers changements intervenus dans le prix pendant la journée, les valeurs minimales et maximales atteintes pendant la journée et les tendances de ces prix dans le temps.
Vous pouvez utiliser une variété de types de graphiques et contrôler tous les aspects de l'apparence du graphique, des couleurs et des polices aux rembourrages, aux marges, aux info-bulles personnalisées et aux modèles. En plus de cela, le graphique boursier Telerik fournit un navigateur pour élargir ou raccourcir la période définie et zoomer sur une partie particulière du graphique, et une fonction de réticule qui rend disponibles les valeurs précises dans les graphiques riches en données.
Le graphique boursier est un composant lié aux données. Il vous suffit de fournir une liste de modèles contenant à la fois des valeurs en points de données et des dates sur l'axe des x
Types de séries de graphiques boursiers
Le composant Graphique boursier prend en charge plusieurs séries de graphiques différentes pour couvrir tout scénario d'application que vous pouvez avoir — Zone , Column, Candlestick, Line et OHLC (open-high-low-close). Des exemples de code et leur utilisation pour tous peuvent être trouvés Telerik UI for Blazor documentation .
Stock Chart Navigator
Le Stock Chart Navigator permet à l'utilisateur de faire défiler et de zoomer sur les données sur une certaine période de temps. Le navigateur peut être utilisé avec tous les types de graphiques boursiers et permet des personnalisations telles que la définition d'une plage spécifique de navigation lors de l'initialisation, la direction du curseur, les personnalisations d'étiquettes et la rotation de la molette de la souris. Vous pouvez également choisir le type de série à utiliser pour visualiser la tendance générale.
Le Stock Chart a une autre fonction utile, le soi-disant Crosshairs qui représente la perpendiculaire lignes vers les axes et permettent aux utilisateurs de l'application d'afficher la valeur exacte d'un point à la position actuelle du curseur. Vous pouvez personnaliser leur couleur, leur opacité et leur largeur via les paramètres de l'axe des catégories du graphique.
L'événement de clic OnSeriesClick vous offre plus de flexibilité car il expose tous les détails relatifs à un point de données du graphique et vous permet de mettre en œuvre des paramètres personnalisés
Composant de menu contextuel de Blazor
Présentation du menu contextuel
Le composant ContextMenu vous permet de fournir aux utilisateurs un menu contextuel facilement accessible des commandes fréquemment utilisées dans les applications Blazor. Il est livré avec plusieurs fonctionnalités intégrées telles que la liaison de données, le style, l'imbrication d'éléments, la personnalisation avec des modèles, la navigation au clavier et une intégration transparente avec d'autres composants de l'interface utilisateur tels que la grille.
Données plates —une seule collection d'éléments avec des relations parent-enfant définies
Е chaque propriété d'élément de menu contextuel de la liste: Id, ParentId, HasChildren, Items, Text, ImageURL / Icon / ImageClass, URL, Separator, Disabled peut être défini via le champs correspondants dans leur liaison de données.
L'un des scénarios les plus courants pour l'intégration du composant de menu contextuel serait avec une Telerik Blazor Grid. Pour ce faire, il vous suffit de utilisez l'événement OnRowContextMenu de la grille pour obtenir le modèle de ligne actuel et afficher le menu contextuel, puis utilisez l'événement OnClick du menu contextuel pour gérer l'opération souhaitée. Un exemple de code avec une telle intégration peut être trouvé dans le fichier officiel documentation .
De plus, le composant dispose d'un paramètre simple mais puissant appelé Selector qui facilite la tâche d'attacher le menu contextuel à une ou plusieurs cibles. En utilisant le Méthode ShowAsync vous peut également ajuster le contenu du menu contextuel, c'est-à-dire. quels éléments de menu doivent être affichés / actifs en fonction de l'élément sur lequel l'utilisateur a cliqué. Consultez l'exemple de code montrant comment modifier les éléments ContextMenu en fonction des données cibles.
Navigation ContextMenu
En plus d'être utilisés comme raccourci pour les commandes, les éléments ContextMenu peuvent également être utilisés pour la navigation entre les différentes pages de votre application Blazor. Le composant peut générer les liens nécessaires pour vous via son champ UrlField lorsque liaison de données . Tout ce que vous avez à faire est de fournir une collection de modèles qui décrivent les pages vers lesquelles vous voulez que l'utilisateur navigue et de renseigner son UrlField avec les données correspondantes du modèle (vous pouvez également fournir une propriété Url dans le modèle).
ContextMenu Événement Onclick
L'événement OnClick se déclenche lorsque l'utilisateur clique ou tape sur un élément du menu contextuel et il convient aux cas où réagir à la sélection de l'utilisateur sans utiliser la navigation pour charger automatiquement le nouveau contenu.
Améliorations des composants Blazor
Nouveaux événements Blazor Grid
Avec chaque version de Telerik UI pour Blazor, nous essayons de donner de l'amour et d'étendre les fonctionnalités de the Grid . Dans la version actuelle, nous avons travaillé à étendre les possibilités du point de vue de la programmation et exposé plusieurs nouveaux événements et fonctionnalités, afin que vous ayez le contrôle de l'interaction de l'utilisateur avec la grille et ses opérations de données personnalisées.
Blazor Grid Grouping with OnRead
] Lorsque vous utilisez le regroupement intégré Grille ou une autre fonction prête à l'emploi, cela vous masque la complexité des opérations de données effectuées en interne. Il y a encore des cas où vous devez effectuer vous-même le regroupement dans le code (et / ou sur le service côté serveur), et vous pouvez maintenant utiliser l'événement OnRead avec regroupement. Pour une explication détaillée de ce que vous devez prendre en compte, ainsi que pour la préparation des données à effectuer, consultez l'exemple sur comment configurer la grille pour utiliser le regroupement avec des opérations manuelles de source de données et comment utiliser les extensions Telerik DataSource pour préparer des données groupées.
Événements de développement / réduction de lignes de Blazor Grid
L'événement OnRowExpand se déclenche en réponse à l'utilisateur développant le modèle de détail (enregistrements parent-enfant) du Grid et est pratique lorsque vous devez charger des données détaillées de Grid à la demande
L'événement OnRowCollapse se déclenche en réponse à la réduction par l'utilisateur du modèle de détail de la grille et vous offre un accès facile au modèle du row
Événement de menu contextuel de la grille Blazor
L'événement OnRowContextMenu se déclenche en réponse à:
clic droit sur une ligne de grille
clic sur le bouton du clavier du menu contextuel
long -toucher sur m périphériques obiles
L'événement Grid OnRowContextMenu est utilisé pour intégrer le menu contextuel avec Grid Rows. Son gestionnaire d'événements reçoit un objet GridRowClickEventArgs qui fournit le modèle de la ligne cliquée et expose une propriété EventArgs. Vous pouvez utiliser les arguments d'événement pour déterminer la touche du clavier ou la position du curseur de la souris lorsque l'utilisateur a effectué une action.
Blazor Chart Series
Dans l'interface utilisateur Telerik pour la version Blazor 2.16, nous avons ajouté deux séries de types de graphiques pour faciliter analyse financière et des prix: OHLC et Candlestick .
OHLC et Candlestick sont des graphiques de prix qui affichent le les cours élevés, bas, d'ouverture et de clôture d'un titre, d'un dérivé ou d'un prix pour une période donnée. Les deux sont largement utilisés par les analystes financiers ou les négociants et les aident à déterminer facilement si le cours de clôture était supérieur ou inférieur au cours d'ouverture.
Bien que les deux types de graphiques affichent la même quantité d'informations, ils le font d'une manière légèrement différente. Alors que les graphiques OHLC montrent l'ouverture et la fermeture via des lignes horizontales orientées vers la gauche et la droite, les chandeliers montrent l'ouverture et la fermeture via un corps réel.
Telerik UI pour Blazor OHLC Chart
Améliorations du menu Blazor
Dernier point, mais non le moindre, dans cette version, nous avons ajouté deux fonctionnalités supplémentaires au composant Menu :
Separator – vous permet de définir une ligne dans le composant Menu en le définissant sur true. vous permet de distinguer les éléments logiquement regroupés entre deux séparateurs.
Désactivé – vous permet de désactiver les éléments de menu en le définissant sur true (ces éléments de menu sont toujours rendus mais ne seront pas cliquables).
Nouvelle version de Telerik Blazor, nouveau look de démos!
Nous sommes ravis que les Démos Telerik UI for Blazor aient un tout nouveau look! Alors que le nombre de composants et de démos et d'exemples de code associés augmente continuellement , nous avons repensé nos démos afin que vous puissiez facilement naviguer et rechercher des fonctionnalités spécifiques. De plus, nous leur avons donné un tout nouveau style sophistiqué.
Pour voir en action tout ce qui est mentionné dans le billet de blog, rendez-vous sur la page Interface utilisateur Telerik pour Blazor téléchargez une version d'évaluation gratuite de Telerik UI pour Blazor 2.16.0, ou si vous êtes un titulaire de licence actif, vous pouvez récupérer la dernière et la meilleure sur la page «Votre compte» ou mettre à jour votre NuGet Telerik.UI.for.Blazor référence du package à la version 2.16.0. directement dans vos solutions Blazor.
Merci!
Comme toujours, nous vous sommes reconnaissants de votre implication et de nous avoir aidés à grandir et à rendre l'interface Telerik pour Blazor plus grande et meilleure. nous ce qui fonctionne bien, ce qui doit être amélioré et quel composant ou fonctionnalité vous aimeriez voir ensuite dans le feedbac dédié Blazor k portal ou dans la section commentaire ci-dessous!
De toute l'équipe Telerik UI for Blazor chez Progress, nous vous remercions pour votre soutien continu