Countries List - Enhanced

So far the Countries List is very basic, but the Syncfusion DataGrid control can be enhanced very simply.  The Syncfusion DataGrid documentation has a full list of possibilities, but we will only be taking advantage of a few at this stage.  (Be aware that because we are using Dapper for data management we won't be using the Syncfusion Data Binding or DataManager.  There might be a way to use them with Dapper, but I haven't discovered how!)

Sorting, Resizing & Filtering

To add sorting, resizing (of columns) and filtering, change the <SfGrid> code to the following:

<SfGrid DataSource="@countries"
        AllowSorting="true"
        AllowResizing="true"
        AllowFiltering="true">

The effect will be that clicking on a column header will toggle between sorting ascending and descending (I have also found there is a third state that seems a bit random - a bug?)  Clicking on the vertical separators in the column headers and dragging horizontally allows the columns to be resized, and by entering filtering criteria in the boxes under the column headers allows filtering (press the enter key after entering criteria).

<SfGrid DataSource="@countries"
        AllowSorting="true"
        AllowResizing="true"
        AllowFiltering="true"
        AllowPaging="true">
    <GridPageSettings PageSize="5"></GridPageSettings>

By adding 'AllowPaging="true"' to the <SfGrid> and the <GridPageSettings> line as shown above, the number of rows of data shown on a page is limited to the number specified by 'PageSize'. Without the 'PageSize' attribute all records are 'displayed' and a vertical scrollbar used to access the records beyond the current view.

<SfGrid DataSource="@countries"
        AllowSorting="true"
        AllowResizing="true"
        AllowFiltering="true"
        AllowPaging="true"
        AllowReordering="true">
    <GridPageSettings PageSize="5"></GridPageSettings>

Adding 'AllowReordering="true"' allows the user to re-order the columns by dragging and dropping.

Data Grid - Sort Ascending
Data Grid - Sort Ascending
Data Grid - Sort Descending
Data Grid - Sort Descending
Data Grid - Resize Columns
Data Grid - Resize Columns
Data Grid - Filter by Column
Data Grid - Filter by Column
Data Grid - Paging
Data Grid - Paging
Data Grid - Re-order Columns
Data Grid - Re-order Columns

Context Menu

A really impressive feature of the Syncfusion DataGrid is the option to add a 'Context Menu' accessed by right-clicking in the grid.  By right-clicking in the column header sorting and auto-fitting columns is available. By right-clicking in the body it is possible to copy to the clipboard, to export the data to Excel, or export to csv.  And by right-clicking in the footer the paging options are available.

To enable the context menu requires the 'ContextMenuItems' line to be included in the <SfGrid> section.

<SfGrid @ref="FirstGrid"
        DataSource="@countries"
        AllowSorting="true"
        AllowResizing="true"
        AllowFiltering="true"
        AllowPaging="true"
        AllowReordering="true"
        AllowExcelExport="true"
        ContextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy", "ExcelExport", "CsvExport", "FirstPage", "PrevPage","LastPage", "NextPage"})">

In the above case the list includes 'ExcelExport'; this also requires the additional steps:

  • Adding '@ref="FirstGrid" to the <SfGrid> section. ('FirstGrid' could be anything - but is referenced below.)
  • Adding 'private SfGridFirstGrid;' at the start of the @Code section.
  • Adding the 'public async Task ExcelExport()' procedure (as shown in the code below).

Note that the complete code is shown.

@page "/"
@using BlazorCountries.Data
@inject ICountriesService CountriesService

<h3>Countries List</h3>

<SfGrid @ref="FirstGrid"
        DataSource="@countries"
        AllowSorting="true"
        AllowResizing="true"
        AllowFiltering="true"
        AllowPaging="true"
        AllowReordering="true"
        AllowExcelExport="true"
        ContextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy", "ExcelExport", "CsvExport", "FirstPage", "PrevPage","LastPage", "NextPage"})">
    <GridPageSettings PageSize="5"></GridPageSettings>
    <GridColumns>
        <GridColumn Field="@nameof(Countries.CountryId)"
                    HeaderText="Country Id"
                    TextAlign="@TextAlign.Left"
                    Width="20">
        </GridColumn>
        <GridColumn Field="@nameof(Countries.CountryName)"
                    HeaderText="Country Name"
                    TextAlign="@TextAlign.Left"
                    Width="90">
        </GridColumn>
    </GridColumns>
</SfGrid>

@code {

    private SfGrid<Countries> FirstGrid;

    // Create an empty list, named countries, of empty Counties objects.
    IEnumerable<Countries> countries;

    protected override async Task OnInitializedAsync()
    {
        //Populate the list of countries objects from the Countries table.
        countries = await CountriesService.CountriesGetAll();
    }

    public async Task ExcelExport()
    {
        await this.FirstGrid.ExcelExport();
    }

}
Data Grid - Context Menu - Headers
Data Grid - Context Menu - Headers
Data Grid - Context Menu - Body
Data Grid - Context Menu - Body
Data Grid - Context Menu - Paging
Data Grid - Context Menu - Paging

The Syncfusion documentation example also has options in the Context Menu for adding, editing and deleting records.  This is deliberately omitted here as these options do not work with the Dapper approach to data access.

YouTube Video

Blazor + Syncfusion + Dapper: Part 4

Powered by Publii