Cannot add a spreadsheet control inside a PanelBar

2 posts, 0 answers
  1. Alessandro
    Alessandro avatar
    5 posts
    Member since:
    Sep 2014

    Posted 09 Aug Link to this post

    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>);
                })
    )

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 11 Aug Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top