We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Can I import data from Excel/Word into Blazor componenets?

I would like to import data from Excel into the Blazor DataGrid component.  I would also like to import Word documents into the text editor.  From this thread
https://www.syncfusion.com/forums/143789/importing-excel-spreadsheet
that seems to be impossible.  Have I misread this?  Can the Blazor components do this?

Thanks.

9 Replies

VN Vignesh Natarajan Syncfusion Team April 7, 2020 10:52 AM UTC

Hi David, 
 
Greetings from Syncfusion support.  
 
Query: “Excel into the Blazor DataGrid component 
 
As per your requirement we have prepared a sample to import data from excel sheet to DataGrid. From excel sheet we have read the value in form of DataTable and we have converted it to List. Please refer the below code example.  
 
<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true"> 
    <GridColumns> 
. . . .. . . 
    </GridColumns> 
</SfGrid> 
@code{ 
    public List<Order> Orders = new List<Order>(); 
    public DataTable table = new DataTable(); 
    protected override void OnInitialized() 
    { 
        //convert datatable to list 
        ConvertDataTable<Order>(table); 
    } 
    protected override void OnAfterRender(bool firstRender) 
    { 
        if (firstRender) 
        { 
            ExcelEngine excelEngine = new ExcelEngine(); 
            IApplication application = excelEngine.Excel; 
            //Set the default application version 
            application.DefaultVersion = ExcelVersion.Excel2016; 
            //Load the existing Excel workbook into IWorkbook 
            FileStream inputStream = new FileStream("Sample.xlsx"FileMode.Open); 
            IWorkbook workbook = application.Workbooks.Open(inputStream); 
            IWorksheet worksheet = workbook.Worksheets[0]; 
            // Read data from the worksheet and Export to the DataTable. 
            table = worksheet.ExportDataTable(worksheet.UsedRange, ExcelExportDataTableOptions.ColumnNames); 
        } 
    } 
    private void ConvertDataTable<T>(DataTable dt) 
    { 
        foreach (DataRow row in dt.Rows) 
        { 
            Orders.Add(new Order 
            { 
                OrderID = Convert.ToInt32(row[0]), 
. . . . . 
            }); 
        } 
    } 
    public class Order 
    { 
        public int OrderID { getset; } 
. . . . . . 
    } 
} 
 
 
Please find he sample from below  
 
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 



JO Jordi August 7, 2021 09:15 PM UTC

I did not find the sample useful.


Is there funtionality to import excel into a datagrid?



VN Vignesh Natarajan Syncfusion Team August 9, 2021 05:25 AM UTC

Hi Jordi,  
 
Query: “I did not find the sample useful. && Is there funtionality to import excel into a datagrid?” 
   
We have analyzed your query and we understand that, data is not bound to Grid while using the provided sample (previous update in forum) in latest version of Syncfusion Blazor NuGet package. This is because sample attached was using older version of Syncfusion.Blazor. We have modified the sample (attached) to load data into DataGrid component from excel file while using the latest version.  
 
Please find the modified sample from below  
 
 
We have called ConvertDataTable method inside the OnAfterRender instead of OnInitialized. Refer the below modified code example.  
 
protected override void OnAfterRender(bool firstRender) 
{ 
    if (firstRender) 
    { 
        ExcelEngine excelEngine = new ExcelEngine(); 
        IApplication application = excelEngine.Excel; 
        //Set the default application version 
        application.DefaultVersion = ExcelVersion.Excel2016; 
        //Load the existing Excel workbook into IWorkbook 
        FileStream inputStream = new FileStream("Sample.xlsx", FileMode.Open); 
        IWorkbook workbook = application.Workbooks.Open(inputStream); 
        IWorksheet worksheet = workbook.Worksheets[0]; 
        // Read data from the worksheet and Export to the DataTable. 
        table = worksheet.ExportDataTable(worksheet.UsedRange, ExcelExportDataTableOptions.ColumnNames); 
  
        ConvertDataTable<Order>(table); 
    } 
} 
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 



BD Boot Dat replied to Vignesh Natarajan January 23, 2022 09:43 AM UTC

Hi  Vignesh Natarajan, 

I found your above sample useful. 
But i'd like to ask two things.

1 Since it fetchng the excel file from the project directly, How can i change that and use the  File Upload component so i can choose any excel file and upload it to filestream for it to be read into the datagrid ?

2. I believe after i have the data uploaded in the data grid, with a stored procedure i can save them into my database table, corr



RN Rahul Narayanasamy Syncfusion Team January 24, 2022 02:49 PM UTC

Hi Boot, 

Greetings from Syncfusion. 

Query: Since it fetchng the excel file from the project directly, How can i change that and use the  File Upload component so i can choose any excel file and upload it to filestream for it to be read into the datagrid ? 

