Help: Bug: height / windows in Kendo Spreadsheet Excel always dynamically change when click in area of cells

3 posts, 1 answers
  1. Ucu
    Ucu avatar
    2 posts
    Member since:
    Jan 2018

    Posted 31 Jan 2018 Link to this post

    Dear all..

    Good day!

    Hello, I'm Ucu, I have some issue/bug that I can't find/solve it. I generated some excel spreadsheet using Kendo.

    When the spreadsheet open, and then I click the cells or I press the keyboard to move into other cells, the height of window Spreadsheet is change dynamically, increment +2 px. I try to change / edit the css in browser, but nothing change, the height of window still change upper and upper. how can I solve this? please let me know if you have same experience with me, how to solve this..here is my js code ..

    01.function initiateSheet(tipeLayanan){
    02.            if(tipeLayanan=="H123"){
    03.                pengangkatanStart = dummyGetObject.result.dealer.pengangkatanStart;
    04.                //console.log("pengangkatanStart di JS: "+pengangkatanStart);
    05.                createSheetConfigPerfH1("Performance H1");
    06.                createSheetConfigPerfH23("Performance H23");
    07.                createSheetConfigPotH1();
    08.                createSheetConfigPotH23();
    09.                createSheetConfigSummary();
    10.                createSheetConfigEvalForm();
    11.                $("#spreadsheet").kendoSpreadsheet({
    12.                render: function(e){
    13.                    //Hides the insert button
    14.                    $(".k-spreadsheet .k-spreadsheet-sheets-bar .k-button").hide();
    15.                   
    16.                    //Hides the remove icon
    17.                    $(".k-spreadsheet .k-spreadsheet-sheets-bar .k-spreadsheet-sheets-remove").hide();
    18.                },
    19.                toolbar:false,
    20.                sheets:[sheetPerformanceH1,sheetPerformanceH23,sheetPotentialH1,sheetPotentialH23,sheetSummary,sheetEvaluationForm],
    21.                pdf: {
    22.                    size: "auto",
    23.                    area: "sheet",
    24.                    landscape: false,
    25.                    fitWidth: true,
    26.                    hCenter: true,
    27.                    vCenter: false,
    28.                    fileName: dummyGetObject.result.dealer.dealerCode+"_Evaluation Dealer TA.pdf",
    29.                    guidelines: false,
    30.                    margin: {
    31.                        left: 25,
    32.                        right: 40,
    33.                        top: 20,
    34.                        bottom: 20
    35.                    }
    36.                }
    37.                });
    38.                createSummary();
    39.            }
    40.}

     

    and then here is my html

     

    05. 
    09. 
    10.<!--<script src="libs/kendo-2017.3.913/kendo.all.min.js"></script>-->
    11.<div style="display: block;height: 96%;">
    12.    <!--<button onclick="myFunction()" id="save">Save Changes!</button>-->
    13.    <div id="spreadsheet" style="width: 100%; height:100%"></div>
    14.    <button id="save" class="saveBtn">Save As Draft</button>
    15.    <button id="submit" class="submitBtn">Submit</button>
    16.    <button id="export" class="exportBtn">Download File</button>
    17.</div>
    18.<script src="libs/kendo-2017.2.614/kendo.all.min.js"></script>
    19.<!--<link href="libs/kendo-2017.2.614/kendo.common.min.css" rel="stylesheet" />-->
    20.<script src="app/pages/evaluationdealerspreadsheet/evaluationdealerspreadsheet_sheetConfig.js"></script>

     

    for detail, I attach the screenshot of my issues. see attachments.

     

    I hope I can find the answer here. Thanks in advance

  2.
  3. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1228 posts

    Posted 02 Feb 2018 Link to this post

    Hi Ucu,

    Here you will find a simple Dojo, based on the described scenario. You will notice, that it does not reproduce the issue observed at your end. Could you, please, modify that example, so it reproduces the problem observed and send it back to us?

    What I have noticed is that you are applying DOM modifications on each render event of the widget. May I ask you to try applying CSS instead:
    .k-spreadsheet .k-spreadsheet-sheets-bar .k-button,
    .k-spreadsheet .k-spreadsheet-sheets-bar .k-spreadsheet-sheets-remove {
      display: none;
    }

    Moreover, you could skip the CSS rule too, as the hidden buttons are displayed in the Toolbar, which has been disabled in the configuration of the widget:
    $("#spreadsheet").kendoSpreadsheet({
      toolbar:false,
    ......

    Does the removal of the render handler resolves the issue?

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Ucu
    Ucu avatar
    2 posts
    Member since:
    Jan 2018

    Posted 04 Feb 2018 in reply to Veselin Tsvetanov Link to this post

    Hi Veselin, 

    Thanks for replying me.

    After I followed your instruction, and I try to applying the CSS, the height still changing, so I undo my changes to the CSS..

    but, when edit my html to make it similar like in the link (simple dojo)..the problem solve! it works..

     

    here I post my html code:

    <div style="display: block;">
        <div id="spreadsheet" style="width: 100%;">
        </div>
        <button id="Button1" class="saveBtn">Save As Draft</button>
        <button id="submit" class="submitBtn">Submit</button>
        <button id="export" class="exportBtn">Download File</button>
    </div>
    <script src="libs/kendo-2017.2.614/kendo.all.min.js"></script>
    <script src="app/pages/evaluationdealerspreadsheet/evaluationdealerspreadsheet_sheetConfig.js"></script>

     

    and I update my style.css to make it full screen

    /* Window */
    div.k-window-content
    {
        overflow-x: hidden;
        padding: 0px;
    }

     

    thank you so much Veselin..you save my work..have a nice day !

    Veselin Tsvetanov said:Hi Ucu,


    Here you will find a simple Dojo, based on the described scenario. You will notice, that it does not reproduce the issue observed at your end. Could you, please, modify that example, so it reproduces the problem observed and send it back to us?

    What I have noticed is that you are applying DOM modifications on each render event of the widget. May I ask you to try applying CSS instead:

    .k-spreadsheet .k-spreadsheet-sheets-bar .k-button,
    .k-spreadsheet .k-spreadsheet-sheets-bar .k-spreadsheet-sheets-remove {
      display: none;
    }


    Moreover, you could skip the CSS rule too, as the hidden buttons are displayed in the Toolbar, which has been disabled in the configuration of the widget:

    $("#spreadsheet").kendoSpreadsheet({
      toolbar:false,
    ......


    Does the removal of the render handler resolves the issue?

    Regards,
    Veselin Tsvetanov
    Progress Telerik

    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Back to Top