How to import and append an excel file in kendo grid using JQuery?

I have a kendo grid and I want to import and append an excel file to my kendo grid. For example, if I have 3 rows in my kendo grid, then after importing the excel file containing 2 rows, the grid should have total of 5 rows data. I have tried importing the excel file but unable to append the file to the grid. Is that possible to do so? Any help will be really appreciated.

I tried to read the excel file and load rows in the grid one by one and then in the last did this.

              var grid = $("#grid").data("kendoGrid");
              var griddataSource = grid.dataSource._data;
              // Assuming the structure of Excel file matches the grid's schema
              for (var i = 1; i < rows.length; i++) {
                var row = rows[i];
                var dataItem = {
                  ProductID: row[0],
                  ProductName: row[1],
                  Price: row[2],
                };
                
                // Add the new data item to the grid's data source
                grid.dataSource.add(dataItem);
              }
              );
              $("#grid").data("kendoGrid").dataSource.data([]);
              $("#grid").data("kendoGrid").dataSource.data([griddataSource]);
              grid.refresh();`
            
I also tried another way using HTML table, with the help of below link but it also didnt work and I also didnt understand how they are using table.

[enter link description here][1]
https://www.aspsnippets.com/Articles/2499/Read-Parse-Excel-File-XLS-and-XLSX-using-jQuery/

You need to use grid method setDataSource() in order to have the grid rebind to the new data. Please try the following.

var grid = $("#grid").data("kendoGrid");
var griddataSource = grid.dataSource;  // reference to the dataSource itself rather than its data
// Assuming the structure of Excel file matches the grid's schema
for (var i = 1; i < rows.length; i++) {
  var row = rows[i];
  var dataItem = {
    ProductID: row[0],
    ProductName: row[1],
    Price: row[2],
  };
            
  // Add the new data item to the grid's data source
  griddataSource.add(dataItem);
} 

grid.setDataSource(griddataSource);  // Replace the grid's datasource and rebind it