Commencer avec le contrôle de la feuille de calcul du blazor

Découvrez le puissant composant de la feuille de calcul Telerik pour Blazor et comment il peut ajouter des expériences Excel à votre application Blazor.

Avez-vous déjà voulu créer une application Web avec une interface similaire à une feuille de calcul Excel? Dans cet article, vous apprendrez sur le Feuille de calcul Telerik pour Blazor Composant et comment l’intégrer dans vos propres applications Blazor. Commençons!

Qu’est-ce que le composant de calcul du blazor?

Le Composant de feuille de calcul du blazor de progrès Telerik UI pour Blazor Vous permet d’ajouter un contrôle à vos applications pour afficher et modifier les données dans un format tabulaire, très similaire à Excel, ce qui permet à vos utilisateurs de s’acclimater facilement. Le contrôle de la feuille de calcul est si puissant qu’il permet aux utilisateurs d’effectuer des tâches telles que l’application des styles aux cellules, la mise en forme des valeurs, en utilisant des liens, l’insertion d’images, l’utilisation de formules et l’application d’une vaste collection de fonctions mathématiques, entre autres fonctionnalités.

Comment intégrer le composant de feuille de calcul Blazor dans vos applications Blazor

Pour ajouter un composant de feuille de calcul à votre application Blazor, vous devez d’abord suivre le Guide d’installation des composants du blazor. Ensuite, ajoutez le composant à la page où vous souhaitez l’utiliser, comme illustré dans l’exemple suivant:

@page "/spreadsheet"

<TelerikSpreadsheet>
</TelerikSpreadsheet>

@code {

}

En exécutant l’application Blazor, vous pourrez voir le composant de feuille de calcul affichée sur votre page:

C’est assez facile, non?

Chargement des données dans une feuille de calcul Blazor à partir du code

Le composant de feuille de calcul a un Data paramètre de type byte[] que nous pouvons utiliser au cas où nous devons charger des informations via le code. Par exemple, j’ai téléchargé un déposer À propos des noms de bébé les plus populaires de New York il y a plusieurs années, l’a converti en format Excel et l’a ajouté dans le cadre de mon projet au niveau racine. Pour le charger, nous avons juste besoin de lire le fichier sous forme de tableau d’octets et de l’attribuer à une variable ou une propriété liée au composant de feuille de calcul, comme indiqué ci-dessous:

@page "/spreadsheet"
@inject HttpClient HttpClient

<TelerikSpreadsheet Data="SpreadsheetData">
</TelerikSpreadsheet>

@code {

    private byte[]? SpreadsheetData { get; set; }   
    
    protected override async Task OnInitializedAsync()
    {
        SpreadsheetData = System.IO.File.ReadAllBytes("Popular_Baby_Names.xlsx");

        await base.OnInitializedAsync();
    }    
}

Après avoir exécuté l’application avec la modification ci-dessus appliquée, vous pourrez voir le résultat suivant:

Il est important de savoir que le composant de la feuille de calcul se compose d’un Ensemble d’outils de feuille de calcul (Menu + barre d’outils). Cet ensemble d’outils, à son tour, est composé d’un ou plusieurs Éléments de jeu d’outilsqui peut finalement contenir un ou plusieurs outils. Voici un exemple de sa structure hiérarchique pour plus de clarté:

Vous pouvez afficher la liste complète des outils et leur appartenance aux ensembles d’outils à Ce lien dans la documentation officielle. Connaître ces informations est essentiel car il est possible de personnaliser le menu en ajoutant, en supprimant et en réorganisant les outils en fonction de vos besoins.

Pour obtenir une référence aux ensembles d’outils appartenant à une feuille de calcul, vous devez lier le Tools propriété de la feuille de calcul à une propriété de type SpreadsheetToolSetcomme indiqué dans l’exemple suivant:

@page "/spreadsheet"
...

<TelerikSpreadsheet Data="SpreadsheetData" Tools="@DefaultToolsWithCustomizations">
</TelerikSpreadsheet>

@code {    

    private SpreadsheetToolSet DefaultToolsWithCustomizations { get; set; } = SpreadsheetToolSets.All;
    
    ...

    protected override async Task OnInitializedAsync()
    {
       ...

        var toolSetItems = DefaultToolsWithCustomizations.Items;
       
        await base.OnInitializedAsync();
    }    
}

