Broken scroll and overflow appearance in Spreadsheet

RELATED TO:

AUTHOR: Peter Milchev

DATE POSTED: November 12, 2018

PROBLEM

When you load a file in the Spreadsheet, sometimes it has a broken appearance, it overflows and the scroll is not working.

DESCRIPTION

Most commonly the reasons for the unexpected behavior are JavaScript errors or loading some Excel files. Most of the Excel files that cause such an issue are loaded server-side and contain frozen rows and columns.

SOLUTIONS

Solution 1

Remove the frozen rows and columns when loading the file: 

protected void Page_Init(object sender, EventArgs e)
{
    var provider = new SpreadsheetDocumentProvider(Server.MapPath("~/App_Data/MyExcelFile.xlsx"));
    RadSpreadsheet1.Provider = provider;
 
    foreach (var sheet in provider.GetSheets())
    {
        sheet.FrozenColumns = 0;
        sheet.FrozenRows = 0;
    }
}

Solution 2

If you need the frozen rows and columns to persist, you can load the file on the client by saving it to a base64string. 

Code-behind: 

protected void Page_Load(object sender, EventArgs e)
{
    Byte[] bytes = File.ReadAllBytes(Server.MapPath("~/App_Data/MyExcelFile.xlsx"));
    String file = Convert.ToBase64String(bytes);
    HiddenField1.Value = file;
}

Markup:

<asp:HiddenField  runat="server" ID="HiddenField1"/>

function pageLoadHandler() {
    var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
    var value = $get("<%= HiddenField1.ClientID %>").value;
                     
    var file = b64toBlob(value)
    spreadsheet.fromFile(file);
}
Sys.Application.add_load(pageLoadHandler);

function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
  
    var byteCharacters = atob(b64Data);
    var byteArrays = [];
  
    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);
  
        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
  
        var byteArray = new Uint8Array(byteNumbers);
  
        byteArrays.push(byteArray);
    }
  
    var blob = new Blob(byteArrays, { type: contentType });
    return blob;
}

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.