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

Kendo Spreadsheet not rendering properly in AngularModal for second time

1 Answer 65 Views
Spreadsheet
This is a migrated thread and some comments may be shown as answers.
Anand
Top achievements
Rank 1
Anand asked on 20 Jan 2017, 06:37 AM

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>

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 23 Jan 2017, 02:54 PM
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.
Tags
Spreadsheet
Asked by
Anand
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or