This is a migrated thread and some comments may be shown as answers.

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

2 Answers 277 Views

Spreadsheet

This is a migrated thread and some comments may be shown as answers.

Ucu asked on 01 Feb 2018, 02:29 AM

1_when_open.png

2_when_trytofindtheissue.png

3_afterclickseveraltimes.png

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 the in , but nothing change, the height of window still change upper and upper. how can I solve this? please let me know if you have 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

01.<script src="http://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css"></script>

02.<script src="http://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css"></script>

03.<script src="http://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css"></script>

04.<script src="http://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css"></script>

05.

06.<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

07.<script src="http://kendo.cdn.telerik.com/2017.3.913/js/jszip.min.js"></script>

08.<script src="http://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>

09.

10.

11.<div style="display: block;height: 96%;">

12. 

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.

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 Answers, 1 is accepted

Accepted

answered on 02 Feb 2018, 09:53 AM

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.

answered on 05 Feb 2018, 04:49 AM

4_fixed.png

Hi Veselin,

Thanks for replying me.

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

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

here I post my 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

[quote]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: