Top 5 des fonctionnalités de Telerik UI pour Blazor Grid pour les développeurs

Un développeur partage ses cinq fonctionnalités préférées de l’interface utilisateur Telerik pour Blazor Grid.

Les grilles sont l’un des composants les plus importants dans le monde du développement Web, vous permettant de travailler avec des données tabulaires. Sans aucun doute, plus le composant que nous utilisons possède de fonctionnalités, plus les personnalisations que vous pouvez réaliser dans les applications de vos clients sont importantes.

C’est pourquoi, dans cet article, je vais vous parler de cinq fonctionnalités puissantes de l’interface utilisateur Progress Telerik pour Grille Blazor contrôle qui vous en fera tomber amoureux. Commençons !

1. Fonctionnalités intelligentes de l’IA

Saviez-vous qu’il est possible d’ajouter de l’IA à une Blazor Grid ? L’IA n’était-elle pas uniquement destinée à écrire des articles, des poèmes, etc. ? La vérité est que non. L’équipe Progress Telerik a travaillé très dur pour équiper Grid de fonctionnalités uniques basées sur l’IA. Imaginez pouvoir filtrer les données avec une seule instruction pour trouver uniquement les informations qui vous intéressent ou pour trier les enregistrements en langage naturel.

Pour y parvenir, vous devez d’abord installer le package NuGet Telerik.AI.SmartComponents.Extensions. Ensuite, vous devez disposer d’un composant de type page dans lequel vous utilisez le Composant Blazor DataGrid. Il est également indispensable d’avoir un client configuré pouvant se connecter à un service d’IA, comme OpenAI, Azure OpenAI, un modèle local, etc. Dans mon cas, je combinerai l’utilisation d’Azure OpenAI avec Microsoft.Extensions.AI à injecter un ChatClient en utilisant Blazor.

L’étape suivante consiste à attribuer le @ref propriété de votre TelerikGrid composant une référence déclarée dans la section code de type TelerikGridqui utilise le type générique basé sur le modèle qui sous-tend les informations affichées dans la grille :

<TelerikGrid Data="@GridData"
             Height="400px" @ref="GridRef">
            ...
</TelerikGrid>
@code {
    public TelerikGrid<Employee> GridRef { get; set; }
    ...
}

Le type générique sera utilisé pour déterminer la meilleure opération à exécuter en fonction de l’invite de l’utilisateur via le modèle d’IA. Maintenant, de retour dans le TelerikGrid composant, vous devez ajouter un GridToolBar section où vous pouvez inclure le GridToolBarAIAssistantTool outil, définition du PromptSuggestions propriété pour afficher une liste de suggestions d’invite, ainsi que le OnPromptRequest propriété, qui permettra de traiter la demande de l’utilisateur :

<TelerikGrid Data="@GridData"
             Height="400px" @ref="GridRef">
    <GridToolBar>
        <GridToolBarAIAssistantTool>
            <GridToolBarAIAssistantToolSettings>
                <GridToolBarAIAssistantToolPromptSettings OnPromptRequest="@OnAIPromptRequest"
                                                          PromptSuggestions="@AIPromptSuggestions">
                </GridToolBarAIAssistantToolPromptSettings>
            </GridToolBarAIAssistantToolSettings>
        </GridToolBarAIAssistantTool>
    </GridToolBar>
</TelerikGrid>    

Dans la section code, vous devez ajouter la liste des suggestions d’invite, ainsi que le gestionnaire d’événements :

