Kendo Spreadsheet not rendering properly in AngularModal for second time

[Anand]

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>

 

[Stefan]

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