Using Excel Export with Custom Grid Component

[Jason]

I am using a custom grid component that largely follows this article: https://blazor.syncfusion.com/documentation/datagrid/how-to/create-custom-grid-component

I call my custom component "AdjustableGrid."

You will see in the code below that I use the Adjustable Grid in a page and have the ToolbarClickHandler setup to capture ToolBar clicks and process an export to excel. The problem is that it doesn't work. It's not so much that Excel Export doesn't work but that the ToolbarClickHandler isn't called on a toolbar click. I have put the relevant sections in bold​.

If you could provide some guidance on how to use Export to Excel with a custom Grid component, it would be most appreciated.

<AdaptableGrid ID="Grid" @ref="DefaultGrid" DataSource="@Records" TValue="CapabilityDetail"

                GridSpinner="GridSpinner" ErrorMessage="@errorMessage">

    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="CapabilityDetail"></GridEvents>

    <GridEvents OnRecordDoubleClick="RecordDoubleClickHandler" TValue="CapabilityDetail"></GridEvents>

    <GridColumns>

        <GridColumn Field="@nameof(CapabilityDetail.Name)" HeaderText="@Loc["Capability.Name"]">

            <Template>

                @{

                    var item = (context as CapabilityDetail);

                    string format = string.Empty;

                    if (!item!.IsActive) format = "link-secondary";

                    <NavLink rel='nofollow' href=@($"/Settings/Capabilities/Details/{item!.Id}") class="@format">

                        @item.Name

                    </NavLink>

                }

            </Template>

        </GridColumn>

        <GridColumn Field=@nameof(CapabilityDetail.UserCount) HeaderText="@Loc["Capability.UserCount"]" TextAlign="TextAlign.Center"></GridColumn>

        <GridColumn Field=@nameof(CapabilityDetail.IsActive) HeaderText="@Loc["Capability.IsActive"]" TextAlign="TextAlign.Center"></GridColumn>

    </GridColumns>

</AdaptableGrid>

@code {

    private List<CapabilityDetail>? Records { get; set; }

    private SfGrid<CapabilityDetail>? DefaultGrid;

    private bool _gridSpinner { get; set; } = false;

    private string errorMessage = string.Empty;

    private UserProfile? userProfile;

    public bool GridSpinner

    {

        get { return _gridSpinner; }

        set { _gridSpinner = value; StateHasChanged(); }

    }

    protected override async Task OnInitializedAsync()

    {

        await GetUserAsync();

        await Refresh();

    }

    private async Task GetUserAsync()

    {

        GridSpinner = true;

        userProfile = await StorageService.GetItemAsync<UserProfile>(SiteConstants.USER_PROFILE);

        if (userProfile == null)

        {

            Navigation.NavigateTo("/login", true);

            return;

        }

        GridSpinner = false;

    }

    private async Task Refresh()

    {

        Records = null;

        GridSpinner = true;

        var response = await OrgService.GetCapabilityList(userProfile!.CurrentEmployerId);

        if (response.Item1 == null)

        {

            errorMessage = response.Item2;

        }

        else

        {

            Records = response.Item1.OrderBy(c => c.Name).ToList();

        }

        GridSpinner = false;

    }

    public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and item name

        {

            await DefaultGrid!.ExportToExcelAsync();

        }

    }

    public void RecordDoubleClickHandler(RecordDoubleClickEventArgs<CapabilityDetail> args)

    {

        Navigation.NavigateTo("/Settings/Capabilities/Details/" + args.RowData.Id);

    }

[Jason]

REVISION: My custom grid uses: 

EnableAdaptiveUI="EnableAdaptiveUI" RowRenderingMode="RowRenderingMode"

My problem exists when I am in full screen mode. However, when I change my screen to a mobile width, the toolbar adapts and the Export to Excel feature works. So my issue is specifically when I am in full screen.

[Prathap Senthil]

Hi Jason,

Based on your reported problem, we suggest using the following approach to achieve your goal using the grid methods. You can define and use the approach like this, according to the methods you want. Kindly refer to the code snippet and sample below for your reference.

CustomGrid.Razor

 

public partial class CustomGrid<TValue> : SfGrid<TValue>

{

     public const int PAGE_COUNT = 5;

     public const int DEFAULT_PAGE_SIZE = 10;

     public string[] PageSizes = new string[] { "10", "20", "50" };

     IReadOnlyDictionary<string, object> props { get; set; }

 

     public SfGrid<TValue> grid { get; set; }

 

     public async Task GridExcelExport()

     {

         await this.grid.ExportToExcelAsync();

     }

 

Index.Razor

  public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

 

  {

 

      if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and item name

 

      {

 

          await DataGridRef!.GridExcelExport();

 

      }

 

  }

If the issue still persists, kindly share the following details for further validation on our end:

• Could you please share a simple issue-reproducible sample with duplicate data?
•  Alternatively, could you please reproduce the reported issue in the provided sample?

The requested details will be very helpful in validating the reported query on our end and providing a solution as early as possible. Thank you for your understanding.

Regards,
Prathap Senthil

Attachment: CustomGrid_beb9b7f7.zip