Principes de base des composants de la grille de données Blazor UI pour Telerik

La grille de données de l'interface utilisateur de Telerik pour Blazor comprend des fonctionnalités telles que la pagination, le tri, les modèles et les thèmes prêts à l'emploi. Apprenez à vous familiariser avec les fonctionnalités de base de la grille aujourd'hui.

L'interface utilisateur de Telerik pour Blazor est une toute nouvelle bibliothèque de composants d'interface utilisateur pour les frameworks Razor Components et Blazor. Même si l'interface utilisateur de Telerik pour Blazor est à l'étape "Aperçu préliminaire", elle est livrée avec l'un des composants d'interface utilisateur les plus populaires et les plus polyvalents, la grille de données. La grille de données comporte des fonctionnalités prédéfinies telles que la pagination, le tri, les modèles et les thèmes. Dans cet article, nous allons expliquer comment utiliser les fonctionnalités de base de la grille.

Conditions préalables

Les aperçus ASP.NET évoluant rapidement, il est préférable de mettre à jour votre morceaux. Assurez-vous que vous utilisez la version actuelle de Razor Components (côté serveur) et de Blazor (côté client), car nous allons travailler avec les deux. Vous trouverez des instructions d'installation détaillées pour les deux cadres dans la page de démarrage Blazor .

Assurez-vous également que vous avez activé l'aperçu anticipé gratuit Telerik UI pour Blazor . Même si vous vous êtes déjà inscrit à l'aperçu, vous devrez peut-être revoir cette page pour que la dernière version apparaisse dans votre flux. Avec ce compte gratuit, vous pourrez ajouter la source Telerik NuGet Package .

Avant de commencer, vous vous demandez peut-être pourquoi l'espace de noms Kendo apparaît lorsque vous utilisez l'interface utilisateur Telerik pour Blazor. . En effet, l'interface utilisateur Telerik pour Blazor partage les ressources Web (HTML et CSS) avec la marque de composants Kendo UI .

Installation

L'installation de Telerik UI pour Blazor ne nécessite que quelques étapes simples. Nous devons d’abord installer les fichiers binaires du paquet. Nous allons utiliser la source de paquet Telerik NuGet pour installer le paquet. Si vous ne disposez pas déjà de la source de paquet Telerik, veuillez consulter la section Conditions préalables ci-dessus.

Si votre projet contient plusieurs solutions, installez-le dans le projet contenant le dossier "Pages". Voici les vues pour votre application.

Nous pouvons utiliser la boîte de dialogue Gestionnaire de packages, la ligne de commande ou éditer directement le fichier .csproj de l'application.

NuGet

Ligne de commande

 $ dotnet add package Telerik.UI.for.Blazor

Edit .csproj

Une fois le package de l'interface utilisateur de Telerik pour Blazor installé, nous devrons faire référence aux composants qu'il contient. Cela agira comme une déclaration globale utilisant pour notre application. Ouvrez le fichier racine _ViewImports et ajoutez la directive @addTagHelper *, Kendo.Blazor .

_ViewImports.cshtml

 @addTagHelper *, Kendo.Blazor

Nous devons également enregistrer la bibliothèque avec injection de dépendance. Cela résoudra toutes les dépendances nécessaires aux composants. Dans la même solution, ouvrez la classe Startup et enregistrez le service AddKendoBlazor .

. AddKendoBlazor ();

Ensuite, nous devrons ajouter les fichiers de thème CSS à l'application. Au moment de la rédaction de ce manuel, Telerik UI for Blazor prend en charge trois des thèmes de Kendo UI: Default, Bootstrap 4. et Material Design.

Si votre projet contient plusieurs solutions, recherchez le projet contenant le dossier "wwwroot". Il s'agit des ressources statiques de votre application. A la racine du projet, ajoutez un fichier nommé libman.json [LibmanestungestionnairedebibliothèquecôtéclientintégréàVisualStuido(avecpriseenchargedelaCLI)quivarécupérerlesressourcesstatiquesetlesenregistrerdansvotreprojet

Ajoutez la configuration suivante à votre libman.json . Enregistrez le fichier et les trois thèmes de composant seront copiés dans votre dossier wwwroot .

 {
  "version": "1.0",
  "defaultProvider": "unpkg",
  "bibliothèques": [
    {
      "library": "@progress/kendo-theme-default@3.0.0",
      "destination": "wwwroot/css/kendo-themes/default",
      "files": [
        "dist/all.css"
      ]
    },
    {
      "bibliothèque": "@ progress / kendo-theme-bootstrap @ 3.0.0",
      "destination": "wwwroot / css / kendo-themes / bootstrap",
      "fichiers": [
        "dist/all.css"
      ]
    },
    {
      "bibliothèque": "@ progress / kendo-theme-material @ 2.0.0",
      "destination": "wwwroot / css / kendo-themes / material",
      "fichiers": [
        "dist/all.css"
      ]
    }
  ]
}