@code {

    public TelerikGrid<Employee> GridRef { get; set; }
    private List<string> AIPromptSuggestions { get; set; } = new List<string>
    {
        "Order Employees by Position",
        "Group by Department",
        "Highlight only Active Employees"
    };

    private async Task OnAIPromptRequest(AIPromptPromptRequestEventArgs args)
    {
        try
        {

            var options = new ChatCompletionOptions();            

            var requestData = GridRef.GetAIRequest(args.Prompt);

            ChatTools.AddGridChatTools(
                    requestData.Columns.Select(x => new GridAIColumn
                    {
                        Field = x.Field,
                        Values = x.Values
                    }).ToList(),
                    options
                );

            var conversationMessages = requestData.Contents
                .Select(m => new UserChatMessage(m.Text))
                .ToList();

            var chatService = MyChatClient.GetService<ChatClient>();
            var result = await chatService.CompleteChatAsync(conversationMessages, options);

            ChatCompletion completion = result.Value;

            var gridOptions = completion.ToolCalls.ExtractGridOptions();
            
            var json = System.Text.Json.JsonSerializer.Serialize(gridOptions, new System.Text.Json.JsonSerializerOptions { WriteIndented = true });

            args.Output = $"The request was processed. {string.Join(". ", aiResponse.Messages)}.";
            args.Response = json;            
        }
        catch (Exception)
        {
            args.Output = "The request returned no results. Try another request.";
        }
    }
    ...

Dans mon exemple, j’ai créé ce code directement dans le gestionnaire d’événements ; cependant, vous pouvez choisir de l’ajouter dans un API Web tapez projet. Que se passe-t-il dans le OnAIPromptRequest la méthode est la suivante :

1. Des options de complétion sont créées, qui serviront à ajouter plus d’outils ultérieurement.
2. Sur la base de la référence Grid, une requête AI est créée en fonction des données du modèle et de l’invite.
3. Les outils sont exposés à partir des informations des colonnes de la grille.
4. Une série de UserChatMessage sont créés à partir de l’invite de l’utilisateur.
5. Un service Chat est créé pour utiliser le CompleteChatAsync méthode pour générer une réponse IA.
6. Par la suite, la valeur du résultat est obtenue et le ExtractGridOptions La méthode est exécutée, qui extraira les opérations les plus pratiques à exécuter sur la grille en fonction de la réponse de l’IA.
7. Le résultat est sérialisé pour le rendre compatible avec le Respose propriété, utilisée plus tard.
8. Un objet de type GridAIResponse est créé, dans le but d’obtenir au format texte les opérations qui seront appliquées aux données. Les messages en texte brut seront affichés à l’utilisateur.
9. À travers le Output propriétés, des messages en texte brut sont affichés à l’utilisateur concernant le résultat de l’exécution, tandis que la chaîne JSON est affectée au Response propriété pour exécuter l’opération sur les données.

Le résultat de l’exécution est ce que vous pouvez voir ci-dessous :

Dans l’image ci-dessus, vous pouvez voir comment les opérations de tri et de regroupement sont effectuées via des invites en langage naturel.

2. Virtualisation pour les applications hautes performances

Bien que dans la suite Telerik pour Blazor nous ayons un composant de pagination, il y a des moments où vous devrez ignorer son utilisation. Dans ces cas, il est plus pratique d’utiliser la virtualisation des lignes, qui permettra uniquement aux lignes visibles à l’écran d’être restituées lorsque l’utilisateur fait défiler.

Ceci est rendu possible par une technique de recyclage des éléments HTML. Cette approche évite de charger toutes les lignes en même temps, ce qui rend la navigation fluide. Je veux que vous observiez l’image suivante, où je charge 10 000 enregistrements dans l’interface utilisateur, ce qui fait que le processus de chargement de la page prend quelques secondes :

Pour activer la virtualisation, vous devez suivre quelques étapes simples :

1. Modifier le paramètre ScrollMode avec une valeur GridScrollMode.Virtual.
2. Attribuer une valeur CSS au paramètre Height.
3. Définir le paramètre RowHeight à une valeur décimale en pixels.
4. Attribuer le paramètre PageSize.

Vous pouvez voir ci-dessous un exemple de configuration de composant avec un mode de virtualisation :

<TelerikGrid Data="@GridData"
             Height="400px" @ref="GridRef"
             ScrollMode="GridScrollMode.Virtual"
             PageSize="20"
             RowHeight="40">
             ...
</TelerikGrid>             

Si nous exécutons l’application avec cette modification, nous verrons une amélioration notable :

Sans aucun doute, ce petit changement représente une amélioration de l’interaction avec l’application.

3. Plusieurs modes d’édition et validation intégrée

Contrairement à plusieurs solutions de grille disponibles sur le marché pour Blazor, le contrôle Telerik Grid propose trois modes d’édition, ce qui offre sans aucun doute une plus grande flexibilité dans la création de solutions Web. Les modes disponibles sont :

• Dans la cellule: Permet l’édition par cellule
• En ligne: Permet l’édition par ligne
• Surgir: Permet l’édition via un formulaire contextuel

Pour mettre en œuvre l’un de ces modes, vous devez suivre une série d’étapes :

1. Activez l’un de ces modes en utilisant le EditMode propriété, attribution des valeurs GridEditMode.InCell, GridEditMode.Inline ou GridEditMode.Popup.
2. Définissez les commandes et les événements pour le mode d’édition et les opérations.

Pour notre exemple, je vais créer un bouton pour pouvoir éditer l’élément et son gestionnaire d’événements respectif :

<TelerikGrid Data=@GridData                          
             ...
             EditMode="GridEditMode.Popup"
             OnUpdate="@OnGridUpdate">
             ...
            <GridColumns>
                ...
                <GridCommandColumn Width="180px">
                    <GridCommandButton Command="Edit">Edit</GridCommandButton>
                </GridCommandColumn>
            </GridColumns>
</TelerikGrid>

@code {
    private async Task OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedEmployee = (Employee)args.Item;
        var target = GridData.FirstOrDefault(e => e.Id == updatedEmployee.Id);
        if (target != null)
        {
            target.Name = updatedEmployee.Name;
            target.Position = updatedEmployee.Position;
            target.Department = updatedEmployee.Department;
            target.Salary = updatedEmployee.Salary;
            target.HireDate = updatedEmployee.HireDate;
            target.IsActive = updatedEmployee.IsActive;
        }
    }
    
    private async Task OnGridRead(GridReadEventArgs args)
    {
        args.Data = GridData;
        args.Total = GridData.Count;
    }
    ...
}

