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

Resize height of Spreadsheet widget to fit

3 Answers 387 Views
Spreadsheet
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 22 Jul 2016, 09:59 PM

When the spreadsheet loads, the width loads perfectly well and it automatically adjusts to browser resizing.  Awesome sauce.

Is there a way to coax the height of the widget to do the same?  Something like a height:100% so it happily resizes.

The default height of the spreadsheet leaves lots of space.

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 26 Jul 2016, 01:35 PM
Hello David,

You can set the height of the <DIV> the Kendo UI Spreadsheet is initialized from in accordance with your preference. If you want to set it dynamically, depending on window size, or other DOM information, you can programmatically change the height of the mentioned <DIV> in the Spreadsheet's render event:

http://dojo.telerik.com/iVuPA

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Sudip
Top achievements
Rank 1
answered on 26 Feb 2021, 03:41 PM

This works for static data only and does not work for data coming from datasource.

Create a function to recalculate height, change the CSS value of the sheet div, and call the resize method.

var sheetResize = function(){
  var height = window.innerHeight
  - $('.footer').outerHeight(true)                            // Header
  - $('.header').outerHeight(true)                            // Footer
  - parseInt($("body").css("margin-top"))                 // Margin of the <body>
  - parseInt($("body").css("margin-bottom"))
  - 2                                             // border of the Spreadsheet Div.
  ;
 
  var mySpreadsheet = $('body').find($("div[data-role='spreadsheet']"));
  mySpreadsheet.css({height:height});
  mySpreadsheet.data("kendoSpreadsheet").resize();
};

 

Call this method on window resize and in the render method:

$( window ).resize(sheetResize);
 
// ...
 
$("#spreadsheet").kendoSpreadsheet({
            render: sheetResize,
           // ...
});

http://dojo.telerik.com/@sshresth@ciena.com/IWOHiBaH

 

 

 

0
Petar
Telerik team
answered on 02 Mar 2021, 09:27 AM

Hi Sudip,

Thank you for sharing your solution with the community! It will surely help someone who uses the Spreadsheet with a datasource binding.

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Spreadsheet
Asked by
David
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Sudip
Top achievements
Rank 1
Petar
Telerik team
Share this question
or