En exécutant le code ci-dessus, vous verrez que le Items La propriété contient une liste des noms de jeu d’outils disponibles dans le composant:

Avec cette instance, nous pouvons effectuer différentes actions, comme je vais vous le montrer ci-dessous.

Modification du titre d’un ensemble d’outils

Supposons que nous voulons modifier le texte de l’ensemble d’outils nommé Maison en le remplaçant par le texte Commencer. Pour y parvenir, nous pourrions filtrer le Items propriété pour le Title propriété avec la valeur souhaitée, puis remplacez-la par la nouvelle valeur comme indiqué dans l’exemple suivant:

protected override async Task OnInitializedAsync()
{
    SpreadsheetData = System.IO.File.ReadAllBytes("Popular_Baby_Names.xlsx");

    var toolSetItems = DefaultToolsWithCustomizations.Items;
    var homeToolSet = toolSetItems.FirstOrDefault(x => x.Title == "Home");
    homeToolSet.Title = "Start";

    await base.OnInitializedAsync();
}    

Modification des outils dans un ensemble d’outils

Le contrôle de la feuille de calcul nous permet d’apporter des modifications aux outils à l’intérieur des ensembles d’outils. Par exemple, nous pouvons ajouter des éléments, les supprimer, les réorganiser, parmi de nombreuses autres actions.

Par exemple, vous pouvez ajouter l’outil pour insérer des images au Home (renommé Start) Ensemble d’outils comme suit:

protected override async Task OnInitializedAsync()
{
    SpreadsheetData = System.IO.File.ReadAllBytes("Popular_Baby_Names.xlsx");

    var toolSetItems = DefaultToolsWithCustomizations.Items;

    var homeToolSet = toolSetItems.FirstOrDefault(x => x.Title == "Home");

    homeToolSet.Title = "Start";

    homeToolSet.Tools.Add(new SpreadsheetInsertImageTool
    {
            Title = "Insert Image"
    });

    await base.OnInitializedAsync();
}  

Depuis le Tools La propriété est une liste, nous pouvons travailler avec elle en utilisant nos connaissances antérieures des opérations de liste.

Création d’un ensemble d’outils personnalisé

Si vous ne souhaitez pas modifier les ensembles d’outils prédéfinis et préférez plutôt créer un ensemble d’outils à partir de zéro avec vos outils préférés, vous pouvez créer une nouvelle instance du SpreadsheetToolSet type lié au Tools propriété, puis affecter le Items propriété Une nouvelle liste d’éléments de jeu d’outils, comme indiqué dans l’exemple suivant:

@page "/spreadsheet"
@using Telerik.Blazor.Components.Spreadsheet
@inject HttpClient HttpClient

<TelerikSpreadsheet Tools="@SpreadsheetTools">
</TelerikSpreadsheet>

@code {

    private byte[]? SpreadsheetData { get; set; }

    private SpreadsheetToolSet SpreadsheetTools { get; set; } = new SpreadsheetToolSet();

    protected override async Task OnInitializedAsync()
    {
        SpreadsheetData = System.IO.File.ReadAllBytes("Popular_Baby_Names.xlsx");

        SpreadsheetTools.Items = new List<SpreadsheetToolSetItem>()
        {
            new SpreadsheetToolSetItem()
            {
                Title = "Custom Tool Set Item",
                Tools = new List<SpreadsheetTool>()
                {
                    new SpreadsheetOpenFileTool(),
                    new SpreadsheetDownloadFileTool(),

                    new SpreadsheetToolSeparator(),

                    new SpreadsheetUndoTool(),
                    new SpreadsheetRedoTool(),

                    new SpreadsheetToolSeparator(),

                    new SpreadsheetHorizontalAlignTool(),
                    new SpreadsheetTextWrapTool(),
                    new SpreadsheetNumberFormatTool(),
                    new SpreadsheetInsertLinkTool()
                }
            }
        };

        await base.OnInitializedAsync();
    }
}

Le résultat de l’exécution ci-dessus affiche l’ensemble d’outils personnalisé:

Création d’outils personnalisés

L’un des grands avantages du composant de feuille de calcul de Telerik est qu’il vous permet de créer vos propres outils pour effectuer des actions sur le document ou le contenu via le code. Par exemple, supposons que vous souhaitiez ajouter un bouton qui permet aux utilisateurs de naviguer rapidement vers la documentation qui répertorie les formules qu’ils peuvent utiliser dans le composant. Pour y parvenir, vous pouvez suivre ces étapes:

