Kendo Spreadsheet not rendering properly in AngularModal for second time

2 posts, 1 answers
  1. Anand
    Anand avatar
    5 posts
    Member since:
    May 2016

    Posted 20 Jan Link to this post


    I am using Kendo Spreadsheet for angular

    I want to display spreadsheet inside the angular modal,

    so whenever i open the modal,it displays correctly 

    but for the second time it doesnt display properly(all messed up UI) but as soon as I resize the window it  shows properly.

    I am attaching the screenshot for better explaination

    $scope.modalInstance = ${
    templateUrl: 'spreadsheetmodal.html',
    scope: $scope
    toolbar: {
    home: [
    insert: [
    [ "addColumnLeft", "addColumnRight", "addRowBelow", "addRowAbove" ],
    [ "deleteColumn", "deleteRow" ]



    In view-

    <kendo-spreadsheet  k-scope-field="spreadsheet" id="spreadsheet"  k-options="spreadSheetOptionsEdit" k-sheets="sheetsEdit" ></kendo-spreadsheet>


  2. Answer
    Stefan avatar
    1131 posts

    Posted 23 Jan Link to this post

    Hello Anand,

    I can assume that the issue occurs because of specifics connected to the Angular Modal window.

    In this scenario, I can suggest some approaches that may be helpful:

    - Programmatically resized the modal window after it is open to allow the Spreadsheet to correctly resize itself.

    - Or once the modal window is opened, resize the Spreadsheet using its resize() method.


    If this does not resolve the issue, please send a fully runnable example reproducing it, so I can provide a suggestion best suited for it.

    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.
Back to Top