Une fois les thèmes installés, référencez le thème souhaité dans le fichier index.html de votre application.

wwwroot / Index.html

     ...
    <! - 
      ->
    

C'est ça! Nous sommes maintenant prêts à commencer à créer des applications Razor Components ou Blazor à l'aide de l'interface utilisateur Telerik pour Blazor.

Le composant Grid

L'interface utilisateur Telerik pour Blazor KendoGrid (Grid) est un composant de grille de données compatible avec les deux composants Razor. et Blazor côté client. Grâce à ces nouveaux frameworks révolutionnaires, la grille ne nécessite pas . Le composant de grille est simple à implémenter, mais dispose d'un ensemble robuste de fonctionnalités telles que la liaison de données, la pagination, le tri et les modèles. De plus, Razor Components et Blazor offrent des fonctionnalités uniques pour l’introduction de données dans le réseau. Selon le mode de fonctionnement, la source de données peut extraire directement à partir de Entity Framework (Composants Razor) ou via une requête HTTP distante (Blazor).

La grille de base est composée de quelques composants qui définissent la grille et ses colonnes. La grille elle-même et ses colonnes ont des paramètres utilisés pour activer / désactiver les fonctionnalités.

Commençons par les propriétés de base, puis nous en apprendrons davantage sur les différentes sources de données que nous pouvons utiliser.

Propriétés

Hauteur

Lorsque la hauteur de la grille est définie, la hauteur appropriée de sa zone de données défilable est calculée, de sorte que la somme des lignes d'en-tête, de la ligne de filtre, des données, du pied de page, et le pager est égal à la hauteur attendue du composant. Si la hauteur de la grille est modifiée dans le code après sa création, la grille recalcule la hauteur de sa zone de données.

Dans certains scénarios spéciaux, il est possible de définir un style de hauteur sur la zone de données défilable de la grille par CSS externe. , qui est un élément div.k-grid-content .

Données

Les données de la grille jouent un rôle central dans pratiquement toutes les applications Web créées avec l'interface utilisateur Telerik pour Blazor. Le paramètre Data accepte toutes les sources de données qui implémentent l'interface IEnumerable. Les données peuvent être fournies à partir de sources telles qu'Entity Framework, de tableaux et de listes locaux et de sources distantes telles que les requêtes HTTP via HttpClient .

 @inject WeatherForecastService ForecastService

    
     ...
    


 @functions {
    public IEnumerable  GridData {get; ensemble; }
    protégé remplacer async Task OnInitAsync ()
    {
        GridData = attend ForecastService.GetForecastAsync (DateTime.Now);
    }
}

Colonnes

Le composant KendoGridColumns est la configuration au niveau de la racine des colonnes de la grille. En dessous de KendoGridColumns sont des composants individuels KendoGridColumn . Ces composants sont interprétés comme des configurations de colonne où le paramètre Field est une chaîne à laquelle la colonne est liée. La colonne utilisera par défaut le nom de la propriété comme en-tête de colonne, mais vous pouvez le définir explicitement à l'aide du paramètre Title . Dans l'exemple ci-dessous, l'opérateur nameof est utilisé pour obtenir la représentation sous forme de chaîne de la propriété ProductName . Puisque nous avons affaire à C #, l'opérateur name of fournit un meilleur support d'outillage pour le refactoring.

Triable

Pour activer le tri sur toutes les colonnes de la grille, définissez simplement le Paramètre Sortable Lorsque le paramètre Sortable est défini sur true les utilisateurs peuvent facilement cliquer sur les en-têtes de colonne pour modifier le mode de tri des données dans la grille. ]


Paging

