Spreadsheet doesn't resize automatically inside Window

7 posts, 1 answers
  1. Marc
    Marc avatar
    167 posts
    Member since:
    Sep 2016

    Posted 29 Nov 2016 Link to this post

    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!

  2. Stefan
    Admin
    Stefan avatar
    1273 posts

    Posted 01 Dec 2016 Link to this post

    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.
  3. Marc
    Marc avatar
    167 posts
    Member since:
    Sep 2016

    Posted 01 Dec 2016 in reply to Stefan Link to this post

    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!

  4. Stefan
    Admin
    Stefan avatar
    1273 posts

    Posted 05 Dec 2016 Link to this post

    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.
  5. Marc
    Marc avatar
    167 posts
    Member since:
    Sep 2016

    Posted 13 Dec 2016 in reply to Stefan Link to this post

    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!

     

  6. Answer
    Stefan
    Admin
    Stefan avatar
    1273 posts

    Posted 15 Dec 2016 Link to this post

    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 visualization (charts) and form elements.
  7. Marc
    Marc avatar
    167 posts
    Member since:
    Sep 2016

    Posted 15 Dec 2016 in reply to Stefan Link to this post

    Hey,

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

     

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

Back to Top