De même, si l’on utilise Annotations de données dans les modèles, nous aurons une validation automatique. Par exemple, supposons que nous ayons la propriété suivante :

[MaxLength(10)]
public string Position { get; set; } = string.Empty;

En combinant un mode d’édition et des Annotations de Données, nous obtiendrons un résultat comme le suivant :

4. Prise en charge des structures hiérarchiques maître-détail

La prochaine fonctionnalité que j’aime dans l’interface utilisateur Telerik pour Blazor DataGrid est la possibilité de créer des hiérarchies au sein du composant, ce qui n’est pas très courant dans les composants de grille de données. Bien que cela puisse sembler une opération complexe à mettre en œuvre, vous pouvez l’activer avec seulement quelques lignes de code.

Ceci est rendu possible par le DetailTemplate balise, qui permet d’accéder au modèle de la ligne sélectionnée via la context paramètre. En effectuant une conversion vers le type spécifique de votre modèle de contexte, vous pouvez accéder aux propriétés détaillées de votre ligne et les afficher avec le composant ou le format que vous préférez, bien qu’il soit courant d’utiliser une autre grille de données pour cette tâche.

Supposons que dans le cadre d’un modèle d’employé, vous disposiez d’une propriété qui affiche les projets associés à chaque employé, comme suit :

    public class Employee
    {
        public int Id { get; set; }
        ...
        public List<EmployeeProject> Projects { get; set; } = new List<EmployeeProject>();        
    }

Dans le composant, vous devez ajouter la section DetailTemplate comme indiqué ci-dessous :