Avec la grille, nous contrôlons totalement le pager. Le pager peut être activé / désactivé via le paramètre Pageable . Nous pouvons également définir un PageSize et définir la valeur initiale Page .

  `

Modèles

Lorsque nous souhaitons plus de flexibilité dans l'affichage de nos données, nous pouvons Exploitez les caractéristiques du modèle de la grille. Dans n'importe quelle colonne, ouvrez simplement un composant Template et accédez à une référence d'objet à l'élément en cours lié à une ligne donnée. Le contenu Template peut contient des balises HTML, du code Razor ou même d'autres composants.

 
    
        
        
        
            
        
    


 @functions {
    public IEnumerable  GridData {get; ensemble; }

    protégé remplacer async Task OnInitAsync ()
    {
        GridData = wait nwContext.Products.ToListAsync ();
    }
}

Obtention de données

La grille utilisant l'interface IEnumerable pour sa source de données, la liaison de données est très flexible. Selon le contexte dans lequel votre application s'exécute, soit Razor Components (côté serveur) ou Blazor (côté client), les exigences de connexion aux données peuvent être différentes. Voyons comment l'injection de dépendance permet de connecter notre grille à une source de données.

Razor Components (opération côté serveur)

Étant donné que Razor Components s'exécute dans le contexte du serveur, nous pouvons nous connecter à directement aux données via Entity Framework. L'un des avantages de l'utilisation de Razor Components est que notre application n'a pas besoin de créer une requête HTTP pour se connecter aux données.

Nous allons utiliser l'injection de dépendance pour référencer une instance du contexte de notre base de données. enregistrer notre service au démarrage. Dans la méthode ConfigureServices de la classe de démarrage:

 public void ConfigureServices (services IServiceCollection)
{
    var connection = "ma-chaîne-de-connexion";
    var options = new DbContextOptionsBuilder  ()
                        .UseSqlServer (connexion)
                        .Options;
    services.AddSingleton (nouveau NorthwindContext (options));
    ...
}

Avec notre DbContext enregistré avec injection de dépendance, nous pouvons maintenant injecter le contexte sur notre page en utilisant la directive @inject . Inject résoudra une référence à une instance du NorthwindContext et l'attribuera à la variable nwContext . Lorsque la page est initialisée, nous appelons ToListAsync dans le jeu de données Products et mettons à jour la propriété GridData avec les résultats. Étant donné que la propriété GridData est liée à la grille, elle sera mise à jour à la fin de OnInitAsync .

 @using TelerikBlazor.App.Models // Le produit est défini ici.
@inject NorthwindContext nwContext



    
        
        
        
            
        
    


 @functions {
    public IEnumerable  GridData {get; ensemble; }
    int PageSize = 10;
    bool Pageable = false;
    booléable Sortable = false;
    Hauteur décimale = 400;

    protégé remplacer async Task OnInitAsync ()
    {
        GridData = wait nwContext.Products.ToListAsync ();
    }
}

Maintenant que nous avons vu le fonctionnement des opérations côté serveur, voyons comment utiliser la grille avec Blazor.

Blazor (opération côté client)

Interface utilisateur Telerik pour Blazor est compatible sur le client, mais a actuellement un problème connu qui nécessite la désactivation de Blazor IL Linker. Sans creuser trop profondément dans IL Linking, le résultat de sa désactivation ne fait qu’accroître la taille de la charge utile. Il s'agit d'une situation temporaire qui sera résolue dans les versions ultérieures du cadre.

Pour désactiver IL Linker, ouvrez le fichier .csproj et ajoutez false au groupe de propriétés le plus haut.

  
     .. .
     7.3 
    
     false 
  

Semblable au fonctionnement côté serveur, nous utiliserons la directive @inject . Sur le client, notre application est déconnectée de la base de données et nous devrons faire une requête HTTP pour les données. Au lieu d'injecter notre DbContext, nous allons plutôt résoudre une instance de HttpClient. Lorsque la page sera initialisée, nous ferons une requête HTTP à l'aide de GetJsonAsync et mettrons à jour la propriété GridData avec les résultats. Étant donné que la propriété GridData est liée à la grille, elle sera mise à jour à la fin de OnInitAsync .

 @using WebApplication6.Shared // WeatherForecast est défini ici.
@inject HttpClient Http


    
        
        
    



@les fonctions {
    Prévisions WeatherForecast [];

    protégé remplacer async Task OnInitAsync ()
    {
        prévisions = wait Http.GetJsonAsync  ("api / SampleData / WeatherForecasts");
    }
}

The Grid fonctionne avec Razor Components et Blazor en utilisant le même balisage. Le seul aspect du code qui change est la manière dont les données sont récupérées.

Résumé (1965)

L'interface utilisateur de Telerik pour Blazor Early Preview a été lancée avec l'un des composants les plus populaires et les plus puissants, la grille. Nous avons vu comment la grille peut rapidement utiliser la pagination, le tri, les modèles et les thèmes. En exploitant les frameworks Razor Components ou Blazor, nous pouvons extraire des données directement à partir de notre base de données ou de HTTP et lier facilement la source de données.

Nous n'avons abordé que les fonctionnalités de base de la grille, mais nous pouvons faire beaucoup plus avec des modèles. Dans un prochain article, nous examinerons de plus près les modèles de lignes et de colonnes pour voir ce qui est possible.

de Telerik UI for Blazor . Une fois que vous vous êtes inscrit, n'hésitez pas à explorer nos nombreux exemples sur GitHub. et code heureux.