In the previously provided updates, we have import the data from Excel sheet and bind the data to the Grid at initial rendering itself. Now you want to upload that excel file using File Uploader and convert that data to bind the Grid dynamically.  

For this case, we need some details regarding your requirement. Could you please share the below details which will be helpful to proceed this further. 

  • Did you save the uploaded excel file in your project and convert that into memory stream? Or directly want to convert it to the data without saving in local project folder?
  • Whether did you want to fetch the Excel file dynamically from any source / within the project directory?
  • Whether did you save the uploaded file in your local project folder or any other place?

Query: I believe after i have the data uploaded in the data grid, with a stored procedure i can save them into my database table, corr 

We have analyzed your query and we understand that you want to save the changes in your database. Since the data is bound using DataSource property, CRUD actions can be handled using ActionEvents (OnActionComplete and OnActionBegin).  
 
OnActionBegin event – Will be triggered when certain action gets initiated.   
OnActionComplete event – Will be triggered when certain action gets completed. 
 
We suggest you to achieve your requirement to save the changes in database using OnActionBegin event of Grid when RequestType is Save. While saving the records, irrespective of Add or Update action. OnActionBegin event will be triggered when RequestType as Save. In that event we can update the changes into database.  
 
Since the Add and Edit actions share the same RequestType “Save”, we can differentiate the current action using Args.Action argument. Similarly we request you fetch the updated data from your database and bind to Grid in OnActionComplete event of Grid.  
  
Refer the below code example.  
 
 
 
<SfGrid @ref="Grid" DataSource="@GridData" Toolbar="@(new List<string> { "Add", "Edit", "Delete", "Cancel", "Update" })" AllowFiltering="true" AllowSorting="true" AllowPaging="true"> 
    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings> 
    <GridEvents OnActionBegin="OnBegin" OnActionComplete="OnComplete" TValue="Order"></GridEvents> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsIdentity="true" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Id" Width="150"></GridColumn> 
    </GridColumns> 
</SfGrid> 
@code{ 
    SfGrid<Order> Grid { get; set; } 
    public IEnumerable<Order> GridData { get; set;} 
    protected override void OnInitialized() 
    { 
        GridData = OrderData.GetAllOrders().ToList(); 
    } 
    public void OnComplete(ActionEventArgs<Order> Args) 
    { 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save || Args.RequestType == Syncfusion.Blazor.Grids.Action.Refresh) 
        { 
            GridData = OrderData.GetAllOrders().ToList(); // fetch updated data from service and bind to grid datasource property 
        } 
    } 
    public void OnBegin(ActionEventArgs<Order> Args) 
    { 
        if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Save) // update the changes in Actionbegine event 
        { 
            if (Args.Action == "Add") 
            { 
                //Args.Data contain the inserted record details 
                //insert the data into your database 
                OrderData.AddOrder(Args.Data); 
            } 
            else 
            { 
                //Args.Data contain the updated record details 
                //update the data into your database 
                OrderData.UpdateOrder(Args.Data); 
            } 
        }        else if (Args.RequestType == Syncfusion.Blazor.Grids.Action.Delete) 
        { 
            OrderData.DeleteOrder(Args.Data.OrderID); // delete the record from your database 
        } 
    } 
} 

Refer our UG documentation for your reference 

Please get back to us if you have further queries. 
 
Regards, 
Rahul 




SM Sinetemba Mantambo January 28, 2022 08:39 AM UTC

May I please have a demo for this 



RN Rahul Narayanasamy Syncfusion Team January 31, 2022 02:26 PM UTC

Hi Sinetemba, 

Greetings from Syncfusion. 

Query: May I please have a demo for this 

Based on your request, we have prepared a sample for this requirement(Import data from excel sheet to DataGrid). Here, we have import data from excel sheet to DataGrid. From excel sheet we have read the value in form of DataTable and we have converted it to List. Please find the below sample for your reference. 


Please let us know if you have any concerns. 

Regards, 
Rahul 



CA Christopher Arabia January 6, 2023 03:20 AM UTC

Hi,

Can you please continue with Boot's question.

  • Did you save the uploaded excel file in your project and convert that into memory stream? Or directly want to convert it to the data without saving in local project folder? -- Directly want to convert it to the data without saving in local project folder.


NP Naveen Palanivel Syncfusion Team January 12, 2023 01:44 AM UTC

Hi Christopher,


Based on your query, We prepared sample like  fetched data from excel file and convert them in to data. Please refer the attached sample for your reference.


Please let us know if you have any concerns.


Regards,

Naveen Palanivel


Attachment: Copy_data_Excel_to_grid_9d17528a.zip

Loader.
Up arrow icon