Spreadsheet doesn't resize automatically inside Window

[Marc]

I have a Kendo spreadsheet widget inside a Kendo window widget. On my screen I have 2 Kendo windows. There is a button to toggle between both windows being 50% height and 100% width, and 100% height and 50% width. I use a custom function here to size and align the windows.

The way I actually change the position is below:

myWindow.wrapper.css({
top: top,
left: left,
width: width,
height: height
});

 

However, when I do this, my spreadsheet components inside the windows are not resized. The spreadsheet div with the scrollbar is resized, but not the actual div which holds the spreadsheet cells (image attached).

 

Thanks!

[Stefan]

Hello Marc,

This can be achieved on the resize event of the Window. When the Window is resized, change the width and height of the Spreadsheet element and then use the resize method of the Kendo UI Widget to properly adjust the widget dimensions after the new width and height are applied:

http://docs.telerik.com/kendo-ui/api/javascript/ui/window#events-resize

http://docs.telerik.com/kendo-ui/api/javascript/ui/widget#methods-resize

$("#spreadsheet").css({height:height,width:width});
$("#spreadsheet").data("kendoSpreadsheet").resize();

I hope this will help to achieve the desired result.


Regards,
Stefan
Telerik by Progress

[Marc]

Hey, it worked perfectly! Thank you.

I have another question about the spreadsheet component, I'm trying to use a custom cell editor - a validation which ensures the user selects from a dropdown list.

I'm using the configuration from http://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#configuration-sheets.rows.cells.validation (sheets.rows.cells.validation).

1. Is there a way to bind data from a web service to the list?

2. Is there a way to dynamically add this validator to every cell in a column? Something like spreadsheet.sheet.range.validator(myValidation);

Thanks!

[Stefan]

Hello Marc,

I'm glad that the issue is resolved.

Regarding the questions:

1) The Kendo UI SpreadSheet can be used together with a DataSource to load the data from the server:

http://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/import-and-export-data/bind-to-data-source

http://demos.telerik.com/kendo-ui/spreadsheet/datasource

2) Setting a validation to a specific range can be achieved using the validation method of the Kendo UI SpreadSheet Range. The method can be called on a button click or other specific event to dynamically change the validation:

http://docs.telerik.com/kendo-ui/api/javascript/spreadsheet/range#methods-validation

Additionally, when the new questions are not directly related to the original topic we will appreciate opening a new thread. For example, in the forum, this will provide better search result based on the topic and help to the Kendo UI community when facing the same issues or questions.

Thank you in advance.

Regards,
Stefan
Telerik by Progress

[Marc]

Hi,

 

I'm trying this solution in a different use case and cannot get it to work.

Insider my window resize I have a spreadsheet, but I dont know the ID (dynamically created spreadsheet).

I then do the following:

var mySpreadsheet = myWindow.element.find($("div[data-role='spreadsheet']"));

mySpreadsheet.css({'width': (myWindow.myLocalWindow.width - 65) + 'px' , 'height': (myWindow.myLocalWindow.height - 65) + 'px'});
mySpreadsheet.data("kendoSpreadsheet").resize();

myWindow.myLocalWindow is the kendo window object of the window that is being resized.

Thanks!

 

[Stefan]

Hello Marc,

Taking the Spreadsheet instance using the new approach should work as expected.

I made a Dojo example using the provided approach without the ID:

http://dojo.telerik.com/unIKO

I can assume that the issue is caused by a custom code which we may be overlooking at this moment.

Could you please provide a runnable example or modify the provided Dojo to reproduce the issue so I can investigate further?


Regards,
Stefan
Telerik by Progress

[Marc]

Hey,

I've already fixed this. It was done with the following:

 

var mySpreadsheet = myWindow.element.find($("div[data-role='spreadsheet']"));