How to reload data for SpreadSheet of Kendo UI jQuery?

Question

I am fetching data from a remote source and displaying the data into a spreadsheet component of Kendo UI jQuery.

The first time the data is fetched and displayed on the screen, everything is fine, however, if the data is fetched a second time a new spreadsheet gets appended to the original one.

What would the proper way to refresh the data in a spreadsheet?

Please see this sample code here that contains the same issue I've described above. Continue clicking the search button and you will see it appends a new spreadsheet to the page.

https://dojo.telerik.com/ewigOKam

Answer 1

If you create the spreadsheet one time, then afterward upon each Search button click you can refresh the datasource of the spreadsheet. Of course, you'll want to take into account what this does to any changes the user may have made before you refresh the datasource.

Updated dojo: https://dojo.telerik.com/EGePecal

And the code from that dojo (always better to include the code in questions and not just in links):

  <button class="k-button" onClick="search();">Search</button>
  <div id="spreadsheet"></div>

<script>

  $(function() {
    $("#spreadsheet").kendoSpreadsheet();
  });
  
  function search() {

    var dataSource = new kendo.data.DataSource({
      transport: {
        read:  {
          url: "//demos.telerik.com/kendo-ui/service/Products",
          dataType: "jsonp"
        }
      }
    });

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    sheet.setDataSource(dataSource);

    console.log(sheet.dataSource);
  }

</script>

UPDATE: Here is another way to do the same thing which is a little cleaner - this one pulls from the Telerik website sample for DataSource binding for the spreadsheet - https://demos.telerik.com/aspnet-core/spreadsheet/datasource

<button class="k-button" onClick="search();">Search</button>
<div id="spreadsheet"></div>

<script>

  $(function() {
    
    var dataSource = new kendo.data.DataSource({
      transport: {
        read:  {
          url: "//demos.telerik.com/kendo-ui/service/Products",
          dataType: "jsonp"
        }
      }
    });
    
   
    $("#spreadsheet").kendoSpreadsheet({
      columns: 20,
      rows: 100,
      toolbar: false,
      sheetsbar: false,
      sheets: [{
        name: "Products",
        dataSource: dataSource,
        rows: [{
          height: 40,
          cells: [
            {
              bold: "true",
              background: "#9c27b0",
              textAlign: "center",
              color: "white"
            },{
              bold: "true",
              background: "#9c27b0",
              textAlign: "center",
              color: "white"
            },{
              bold: "true",
              background: "#9c27b0",
              textAlign: "center",
              color: "white"
            },{
              bold: "true",
              background: "#9c27b0",
              textAlign: "center",
              color: "white"
            },{
              bold: "true",
              background: "#9c27b0",
              textAlign: "center",
              color: "white"
            }]
        }],
        columns: [
          { width: 100 },
          { width: 415 },
          { width: 145 },
          { width: 145 },
          { width: 145 }
        ]
      }]
    });

    
    });
  
  function search() {
     var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
     spreadsheet.activeSheet().dataSource.read();
  }

</script>

above code in dojo: https://dojo.telerik.com/ILuxuTeG