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

Spreadsheet doesn't resize automatically inside Window

6 Answers 526 Views
Spreadsheet
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 29 Nov 2016, 02:24 PM

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!

6 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 01 Dec 2016, 07:32 AM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Marc
Top achievements
Rank 1
answered on 01 Dec 2016, 07:56 AM

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!

0
Stefan
Telerik team
answered on 05 Dec 2016, 07:30 AM
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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Marc
Top achievements
Rank 1
answered on 13 Dec 2016, 01:19 PM

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!

 

0
Accepted
Stefan
Telerik team
answered on 15 Dec 2016, 08:42 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Marc
Top achievements
Rank 1
answered on 15 Dec 2016, 09:00 AM

Hey,

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

 

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

Tags
Spreadsheet
Asked by
Marc
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Marc
Top achievements
Rank 1
Share this question
or