PROJECT DESCRIPTION
The following project shows how you can use the client-side import of the RadSpreadsheet to load a file from the server and how to save on the server the file created from the client-side export functionality.
This approach can be used to overcome some issues or limitations of the Server-side import/export of the RadSpreadsheet which are not present in the client-side import/export.
Markup:
<%-- Load newer version of jQuery in order to use the $.ajax as below --%>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="false">
</telerik:RadScriptManager>
<telerik:RadButton runat="server" ID="ExportButton" Text="Export as Excel" AutoPostBack="true" OnClientClicked="save" OnClick="ExportButton_Click" />
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" HideFileInput="true" AllowedFileExtensions=".xlsx, .xls"
OnClientFileSelected="OnClientFileSelected" OnClientFileDropped="OnClientFileDropped" Localization-Select="Import From Excel File">
</telerik:RadAsyncUpload>
<asp:HiddenField runat="server" ID="spreadsheetfile" />
<telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1"></telerik:RadSpreadsheet>
<script>
/* START Load spreadsheet from Excel file from the server*/
Sys.Application.add_load(pageLoadHandler);
function pageLoadHandler() {
$.ajax({
url: '/workbook.xlsx',
method: 'GET',
xhrFields: {
responseType: 'blob'
},
success: function (data, second, third) {
var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
spreadsheet.fromFile(data);
}
});
}
/* END Load spreadsheet from Excel file from the server*/
/* START Export to Excel and send exported file to server*/
function save() {
var spread = $find("RadSpreadsheet1");
var workbook = new kendo.ooxml.Workbook(spread.get_kendoWidget().toJSON());
// workbook.toDataURL() is the file in base64 string
$get("spreadsheetfile").value = workbook.toDataURL();
}
/* END Export to Excel and send exported file to server*/
/* START Import from Excel file uploaded or dragged to the AsyncUpload */
var isDropped = false;
function OnClientFileDropped(sender, args) {
var file = args.get_file();
var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
spreadsheet.fromFile(file);
$(args.get_row()).remove();
isDropped = true;
}
function OnClientFileSelected(sender, args) {
if (!isDropped) {
var file = args.get_fileInputField().files[0];
var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
spreadsheet.fromFile(file);
$(args.get_row()).remove();
} else {
isDropped = false;
}
}
/* End Import from Excel file uploaded or dragged to the AsyncUpload */
</script>
Code-behind:
protected void ExportButton_Click(object sender, EventArgs e)
{
string converted = spreadsheetfile.Value.Replace("data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,", string.Empty);
// get exported Excel file as a byte array
Byte[] bytes = Convert.FromBase64String(converted);
File.WriteAllBytes(Server.MapPath("~/App_Data/WorkbookExported.xlsx"), bytes);
}