Cannot add a spreadsheet control inside a PanelBar

[Alessandro]

Hello Support,
Columns and Rows are not displayed when the Spreadsheet Control is placed inside a Panel Bar.
The spreadsheet control crashes with missing references when clicking on it.

Sample "simple" code.

@(Html.Kendo().PanelBar()
    .Name("TestPanelBar")
    .Items(items =>
    {
        items.Add()
            .Text("Spreadsheet1")
            .Content(@<text>
                    @(Html.Kendo().Spreadsheet()
                                        .Name("TestSpreadsheet")
                                        .HtmlAttributes(new { style = "width:100%" })
                                        .Sheets(sheets =>
                                        {
                                            sheets.Add()
                                                .Name("Sheet1")
                                                .Columns(columns =>
                                                {
                                                    columns.Add().Width(200);
                                                    columns.Add().Width(200);
                                                })
                                                .Rows(rows =>
                                                {
                                                    rows.Add().Height(25).Cells(cells =>
                                                    {
                                                        cells.Add()
                                                            .Value("Column1")
                                                            .Background("rgb(167,214,255)")
                                                            .Color("rgb(0,62,117)")
                                                            .TextAlign(SpreadsheetTextAlign.Center);

                                                        cells.Add()
                                                            .Value("Column2")
                                                            .Background("rgb(167,214,255)")
                                                            .Color("rgb(0,62,117)")
                                                            .TextAlign(SpreadsheetTextAlign.Center);
                                                    });
                                                });
                                        })
                    )
                </text>);
            })
)

[Veselin Tsvetanov]

Hello Alessandro,

Based on the code snippet send, I was able to reproduce the issue observed. I was able to solve the problem, by resizing the spreadsheet after expanding the PanelBar item. In order to do that I have implemented the following event handler for the expand event of the PanelBar:

function expand(e) {
    setTimeout(function () {
        var spread = $('#TestSpreadsheet').data('kendoSpreadsheet');
        spread.resize();
    }, 500);
}

Note also that, if you initially expand this item, (by setting .Expanded(true)), you won't face the issue observed.

You may also notice that they are some other appearance issues present that could be resolved by applying the following CSS styles:

.k-panelbar .k-spreadsheet .k-tabstrip > .k-content {
    padding: 0;
    margin: 0;
}

.k-panelbar .k-spreadsheet .k-tabstrip-bottom > .k-tabstrip-items .k-item {
    border-width: 0 1px 1px;
    border-radius: 0 0 4px 4px;
}

.k-panelbar .k-spreadsheet .k-spreadsheet-sheets-bar .k-spreadsheet-sheets-remove {
    margin: 0;
}

.k-panelbar .k-spreadsheet .k-tabstrip-bottom>.k-tabstrip-items {
    margin-left: 36px !important;
}

Regards,
Veselin Tsvetanov
Telerik by Progress