Kendo UI Excel export, generating multiple files, not refreshed properly?

Question

I have a single page app, that often creates new data from an array

var searchData = new kendo.data.DataSource({data: buildData});

and then displays it in a grid,

this all looks good except the excel export missbehaves as follows:

run one search and the excel export works fine.

run a second search and the excel export downloads 2 files, the first being a repeat of the results of the first search, the second file being the new search.

run a third search and the excel exports three files.... and so on...

it appears the refresh isn't working for me, but i don't have any idea why not?

 if(searchedArray) {
                searchedArray.forEach(function (row) {
                buildData.push({r:rowCount,w:row['w'],n:'1',nl:'2',o:row['o'],t:row['t'],d:row['d'];
                    rowCount++;
                });
            }
            var searchData = new kendo.data.DataSource({data: buildData});


 var sGrid=null;
 
 sGrid = $("#searchedgrid").kendoGrid({
          toolbar: ["excel"],
          excel: {
              fileName: "filename.xlsx",
              proxyURL: "http://demos.telerik.com/kendo-ui/service/export",
              filterable: true
          },
          dataSource: searchData,
          sortable: {
              mode: "multiple",
              allowUnsort: true
          },
          schema: {
              model: {
                  fields: {
                      r: { type: "number" },
                      w: { type: "number" },
                      n: { type: "string" },
                      nl: { type: "string" },
                      o: { type: "string" },
                      t: { type: "string" },
                      d: { type: "date" }
                  }
              }
                },
                height: sHeight,
                scrollable: true,
                pageable: false,
  selectable: "multiple cell",
                allowCopy: true,
                columns: [
                    { field: "r",width: 40,title: "Rank",template:'<center>#=r#</center>'},
                    { field: "w",width: 50,title: "Weight",template:'<center>#=w#</center>'},
                    { field: "n", title: "Number", width: "80px",template:'<center>#=n#</center>'},
                    { field: "nl", title: "&nbsp;", width: "14px",template:'<center><a href="#=nl#" onclick="javascript:void window.open(\'#=nl#\',\'details\',\'width=800,height=600,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0\');return false;"><div class="ambLink" id="detaillink" title="View details"></div></a></center>',sortable:false},
      { field: "o",width: 200,title: "Owner"},
                    { field: "t",width: 400,title: "Title",  attributes: {style: 'white-space: nowrap '} },
                    { field: "d",width: 70,title: "Filed",template:'<center>#=d#</center>'}
                ]
            }).data("kendoGrid");  

 $("#searchedgrid").data('kendoGrid').refresh();

Answer 1

It worked for me by adding the .html('') after the selector:

$("#grid").html('').kendoGrid({
    ...
});

Answer 2

Somehow I solve the problem by just clear the div that created the grid.

add:

document.getElementById("grid").innerHTML = "";

followed by:

$("#grid").kendoGrid({
......
});     

Answer 3

For some reason, KendoGrid coupled with the export to excel feature will missbehave when you initialize the grid multiple times, without proper housekeeping.

What I did to solve it was to create the grid only once :

$("#grid").kendoGrid({
        columns: [
            (FIELDS LIST)
        ],
        groupable: false,
        pageable: true,
        scrollable: true,
        filterable: false,
        sortable: true,
        pageSize: 50
    });

And then, reset the datasource on the actual callback event, as you are already doing.

    // Set Grid data source
    $("#grid").data("kendoGrid").setDataSource(
        new kendo.data.DataSource({
            //Set the data of the grid as the result array of object.
            data: result.customerStatus
        })
    );

    $("#grid").data("kendoGrid").refresh();