Interface utilisateur Telerik pour Blazor 2.26.0 – Diagramme de Gantt, grille, pager

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.

Telerik UI for Blazor Gantt Chart UI Component

Gantt Views

La partie chronologie du Gantt composant offre quatre vues prédéfinies intégrées qui définissent la granularité des créneaux horaires :[19659012]DayView – visualisation es tâches dans une vue quotidienne avec une granularité jusqu'à une heure (la ligne d'en-tête Gantt principale affiche le jour et la ligne secondaire montre les créneaux horaires)

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.

Interface utilisateur Telerik pour le menu de filtre de diagramme de Gantt Blazor

Vous pouvez également configurer le menu de filtre de colonne de Gantt pour afficher une liste avec des cases à cocher et une zone de saisie de recherche pour une découverte facile du filtre disponible par valeurs.

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.

Interface utilisateur Telerik pour Blazor Gantt Chart InCell Editing

Utilisateurs peut modifier les données dans l'arborescence en cliquant sur une tâche et en saisissant directement de nouvelles valeurs d'entrée dans les cellules correspondantes (Blazor Gantt Chart InCell edition).

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.

Interface utilisateur Telerik pour le contenu personnalisé de la tâche Blazor Gantt

Info-bulle

Si vous souhaitez que l'emplacement de la tâche dans la chronologie soit concis mais que vous devez toujours afficher des informations supplémentaires sur une tâche de Gantt, vous pouvez le faire dans le composant d'info-bulle affiché lors du survol d'une tâche dans la section chronologie de Gantt. L'info-bulle fournit également une option de modèle qui vous permet de rendre un contenu personnalisé.

Modèle d'info-bulle de l'interface utilisateur Telerik pour Blazor Gantt

Liste des fonctionnalités du diagramme de Gantt v2

Le mois prochain avec l'interface utilisateur Telerik pour la version Blazor 2.27, vous pouvez vous attendre le deuxième ensemble de fonctionnalités de Gantt, y compris g :

• Dépendances de tâches – bien connues des dépendances de gestion de projet/tâche (début à démarrer, début à fin, fin à fin, etc.)
• Redimensionnement et réorganisation des colonnes de Gantt (dans la vue TreeList )
• Désactivez le mode d'édition InCell avec un double-clic
• Option pour éditer les tâches dans la partie de liste arborescente avec DateTimePicker (actuellement dans la v1, ceci n'est disponible que dans la vue Chronologie de Gantt)
• Améliorations de l'info-bulle (avec la version actuelle il y a un problème connu avec les tâches de longue durée, le défilement et la position de l'info-bulle)

Composant Blazor Grid UI—Nouvelles fonctionnalités

Pas de modèle de données

La nouvelle fonctionnalité de modèle de grille « pas de données » vous permettra d'afficher du contenu personnalisé allant au-delà du message par défaut « Aucune donnée » lorsque la grille n'a aucune donnée à afficher. Si vous avez besoin de rendre des images, du texte stylisé ou même d'autres composants, placez-les simplement dans les balises de la grille.

Composant de grille Telerik Blazor—Pas de modèle de données

Confirmation de suppression

En définissant la nouvelle propriété ConfirmDelete de la grille sur truevous peut ajouter une étape supplémentaire dans le processus de suppression des données et afficher une boîte de dialogue de confirmation de suppression comme une meilleure alternative à la capacité de navigateur intégrée.

Telerik Blazor Grid Component—Delete Confirmation

Blazor TreeList UI Component Nouvelles fonctionnalités

Toutes les fonctionnalités mentionnées ci-dessus pour le composant Grid ont également été mis en œuvre dans le Tr eeListà savoir :

• 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.

Telerik Blazor Pager—Enregistrements par page DropDownList

Pages Count Input

En plus d'utiliser des boutons pour naviguer dans le composant de pager, nous avons également ajouté une option de saisie pratique qui permet aux utilisateurs de saisir une valeur numérique et de naviguer vers la page respective. peut être obtenu en définissant le paramètre Pager InputType sur des boutons ou une entrée numérique.

Telerik Blazor Pager—Aller à l'entrée de la page

Paramètres du pager dans Grid, TreeList et ListView

Parce que nous intégrons en interne le composant Pager UI dans nos composants Grid, TreeList et ListView Blazor , nous nous sommes assurés qu'ils reçoivent toutes les nouvelles Améliorations des paramètres du pager gonfler. Pour en profiter, vous pouvez les configurer comme suit :

1. Dans la Grid ajoutez la balise GridPagerSettings dans  :

   <GridPagerSettings InputType= "@PagerInputType.Input" PageSizes="@PageSizes" />

   <GridSettings>

        <[19659100]GridPagerSettings InputType="@PagerInputType.Input" PageSizes="@PageSizes" />

         [194590]

        <GridPagerSettings InputType="@PagerInputType.Butons" PageSizes="@PageSizes" ButtonsCount="10"/>

   </GridSettings>

2. Réalisez analogiquement la même configuration du pager dans la TreeList :

   <TreeListSettings>

       <TreeListSettings[1965959101]InputType[1965959102] "@PagerInputType.Input" PageSizes="@PageSizes" />

        

        <TreeListPagerSettings InputType="@PagerInputType.Butons" PageSizes="@PageSizes" ButtonsCount="10 "/>

   </TreeListSettings>

3. Et dans Blazor ListView, vous pouvez configurer le pager comme suit :

   <ListViewSettings>

           <ListViewPagerSettings InputType 19659102]="@PagerInputType.Input" PageSizes="@PageSizes" />

            

   <ListViewPagerSettings InputType="@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.