Fermer

avril 22, 2020

Nouvelles fonctionnalités de grille et bien plus encore!


La deuxième version d'avril de Telerik UI for Blazor est arrivée et propose plusieurs nouvelles fonctionnalités de Blazor Grid, des améliorations du planificateur, la compatibilité de WebAssembly 3.2.0 Preview 4 et bien plus encore.

Plongeons dans le nouvelle version 2.11.0 de Telerik UI pour Blazor. Nous couvrirons toutes les dernières mises à jour et examinerons en détail la virtualisation des colonnes de grille, les modèles imbriqués de grille et les colonnes générées automatiquement par grille que vous pouvez rapidement activer dans vos applications Blazor!

L'interface utilisateur Telerik pour Blazor prend désormais en charge Blazor WebAssembly 3.2.0 Preview 4

L'aperçu 4 de Blazor WebAssembly est sorti et il est livré avec de nombreuses fonctionnalités attendues telles que la journalisation, la précompression Brotli, la mondialisation et la localisation et plus encore!

Comme toujours, les versions de Telerik UI for Blazor vont de pair avec les versions d'aperçu publiées par Microsoft. Nous sommes heureux d'annoncer que la dernière version de Telerik UI pour Blazor 2.11.0 est compatible avec la version 4 de Blazor WebAssembly 3.2.0.

Virtualisation de la colonne de la grille Blazor

Présentation de la virtualisation de la colonne de la grille

La virtualisation de la colonne de la grille est un excellent ajout pour tous ceux qui doivent gérer un grand nombre de colonnes dans la grille de données Blazor et rechercher des moyens de optimiser à la fois l'expérience utilisateur et les performances.

 Virtualisation de la colonne de grille Telerik Blazor "title =" Virtualisation de la colonne Telerik Blazor Grid "/><p align= Interface utilisateur Telerik pour Blazor Grid Column Virtualization

Activer Grid Virtual Columns

Pour activer la virtualisation, définissez la propriété Grid ColumnVirtualization sur true, activez la barre de défilement horizontale et appliquez des paramètres à la largeur, la hauteur et la hauteur de ligne de la grille comme indiqué dans le exemple ci-dessous:

< TelerikGrid Data = "@ MyData" Largeur = "800px" Hauteur = [19659016] "400 px" RowHeight = "65"

ColumnVirtualization = "true" Pageable = "true" PageSize = "5" >

Combinaison des colonnes et des lignes virtuelles de la grille

Vous pouvez facilement combiner les colonnes virtuelles virtualisées et les colonnes virtualisées Associe les lignes en définissant ScrollMode = "GridScrollMode.Virtual" et ColumnVirtualization = "true".

Consultez un exemple o f comment combiner les colonnes et les lignes virtualisées de la grille dans Blazor.

Les colonnes virtualisées générées automatiquement par la grille

La virtualisation des colonnes de la grille fonctionne bien avec les colonnes générées automatiquement dans la grille Blazor. Comme AutoGenerateColumns est une nouvelle fonctionnalité de grille, vous pouvez en savoir plus à ce sujet dans la section ci-dessous.

Découvrez un exemple d'activation des colonnes virtualisées générées automatiquement dans Blazor Grid.

Blazor Grid Colonnes générées automatiquement

Présentation des grilles AutoGenerateColumns

Pour les cas où vous souhaitez afficher une liste de colonnes dans une grille qui correspondent exactement à votre modèle de données, vous pouvez désormais utiliser le nouveau paramètre Grid AutoGenerateColumns. Définissez-le sur "true" et utilisez l'extrait de code super simple pour générer une grille Blazor (comme illustré dans l'exemple ci-dessous):

< TelerikGrid Data = "@ GridData" AutoGenerateColumns = "true"

Pageable = "true" PageSize = "10" >

</ TelerikGrid >

Cela simplifie la définition des colonnes de la grille et génère automatiquement une colonne pour chaque propriété publique de son modèle plutôt que de définir chaque colonne manuellement. Si vous n'avez pas besoin de colonnes déclarées explicitement (comme une colonne de commande ou des colonnes figées), la balise n'est pas requise.

Personnalisations avec la grille AutoGenerateColumns

Les paramètres des colonnes de la grille peuvent être adaptés à l'aide de plusieurs attributs de personnalisation disponible qui vous permet de spécifier des titres de colonne alternatifs, un ordre de colonne spécifique, une largeur différente de celle générée dans la balise et plus encore.

Vous pouvez utiliser des attributs d'annotation de données pour définir les titres de colonne, interdire ou masquer la modification du champ de la grille , valider les données et plus encore. Consultez l'exemple de code illustrant le comportement des colonnes générées automatiquement à l'aide d'attributs personnalisés.

Blazor Grid Nested Models

Les données que vous liez à la grille peuvent avoir des objets complexes dans son modèle, pas seulement des types primitifs, et le composant Grid peut désormais afficher des propriétés complexes (imbriquées, de navigation) hors du -box à partir de 2.11.0.

Un exemple sur la façon d'utiliser des modèles complexes avec des propriétés de navigation dans la grille sans aplatir le modèle peut être trouvé dans l'article dédié .

Vue mensuelle du planificateur Blazor

Un autre composant préféré qui a été amélioré avec cette version est le Blazor Scheduler. En plus des vues du Planificateur existantes – Jour, MultiJour et Semaine, nous avons ajouté la vue Mois du planificateur .

 Vue mensuelle du planificateur Telerik UI Blazor "title =" Vue mensuelle du planificateur Telerik UI Blazor "data-openoriginalimageonclick = "true" /> </a data-recalc-dims=

Interface utilisateur Telerik pour le planificateur Blazor Vue mensuelle

La vue Mois du planificateur pour Blazor affiche le mois entier à l'utilisateur. Pour que la vue du mois soit bien organisée, chaque plage de jours affiche jusqu'à deux événements . Dans les cas où il y a plus de deux rendez-vous par jour, un bouton de points de suspension permet d'accéder à la vue détaillée de la journée pour le jour spécifique.

Vous pouvez activer plusieurs vues simultanément, afin que vos utilisateurs puissent facilement basculer vers la manière préférée pour les événements. visualisé dans le planificateur, comme illustré dans l'exemple ci-dessous.

< TelerikScheduler Data = "@ Appointments" @ bind-Date = [19659016] "@ StartDate" @ bind-View = [19659016] "@ selectedView" Hauteur = "600px" >

< Vues de l'agenda >>

< SchedulerMonthView > </ SchedulerMonthView > [19659005] < SchedulerDayView StartTime = "@ (new DateTime (2000, 1, 1, 7, 0, 0))" " > </ SchedulerDayView >

</ SchedulerViews >

</ TelerikScheduler >

Télécharger Telerik UI pour Blazor 2.11.0

Dirigez-vous vers l'interface utilisateur Telerik pour Page Blazor téléchargez la version 2.11.0 de Telerik UI pour Blazor et sp glacez votre Blazor Data Grid. Continuez à nous dire ce qui fonctionne bien, ce qui doit changer et ce que vous aimeriez voir ensuite dans le portail dédié de commentaires Blazor ou dans la section des commentaires ci-dessous!

Merci!

Comme toujours , nous tous de votre équipe Telerik Blazor chez Progress vous remercions de votre implication et de nous avoir aidés à grandir et à rendre Telerik UI for Blazor plus grand et meilleur!





Source link