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

    Hello,

    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.openSpreadsheet=function(){
     
    $scope.modalInstance = $modal.open({
    templateUrl: 'spreadsheetmodal.html',
    scope: $scope
    });
    $scope.spreadSheetOptionsEdit={
    toolbar: {
    home: [
    "open",
    "exportAs"
    ],
    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
    Admin
    Stefan avatar
    418 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.

    $('#spreadsheetID').data("kendoSpreadsheet").resize();

    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.

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