Continuant à nos promesses pour la livraison de la feuille de route 2021, ce mois-ci, l'interface utilisateur Telerik pour Blazor apporte le composant Gantt Chart UIainsi que plusieurs nouvelles fonctionnalités à la Grid TreeList, Scheduler, Pager et plus encore !
Plongeons dans la version d'août 2021 pour en savoir plus sur l'intégralité du contenu 2.26.0, que vous pouvez brancher et lire dans vos applications Blazor Server et WebAssembly ![19659003]Composant d'interface utilisateur de diagramme de Gantt Blazor
Présentation du composant de diagramme de Gantt
Le Gantt est un outil bien connu qui est largement utilisé dans les applications de gestion de projets et de tâches, l'exécution et la surveillance de processus et la planification de tâches, pour n'en nommer que quelques-uns. Alors que le plan initial était de livrer le diagramme de Gantt en septembre 2021, en raison de la demande croissante pour le composant dans les applications Blazor, nous avons procédé à une reprogrammation et réussi à expédier sa v1 avec la version actuelle de l'interface utilisateur Telerik pour Blazor 2.26.
Le Telerik Gantt pour Blazor se compose de deux parties principales qui visualisent le même ensemble de données dans deux modes côte à côte : une structure de liste arborescente hiérarchique et une chronologie visuelle. Même s'il s'agit de la première version du contrôle d'interface utilisateur Telerik Gantt pour Blazor nous nous sommes assurés qu'il inclue une longue liste de fonctionnalités intégrées essentielles telles que : la liaison à des données plates et hiérarchiques, des types de tâches prédéfinis, plusieurs Vues Gantt, tri, filtrage, édition, info-bulles de tâches et modèles.
En utilisant l'approche multi-versions, nous espérons vous offrir la possibilité de commencer à développer vos applications immédiatement et en même temps de vous assurer de recevoir un autre ensemble solide de fonctionnalités en quelques semaines avec l'interface utilisateur Telerik pour la version 2.27 de Blazor en septembre.
Pour chacune des vues, vous pouvez configurer la largeur du créneau, les dates de début et de fin de l'intervalle de temps.
Liaison de données de Gantt
Le diagramme de Gantt peut être lié à des données plates ou hiérarchiques. Le mode de liaison des données est déterminé par des paramètres associés à une hiérarchie (parent de la tâche, identifiant et indicateur définissant les enfants).
Tri Gantt
En définissant le paramètre Telerik Gantt Sortable sur "vrai", les utilisateurs commandez facilement les données en cliquant sur les en-têtes de colonne.
Filtrage de Gantt
Le Gantt propose différentes manières de filtrer les données : vous pouvez activer la ligne de filtre qui apparaîtra juste en dessous du ligne d'en-tête de colonne.
Vous pouvez également activer le menu de filtrage des colonnes qui permet aux utilisateurs de filtrer les données en ajoutant un ou plusieurs opérandes.
Barre d'outils Gantt
La barre d'outils Gantt vous permet d'organiser les actions utilisateur courantes de manière claire et pratique. Elle est livrée avec une commande intégrée pour l'ajout de nouvelles tâches et une option pour ajouter d'autres actions personnalisées courantes.
Tâches de Gantt
Pour une visualisation correcte des tâches, le composant Telerik Gantt pour Blazor exige que certains de ses champs de données soient obligatoires :
- TitleField – description de la tâche
- StartField – tâche date de début (utilisée pour le rendu dans la chronologie)
- EndField – date de fin de la tâche (utilisée pour le rendu dans la chronologie)
- PercentCompleteField – un nombre compris entre 0,00 et 1,00, qui déterminera le pourcentage d'achèvement de la tâche
En outre, vos modèles peuvent fournir les données facultatives suivantes :
- IdField – identifiant unique de chaque tâche (nécessaire pour l'édition et les scénarios hiérarchiques)
- ParentIdField – identifié unique de la tâche parent (si nulle, la tâche est affichée au niveau racine)
- HasChildrenField – indicateur déterminant si un élément de modèle est un nœud parent ou feuille dans la hiérarchie
- ItemsField – propriété qui contient le éléments enfants
Types de tâches de Gantt
Suite aux types de tâches nécessaires à la gestion de projets, le composant Gantt propose trois types différents :
- Régulières – tâches normales, qui peuvent être redimensionnées, déplacées et modifiées indépendamment[19659013]Somme ry – tâches de niveau supérieur avec un rendu spécial indiquant qu'elles ont des tâches enfants ; les dates de début et de fin et les valeurs en pourcentage d'achèvement des tâches récapitulatives sont calculées en fonction des valeurs de leurs tâches enfants
- Milestone – tâches régulières qui ont une durée nulle, généralement utilisées pour indiquer qu'une partie importante d'un projet est atteinte
Le Gantt est suffisamment intelligent pour déterminer le type de tâche en fonction des valeurs fournies des éléments de données. Par exemple :
- Si vous définissez la date de début égale à la date de fin, le Gantt définira automatiquement la tâche comme jalon
- La définition d'une date de fin pour une tâche jalon à partir de l'éditeur TreeList la convertira en une tâche normale[19659047]L'ajout d'un enfant à une tâche normale le convertira en un résumé, et ainsi de suite
Édition de tâches
Le composant Gantt permet d'éditer des tâches dans les deux parties des composants : la TreeList et la TimeLine.
Dans la section chronologie du Gantt, les utilisateurs peuvent effectuer modifications via des opérations de glisser-déposer—déplacement et redimensionnement des tâches, modification de P ercentComplete via une poignée de déplacement dédiée, etc. Tout comme dans la section TreeList, un double-clic sur un élément de tâche ouvrira l'éditeur contextuel pour une édition avancée.
Task Templates
Utilisation du Gantt Chart fonctionnalité de modèle vous pouvez restituer un contenu personnalisé pour des tâches régulières dans la section chronologie. Cela vous permet de visualiser les images et la mise en forme personnalisée directement dans l'emplacement de tâche.
- Pas de modèle de données – vous permet d'afficher un contenu personnalisé lorsque la TreeList n'a aucune donnée à afficher
- Delete confirmation – vous permet de demander aux utilisateurs de confirmer les données de TreeList suppression
Nouvelles fonctionnalités du composant d'interface utilisateur du planificateur
Fin juin, nous avons expédié fonctionnalité de regroupement de ressources intégrée pour l'interface utilisateur de Telerik Blazor Scheduler, et ce mois-ci, nous avons ajouté plusieurs nouvelles fonctionnalités :
Plus bonne nouvelle concernant le planificateur : dans notre version à venirnous prévoyons d'ajouter plus de fonctionnalités et d'améliorations telles que l'affichage de la chronologie et l'événement ContextMenu. la nouvelle fonctionnalité donne une flexibilité intégrée pour ajuster le nombre d'enregistrements affichés par page . En définissant la propriété PageSizes sur une collection de valeurs, le téléavertisseur Telerik pour Blazor affiche une liste déroulante avec les options de taille de page correspondantes. Le choix d'une valeur dans la liste déroulante modifiera la taille de la page dans le pager. Vous pouvez également afficher l'élément « Tous » dans la liste déroulante en passant l'élément null à la collection d'éléments de taille de page.
- Dans la Grid ajoutez la balise GridPagerSettings dans :
<GridPagerSettingsInputType="@PagerInputType.Input"PageSizes="@PageSizes"/><GridSettings><[19659100]GridPagerSettingsInputType="@PagerInputType.Input"PageSizes="@PageSizes"/><GridPagerSettingsInputType="@PagerInputType.Butons"PageSizes="@PageSizes"ButtonsCount="10"/></GridSettings> - Réalisez analogiquement la même configuration du pager dans la TreeList :
<TreeListSettings><TreeListSettings[1965959101]InputType[1965959102]"@PagerInputType.Input"PageSizes="@PageSizes"/><TreeListPagerSettingsInputType="@PagerInputType.Butons"PageSizes="@PageSizes"ButtonsCount="10 "/></TreeListSettings> - Et dans Blazor ListView, vous pouvez configurer le pager comme suit :
<ListViewSettings><ListViewPagerSettingsInputType19659102]="@PagerInputType.Input"PageSizes="@PageSizes"/><ListViewPagerSettingsInputType="@PagerInputType.Buttons"PageSizes="@PageSizes"ButtonCount=[19659103]"7"/></ListViewSettings>
Télécharger Telerik UI for Blazor 2.26.0
Essayez la dernière version de Telerik UI for Blazor et laissez Nous savons ce que vous en pensez !
- Pour tous ceux qui découvrent l'interface utilisateur Telerik pour Blazor, vous pouvez télécharger un essai gratuit de l'interface utilisateur Telerik pour Blazor 2.26.0 à partir de la page Interface utilisateur Telerik pour Blazor.[19659047]Les titulaires d'une licence Telerik active peuvent récupérer la dernière version à partir de la page « Votre compte » ou mettre à jour directement la référence du package Telerik.UI.for.Blazor NuGet vers la version 2.26.0 dans les solutions Blazor existantes.
Source link