1. Créez le composant avec le Tools paramètre pointant vers une propriété ou une variable, dans le but d’ajouter l’outil plus tard:

<TelerikSpreadsheet Data="SpreadsheetData" Tools="@DefaultToolsWithCustomizations">
</TelerikSpreadsheet>
...
@code{
    private SpreadsheetToolSet DefaultToolsWithCustomizations { get; set; } = SpreadsheetToolSets.All;
}

2. Créer un RenderFragment Cela définit le bouton pour apparaître dans la feuille de calcul et que les utilisateurs peuvent appuyer sur. Dans cet exemple, j’ai ajouté un TelerikButtonmodifiant ses paramètres en fonction de la fonctionnalité souhaitée, ainsi que la création du gestionnaire d’événements qui permet la navigation vers la documentation:

private RenderFragment CustomToolFragment =>
    @<TelerikButton Icon="@SvgIcon.FormulaFx"
                            ButtonType="@ButtonType.Button"
                            ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
                            Title="Function List"
                            FillMode="@ThemeConstants.Button.FillMode.Flat"
                            OnClick="@OnCustomToolClick">
    </TelerikButton>
;

private async Task OnCustomToolClick()
{        
    var url = "https://www.telerik.com/blazor-ui/documentation/components/spreadsheet/functions-formulas#function-list";
    await JS.InvokeVoidAsync("open", url, "_blank");

}

3. Ajoutez un nouvel ensemble d’outils pour vos outils personnalisés (bien que vous puissiez modifier tout ensemble d’outils existant). Dans la liste des outils, créez un nouveau de type SpreadsheetCustomTool et définir le Template paramètre au RenderFragment créé à l’étape précédente:

protected override async Task OnInitializedAsync()
{
    SpreadsheetData = System.IO.File.ReadAllBytes("Popular_Baby_Names.xlsx");

    var toolSetItems = DefaultToolsWithCustomizations.Items;
    
    var myToolSet = new SpreadsheetToolSetItem()
        {
            Title = "Docs",
            Tools = new List<SpreadsheetTool>()
            {
                new SpreadsheetCustomTool
                {
                    Template = CustomToolFragment
                }                   
            }
        };

    toolSetItems.Add(myToolSet);

    await base.OnInitializedAsync();
}

Lorsque vous exécutez l’application, vous verrez comment appuyer sur le bouton redirige l’utilisateur vers le nouvel onglet:

Il convient de noter que des opérations plus complexes en utilisant le Les données du composant sont possibles, comme le montre cet article.

Événements disponibles dans le composant de la feuille de calcul

Avec le composant de feuille de calcul, vous pouvez déterminer quand un utilisateur appuie sur le Télécharger bouton pour télécharger un document, grâce au OnDownload événement. Vous pouvez également savoir quand l’utilisateur appuie Ouvrir bouton et ouvre un document de leur machine locale à travers le OnOpen événement. Vous trouverez ci-dessous un exemple de sa mise en œuvre:

<TelerikSpreadsheet Data="SpreadsheetData"
OnDownload="@OnSpreadsheetDownload"
OnOpen="@OnSpreadsheetOpen">
</TelerikSpreadsheet>

@code {

    private byte[]? SpreadsheetData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        SpreadsheetData = System.IO.File.ReadAllBytes("Popular_Baby_Names.xlsx");

        await base.OnInitializedAsync();
    }
    private void OnSpreadsheetDownload(SpreadsheetDownloadEventArgs args)
    {        
        Debug.WriteLine($"OnDownload event executed");
    }

    private void OnSpreadsheetOpen(SpreadsheetOpenEventArgs args)
    {
        var file = args.Files.First();
        Debug.WriteLine($"OnOpen event executed - Opened file: {file.Name}, with size {file.Size.ToString("n0")}");
    }
}

Conclusion

Tout au long de cet article, vous avez appris le puissant composant de la feuille de calcul de Telerik pour Blazor, qui vous permet de créer des expériences de type Excel pour les utilisateurs de votre application. Nous avons vu comment ajouter une feuille de calcul à vos applications Blazor et comment modifier la barre d’outils à l’aide des ensembles d’outils.

Il est temps de créer des applications extraordinaires facilement à l’aide de composants Telerik.

Essayer maintenant