Issue with Excel file with Dropdown , Tools and Component , Loading Speed

[Vikash Kumar]

Hi there , I'm facing one Technical issue with Spreadsheet Excel file  . I have one Excel sheet which I want to Load initialy on page load . After loading file on Spreadsheet . It's looking Wired . Even many functionlity of Excel sheet not working For Example Dropdown not working  even tools bar of Spreadsheet not loading properly . I want to load complete Tools bar component but in  EJ2 Spreedsheet tools bar not loading fully . Even after loading heavy file of Excel sheet it's becomes very slow . For Example the Excel file I have it's size around 200kb after loading this file , it's took sometime to jump any other Sheet on this . I'm using EJ2 Syncfusion Spreadsheet Javascript version . I'm attaching the Excel sheet with this . Please get the attach file . 

Please fix this issue as soon as possible . I have very urgent requirement.  Looking forward to your quick response .  Even possible please also provide me some sample file to load the Attached Excel file initially with all tools and Component with Dropdown funtion . One more thing I want to say please also check the speed after loading the sample excel file which I'm sending with this conversation . 

The Excel file I'm sending to you having 12 Sheets combined with this Like Summary , Bank1 , Bank2 , bank3 and so on .. When you try to jump any other sheet by click it's took some time to open that sheet . 

Looking forward to your response . 

Sample Code

------------------

<link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">

        <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">

        <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">

        <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">

        <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">

        <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">

        <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">

        <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">

        <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet">

        <link rel='nofollow' href="//cdn.syncfusion.com/ej2/ej2-spreadsheet/styles/material.css" rel="stylesheet">

        

        

            <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>

            <script src="http://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>

            <script src="http://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>

            <script src="http://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>

            <script src="http://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>

            <script src="http://cdn.syncfusion.com/ej2/ej2-splitbuttons/dist/global/ej2-splitbuttons.min.js" type="text/javascript"></script>

            <script src="http://cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>

            <script src="http://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js" type="text/javascript"></script>

            <script src="http://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>

            <script src="http://cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>

            <script src="http://cdn.syncfusion.com/ej2/ej2-grids/dist/global/ej2-grids.min.js" type="text/javascript"></script>

            <script src="http://cdn.syncfusion.com/ej2/ej2-spreadsheet/dist/global/ej2-spreadsheet.min.js" type="text/javascript"></script>

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

</head>

<body>

        

       <div id="container">

                <div id="element"></div>

       </div>

<script type="text/javascript">

var spreadsheet = new ej.spreadsheet.Spreadsheet({

allowOpen: true,

    allowSave: true,

    allowPrinting: true,

    allowFormulaBar: true,

    showRibbon: true,

enableContextMenu: true,

    printSettings:{

        allowPageSize: true

    },

    allowInsert: true,

    openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',

    saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save',

    height: 700,

    width: "100%", 

    cellSave: "cellSave",

loadComplete: "loadComplete",

        columnWidth: 100,

           created: () => {

        fetch("<?php echo base_url() ?>global_assets/vendor/filemanager/files/Bank_statement/BANK_statement_underwritting.xlsx") 

          .then((response) => {

            response.blob().then((fileBlob) => { 

              let file = new File([fileBlob], "Sample.xlsx"); 

              spreadsheet.open({ file: file }); 

            })

          })

      },

});

spreadsheet.appendTo('#element');

</script>

Thanks & Regards 

Attachment: BANK_statement_cf911ca1.zip

[Sangeetha Priya Murugan]

Hi Vikash Kumar, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported performance issue in our EJ2 Spreadsheet with our latest version (18.3.52). And the excel file loaded within (2 ~ 3 seconds) in spreadsheet. We would like to let you know that we have rendered only the activeSheet only and the remaining sheets are created while switching the sheets. So, only the time delay occurs while switching the sheet. 

 

 Meanwhile, in your excel file there are nearly 8000 formula cells available in workbook and cell formats (color, border  ...) are applied  randomly, so rendering of such formatted sheets in spreadsheet takes some amount of time.  

 

And the sheet is in protected state so only the toolbar, dropdown buttons are in disabled state and it is our behavior as like as MS Excel. To enable the toolbar buttons you need to unprotect the sheet. For your convenience, we have prepared the video demonstration of this. Please find the link below. 

 

Video Link: https://www.syncfusion.com/downloads/support/forum/160416/ze/EJ2-excel-1549617047 

 

NOTE: (ej2.minjs) file contains all EJ2 component scripts and you don’t need to refer the dependent scripts individually. Either you refer ej2.min.js file or dependent scripts separately. 

 

Could you please check the above details and get back to us, if you need any further assistance 

 

Regards, 

Sangeetha M