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

2
votes

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();
3
exceluser-interfacekendo-uirefresh
Try setting the dataSource on the grid initially to a new dataSource, and then set the data on the existing DataSource of the grid. $("#searchedgrid").data("kendoGrid").dataSource.data(buildData); See if that changes anything. jsbin.com/hucezo/edit?js --Edit Oh, and you shouldn't need to recreate the grid every time, that should probably exist outside the event. – Robin Giltner
Excellent, yes creating the grids outside the event fixed the issue, thank you. – bentwonk
As specific as your issue is, there will always be someone else with the same problem as you. Today, that's me :) – Marcello Grechi Lins

3 Answers

4
votes

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

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

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

add:

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

followed by:

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

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();