<TelerikGrid Data=@GridData>
    <DetailTemplate Context="employeeContext">
        @{
            var employee = employeeContext as Employee;
            <TelerikGrid Data="employee.Projects" Pageable="true" PageSize="5">
                <GridColumns>
                    <GridColumn Field="@nameof(EmployeeProject.Id)" Title="Project ID"></GridColumn>
                    <GridColumn Field="@nameof(EmployeeProject.ProjectName)" Title="Project Name"></GridColumn>
                    <GridColumn Field="@nameof(EmployeeProject.Status)" Title="Status"></GridColumn>
                    <GridColumn Field="@nameof(EmployeeProject.CompletionPercentage)" Title="Progress %"></GridColumn>
                    <GridColumn Field="@nameof(EmployeeProject.StartDate)" Title="Start Date">
                        <Template>
                            @{
                                var project = context as EmployeeProject;
                            }
                            @project?.StartDate.ToString("MMM dd, yyyy")
                        </Template>
                    </GridColumn>
                </GridColumns>
            </TelerikGrid>
        }
    </DetailTemplate>
    ...
</TelerikGrid>

Dans le code ci-dessus, il y a quelques points à souligner :

1. Le nom employeeContext est défini comme le nom du contexte.
2. Un TelerikGrid est créé pour afficher les informations détaillées, associant les données de propriété de détails, en plus d’autres propriétés telles que la pagination et le nombre d’éléments par page.
3. La structure de la grille est spécifiée grâce à l’utilisation de plusieurs GridColumn.

Et c’est tout ! Il n’y a plus rien à faire. L’exécution nous donne le résultat suivant :

5. Exportation intégrée vers plusieurs formats

La dernière fonctionnalité dont nous discuterons est la possibilité d’exporter des données depuis la grille pour Blazor. Nativement, il est possible d’exporter des informations aux formats CSV, Excel et PDFqui sont des formats courants dans ce type de scénarios. Ce que j’aime le plus dans cette fonctionnalité, c’est qu’elle est très simple à mettre en œuvre.

Tout d’abord, vous devez ajouter le GridToolBar section l’outil du type de format que vous souhaitez utiliser. De plus, vous devez également définir une section GridExport dans laquelle vous spécifiez le type d’exportateur, comme indiqué ci-dessous.

Pour exporter vers CSV format:

<TelerikGrid Data=@GridData
            ...>
        <GridToolBar>
            <GridToolBarCsvExportTool>
                Export to CSV
            </GridToolBarCsvExportTool>
        </GridToolBar>

        <GridExport>
            <GridCsvExport FileName="telerik-grid-export" />
        </GridExport>
</TelerikGrid>            

Pour exporter vers Exceller format:

<TelerikGrid Data=@GridData
            ...>
        <GridToolBar>
            <GridToolBarExcelExportTool>
                Export to Excel
            </GridToolBarExcelExportTool>
        </GridToolBar>

        <GridExport>
            <GridExcelExport FileName="telerik-grid-export" />
        </GridExport>
</TelerikGrid>  

Pour exporter vers PDF format:

<TelerikGrid Data=@GridData
            ...>
        <GridToolBar>
            <GridToolBarPdfExportTool>
                Export to PDF
            </GridToolBarPdfExportTool>
        </GridToolBar>

        <GridExport>
            <GridPdfExport FileName="telerik-grid-export"/>
        </GridExport>
</TelerikGrid>  

Vous devez savoir que chaque exportateur possède des propriétés uniques que vous pouvez spécifier pour indiquer des données, telles que l’orientation, le format du papier, le nom du fichier, entre autres détails, que vous pouvez trouver dans le documentation officielle du composant Telerik UI pour Blazor DataGrid.

Pour mon exemple, j’ai configuré l’exportateur vers Excel, ce qui permet un export dans ce format comme le montre l’image suivante :

Conclusion

Tout au long de cet article, vous avez vu que le composant Telerik UI pour Blazor DataGrid est l’un des meilleurs contrôles existants pour afficher des informations tabulaires. De la prise en charge de l’intégration de modèles d’IA à la création de hiérarchies, l’utilisation de ce composant dans vos projets Blazor permettra sans aucun doute à vos applications de se démarquer.

Pour essayer l’interface utilisateur Telerik pour Blazor Grid et plus de 120 autres composants, commencez avec l’essai gratuit de 30 jours :

Essayez l’interface utilisateur Telerik pour Blazor