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
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
Rank 1
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
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/.