SpreadSheet Control

[Juan Montoya]

Is there a plan to add the SpreadSheet control in Blazor

[Janakiraman Sakthivel]

Hi Juan Montoya,

Currently, we are implementing the
Spreadsheet component in Blazor platform. This Blazor Spreadsheet component will be available in Quarter 3 (2024 Volume 3) release of this year. You can track the status of this feature using below link from our feedback portal,

Feedback Portal Link: https://www.syncfusion.com/feedback/10982/spreadsheet-new-component

Until then, you can use the JavaScript Spreadsheet component in the Blazor App. As we didn’t provide complete support to spreadsheet in Blazor. So that, we have suggested a workaround of rendering the spreadsheet in JavaScript template as html in Blazor.

For your convenience, we have prepared the sample and attached it.

Sample: Please see the attachment.

For more details refer to the below link,

https://www.syncfusion.com/blogs/post/easily-use-a-javascript-control-in-a-blazor-server-app.aspx

To know more about JavaScript spreadsheet component. Please refer it.

https://ej2.syncfusion.com/javascript/documentation/spreadsheet/getting-started

Kindly get back to us if you need any other further clarifications.

Attachment: BlazorSpreadsheet_a90b1745.zip

[Juan Montoya]

Do you have a sample with Blazor We Assembly?

[Janakiraman Sakthivel]

Hi Juan Montoya,

Currently, we are working on your reported requirement at our end and will update you with further details soon. We appreciate your patience until then.

[Janakiraman Sakthivel]

Hi Juan Montoya,

We have created a Blazor WebAssembly sample as per your requirements and have used the JavaScript Spreadsheet component in the created Blazor WebAssembly sample.

For your convenience, we have attached a Blazor WebAssembly sample below.

Sample: Please see the attachment.

Code snippet: 

Pages/Home.razor:

<div id="spreadsheet" @ref="spreadsheetElem"></div>

@code {

    ElementReference spreadsheetElem;

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            await JSRuntime.InvokeVoidAsync("renderSpreadsheet", spreadsheetElem, orders);

        }

    }

}


script/isolationScript:

var spreadsheet;

function renderSpreadsheet(spreadsheetElem, data) {

     spreadsheet = new ej.spreadsheet.Spreadsheet({

        width: '1000px',

        sheets: [{

            ranges: [{

                dataSource: data,

                showFieldAsHeader: false

            }]

        }],

         openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open',

         saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save',

    }, spreadsheetElem);

}

Kindly get back to us if you need any other further clarifications.

Attachment: BlazorWebApp_524ee0cb.zip