Add Syncfusion

Introduction

Whilst we still have a very simple application we will add the Syncfusion Blazor controls and re-engineer the List of Countries page to use a Syncfusion grid.

YouTube Video

Add Syncfusion for Blazor

  • Select the Client project from the Solution Explorer and right-click.
  • Select Manage NuGet Packages
  • Select the 'Browse' tab.
  • Enter 'Syncfusion Blazor' in the Search box.
  • A number of Syncfusion packages will be displayed. From Syncfusion Blazor version 18.4.0 individual Syncfusion Blazor controls are able to be installed individually; these are aimed at web assembly applications where the download size of the final project should be kept to a minimum. (See Syncfusion NuGet Package documentation.) As our project is a web assembly application we should only install the controls we need.  I think the ones we are likely to need are (these are listed in the order they appear in the NuGet Package Manager):
    • Syncfusion.Blazor.Core
    • Syncfusion.Blazor.Themes
    • Syncfusion.Blazor.Popups
    • Syncfusion.Blazor.Buttons
    • Syncfusion.Blazor.Lists
    • Syncfusion.Blazor.Inputs
    • Syncfusion.Blazor.Navigations
    • Syncfusion.Blazor.Dropdowns
    • Syncfusion.Blazor.Grid
    • Syncfusion.Blazor.Notifications
  • Enter 'Syncfusion.Licensing' in the Search box and install
    • Syncfusion.Licensing
  • Select each of the above, and install.  (I'm not convinced they are all needed, but any superfluous ones can be deleted later.)
  • To confirm the packages have been installed, select the 'Installed' tab .

Syncfusion Blazor controls are constantly being updated and new versions released almost weekly; the version number is therefore highly likely to be different from these screenshots.

Register Syncfusion Blazor Service

Open _Imports.cs (in the .Client project) and add the following:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Lists
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Notifications
@using Syncfusion.Blazor.Popups

Open Programs.cs (in the .Client project) and add the following after the other 'using' statements

using Syncfusion.Blazor;

and the following on the line before "await builder.Build().RunAsync();"

builder.Services.AddSyncfusionBlazor();

Add style sheet

Open wwwroot/index.html (in the .Client project) and insert the following as the last line in the <head> section:

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

Add script reference

Again, in wwwroot/index.html (in the .Client project) insert the following as the last line in the <head> section:

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

With the above changes, _Imports.cs, program.cs and index.html should look like these examples:

_Imports.cs
Program.cs
wwwroot/index.html

Licence Syncfusion

Syncfusion needs to be licenced.  To get a licence:

  • Open the Syncfusion web page - https://syncfusion.com
  • Create an account if you do not already have one, and log into your account.
  • Select 'My Dashboard' by clicking on your user name in the page header.
  • Select 'License & Downloads' from the left-hand menu followed by 'Downloads & Keys', or 'Downloads & Keys' from the main pane.
  • Select 'Get License Key' and follow the instructions. I don't think the version selected is critical (you can update to a later release without the need for a new licence key).

To install the licence, open Program.cs (from the .Client project) and add the following immediately after the 'using' statements, replacing "Your License Key" with the licence key downloaded from Syncfusion:

// Register Syncfusion license
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");

Update List of Countries

To update the code to use the Syncfusion grid we need to replace the <table> html with the following:

<SfGrid DataSource="@countries">
    <GridColumns>
        <GridColumn Field="@nameof(Country.CountryId)"
                    HeaderText="Country ID"
                    TextAlign="@TextAlign.Left"
                    Width = "20">
        </GridColumn>
        <GridColumn Field="@nameof(Country.CountryName)"
                    HeaderText="Country Name"
                    TextAlign="@TextAlign.Left"
                    Width = "80">
        </GridColumn>
    </GridColumns>
</SfGrid>

Looking at the above, <SfGrid> requires a 'DataSource' which I have called 'countries'.  This is followed by <GridColumns> with each column defined by a <GridColumn> tag.  Within the <GridColumn> tag

  • Field item gets the data for the column (see below)
  • HeaderText is the text to be shown at the top of the column
  • TextAlign determines whether the column data and header should be left (.Left), right (.Right) or centred (.Center)
  • Width is the relative width of the column. This is the width of the individual column as a proportion of the total widths of all the columns.  Here I have, effectively 20% and 80%.  I could have had the same effect by defining the column widths as 2 and 8 (or 1 and 4).

The code section needs to be replaced with:

@code {
    List<Country> countries = new List<Country>();

    protected override async Task OnInitializedAsync()
    {
        await CountryService.GetCountries();

        countries = new();

        foreach (var country in CountryService.Countries)
                countries.Add(country);
    }    
}

The DataSource for the Syncfusion grid is 'countries', so a public list of type 'Country' is declared and called 'countries'.

Within the OnInitializedAsync() method, the CountryService is called to get all the countries.  The new countries object is instantiated (countries = new();) and a 'foreach' loop used to read each country returned by the service and added to the new list called 'countries'.

Discussion

As an aside, I am not sure this is the best or 'correct' way of getting 'countries'; I expected that 'countries = await CountryService.GetCountries()' might have worked, but it didn't and no amount of investigation could find an alternative way of achieving this result.

References

The code for this post can be found here.  (It shows only the changes made for this post.)

Powered by Publii