Possible CSS Rendering Issue on Initialization

[Ohenewa]

After spreadsheet initialization, the controls renders as a blank control (no rows, no columns), the tabs rendering is also impacted. If I click the add sheet (+) and go back to the first sheet, the rendering issue seems to resolve itself. There don't seem to be any errors during the initialization process

 

var configureBalanceSheetSpreadSheet = function (batchId) {
                $.getJSON("../../../Data/FinancialsJson/Templates/BalanceSheetTemplate.json")
                .done(function (json) {
                    $("#balanceSheetSpreadSheet").kendoSpreadsheet({
                        sheetsbar:false
                    });
                    var spreadsheet = $("#balanceSheetSpreadSheet").getKendoSpreadsheet();
                    spreadsheet.fromJSON(json);
                })
                .fail(function (jqxhr, textStatus, error) {
                    console.log("Request Failed: " + error);
                });
            }

[Ianko]

Hello Ohenewa,

I simulated the described behavior in a dojo example, but I was unable to experience any difficulties with how Spreadsheet is rendered. Here you are the dojo I created to test with and see if I am missing something: http://dojo.telerik.com/aWUNO. 

Regards,
Ianko
Telerik by Progress

[Ohenewa]

My spreadsheet is being rendered within a twitter bootstrap wizard control 

https://github.com/VinceG/twitter-bootstrap-wizard

I also noticed that when I get that initial rendering, if I "Restore Down" my chrome window and "Restore Up" again, the spreadsheet renders properly. I tried calling resize() on the spreadsheet after it renders and that's not working. 

[Ianko]

Hello Ohenewa,

The resize method works fine on my end. This bootstrap wizard widget, however, does not expose a suitable event to call it. The onTabShow is triggered before content is rendered and thus, you need a setTimeout to call the resize method and properly re-render the spreadsheet.

<div id="rootwizard">
    <ul>
        <li><a href="#tab1" data-toggle="tab"><span class="label">1</span> First</a></li>
        <li><a href="#tab2" data-toggle="tab"><span class="label">2</span> Second</a></li>

    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1">
            1
        </div>
        <div class="tab-pane" id="tab2">
            <div id="spreadsheet" style="width: 100%;"></div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('#rootwizard').bootstrapWizard({
            onTabShow: function (ev) {
                setTimeout(function () {
                    $("#spreadsheet").data("kendoSpreadsheet").resize();
                }, 0)
            }
        });
    });

    var spreadJson = { "activeSheet": "Food Order", "sheets": [{ "name": "Food Order", "rows": [{ "index": 0, "height": 70, "cells": [{ "value": "Invoice #52 - 06/23/2015", "background": "#60b5ff", "color": "#ffffff", "fontSize": 32, "textAlign": "center", "index": 0 }] }, { "index": 1, "height": 25, "cells": [{ "value": "ID", "background": "#a7d6ff", "color": "#003e75", "textAlign": "center", "index": 0 }, { "value": "Product", "background": "#a7d6ff", "color": "#003e75", "textAlign": "center", "index": 1 }, { "value": "Quantity", "background": "#a7d6ff", "color": "#003e75", "textAlign": "center", "index": 2 }, { "value": "Price", "background": "#a7d6ff", "color": "#003e75", "textAlign": "center", "index": 3 }, { "value": "Tax", "background": "#a7d6ff", "color": "#003e75", "textAlign": "center", "index": 4 }, { "value": "Amount", "background": "#a7d6ff", "color": "#003e75", "textAlign": "center", "index": 5 }, { "background": "#a7d6ff", "color": "#003e75", "index": 6 }] }, { "index": 13, "height": 25, "cells": [{ "background": "#c1e2ff", "color": "#003e75", "index": 0 }, { "background": "#c1e2ff", "color": "#003e75", "index": 1 }, { "background": "#c1e2ff", "color": "#003e75", "index": 2 }, { "background": "#c1e2ff", "color": "#003e75", "index": 3 }, { "value": "Tip:", "background": "#c1e2ff", "color": "#003e75", "textAlign": "right", "verticalAlign": "bottom", "index": 4 }, { "format": "$#,##0.00", "value": 20.0748, "formula": "SUM(F3:F11)*0.1", "background": "#c1e2ff", "color": "#003e75", "bold": "true", "verticalAlign": "bottom", "index": 5 }, { "background": "#c1e2ff", "color": "#003e75", "index": 6 }] }, { "index": 14, "height": 50, "cells": [{ "background": "#c1e2ff", "color": "#003e75", "index": 0 }, { "background": "#c1e2ff", "color": "#003e75", "index": 1 }, { "value": "Total Amount:", "background": "#c1e2ff", "color": "#003e75", "fontSize": 20, "textAlign": "right", "index": 2 }, { "format": "$#,##0.00", "value": 220.8228, "formula": "SUM(F3:F14)", "background": "#c1e2ff", "color": "#003e75", "fontSize": 20, "bold": "true", "index": 5 }, { "background": "#c1e2ff", "color": "#003e75", "index": 6 }] }, { "index": 2, "cells": [{ "value": 216321, "background": "#ffffff", "color": "#003e75", "textAlign": "center", "index": 0 }, { "value": "Calzone", "background": "#ffffff", "color": "#003e75", "index": 1 }, { "value": 1, "background": "#ffffff", "color": "#003e75", "textAlign": "center", "index": 2 }, { "format": "$#,##0.00", "value": 12.39, "background": "#ffffff", "color": "#003e75", "index": 3 }, { "format": "$#,##0.00", "value": 2.4779999999999998, "formula": "C3*D3*0.2", "background": "#ffffff", "color": "#003e75", "index": 4 }, { "format": "$#,##0.00", "value": 14.868, "formula": "C3*D3+E3", "background": "#ffffff", "color": "#003e75", "index": 5 }, { "background": "#ffffff", "color": "#003e75", "index": 6 }] }, { "index": 3, "cells": [{ "value": 546897, "background": "#e5f3ff", "color": "#003e75", "textAlign": "center", "index": 0 }, { "value": "Margarita", "background": "#e5f3ff", "color": "#003e75", "index": 1 }, { "value": 2, "background": "#e5f3ff", "color": "#003e75", "textAlign": "center", "index": 2 }, { "format": "$#,##0.00", "value": 8.79, "background": "#e5f3ff", "color": "#003e75", "index": 3 }, { "format": "$#,##0.00", "value": 3.516, "formula": "C4*D4*0.2", "background": "#e5f3ff", "color": "#003e75", "index": 4 }, { "format": "$#,##0.00", "value": 21.095999999999997, "formula": "C4*D4+E4", "background": "#e5f3ff", "color": "#003e75", "index": 5 }, { "background": "#e5f3ff", "color": "#003e75", "index": 6 }] }, { "index": 4, "cells": [{ "value": 456231, "background": "#ffffff", "color": "#003e75", "textAlign": "center", "index": 0 }, { "value": "Pollo Formaggio", "background": "#ffffff", "color": "#003e75", "index": 1 }, { "value": 1, "background": "#ffffff", "color": "#003e75", "textAlign": "center", "index": 2 }, { "format": "$#,##0.00", "value": 13.99, "background": "#ffffff", "color": "#003e75", "index": 3 }, { "format": "$#,##0.00", "value": 2.798, "formula": "C5*D5*0.2", "background": "#ffffff", "color": "#003e75", "index": 4 }, { "format": "$#,##0.00", "value": 16.788, "formula": "C5*D5+E5", "background": "#ffffff", "color": "#003e75", "index": 5 }, { "background": "#ffffff", "color": "#003e75", "index": 6 }] }, { "index": 5, "cells": [{ "value": 455873, "background": "#e5f3ff", "color": "#003e75", "textAlign": "center", "index": 0 }, { "value": "Greek Salad", "background": "#e5f3ff", "color": "#003e75", "index": 1 }, { "value": 1, "background": "#e5f3ff", "color": "#003e75", "textAlign": "center", "index": 2 }, { "format": "$#,##0.00", "value": 9.49, "background": "#e5f3ff", "color": "#003e75", "index": 3 }, { "format": "$#,##0.00", "value": 1.8980000000000001, "formula": "C6*D6*0.2", "background": "#e5f3ff", "color": "#003e75", "index": 4 }, { "format": "$#,##0.00", "value": 11.388, "formula": "C6*D6+E6", "background": "#e5f3ff", "color": "#003e75", "index": 5 }, { "background": "#e5f3ff", "color": "#003e75", "index": 6 }] }, { "index": 6, "cells": [{ "value": 456892, "background": "#ffffff", "color": "#003e75", "textAlign": "center", "index": 0 }, { "value": "Spinach and Blue Cheese", "background": "#ffffff", "color": "#003e75", "index": 1 }, { "value": 3, "background": "#ffffff", "color": "#003e75", "textAlign": "center", "index": 2 }, { "format": "$#,##0.00", "value": 11.49, "background": "#ffffff", "color": "#003e75", "index": 3 }, { "format": "$#,##0.00", "value": 6.894, "formula": "C7*D7*0.2", "background": "#ffffff", "color": "#003e75", "index": 4 }, { "format": "$#,##0.00", "value": 41.364, "formula": "C7*D7+E7", "background": "#ffffff", "color": "#003e75", "index": 5 }, { "background": "#ffffff", "color": "#003e75", "index": 6 }] }, { "index": 7, "cells": [{ "value": 546564, "background": "#e5f3ff", "color": "#003e75", "textAlign": "center", "index": 0 }, { "value": "Rigoletto", "background": "#e5f3ff", "color": "#003e75", "index": 1 }, { "value": 1, "background": "#e5f3ff", "color": "#003e75", "textAlign": "center", "index": 2 }, { "format": "$#,##0.00", "value": 10.99, "background": "#e5f3ff", "color": "#003e75", "index": 3 }, { "format": "$#,##0.00", "value": 2.198, "formula": "C8*D8*0.2", "background": "#e5f3ff", "color": "#003e75", "index": 4 }, { "format": "$#,##0.00", "value": 13.188, "formula": "C8*D8+E8", "background": "#e5f3ff", "color": "#003e75", "index": 5 }, { "background": "#e5f3ff", "color": "#003e75", "index": 6 }] }, { "index": 8, "cells": [{ "value": 789455, "background": "#ffffff", "color": "#003e75", "textAlign": "center", "index": 0 }, { "value": "Creme Brulee", "background": "#ffffff", "color": "#003e75", "index": 1 }, { "value": 5, "background": "#ffffff", "color": "#003e75", "textAlign": "center", "index": 2 }, { "format": "$#,##0.00", "value": 6.99, "background": "#ffffff", "color": "#003e75", "index": 3 }, { "format": "$#,##0.00", "value": 6.990000000000001, "formula": "C9*D9*0.2", "background": "#ffffff", "color": "#003e75", "index": 4 }, { "format": "$#,##0.00", "value": 41.940000000000005, "formula": "C9*D9+E9", "background": "#ffffff", "color": "#003e75", "index": 5 }, { "background": "#ffffff", "color": "#003e75", "index": 6 }] }, { "index": 9, "cells": [{ "value": 123002, "background": "#e5f3ff", "color": "#003e75", "textAlign": "center", "index": 0 }, { "value": "Radeberger Beer", "background": "#e5f3ff", "color": "#003e75", "index": 1 }, { "value": 4, "background": "#e5f3ff", "color": "#003e75", "textAlign": "center", "index": 2 }, { "format": "$#,##0.00", "value": 4.99, "background": "#e5f3ff", "color": "#003e75", "index": 3 }, { "format": "$#,##0.00", "value": 3.992, "formula": "C10*D10*0.2", "background": "#e5f3ff", "color": "#003e75", "index": 4 }, { "format": "$#,##0.00", "value": 23.952, "formula": "C10*D10+E10", "background": "#e5f3ff", "color": "#003e75", "index": 5 }, { "background": "#e5f3ff", "color": "#003e75", "index": 6 }] }, { "index": 10, "cells": [{ "value": 564896, "background": "#ffffff", "color": "#003e75", "textAlign": "center", "index": 0 }, { "value": "Budweiser Beer", "background": "#ffffff", "color": "#003e75", "index": 1 }, { "value": 3, "background": "#ffffff", "color": "#003e75", "textAlign": "center", "index": 2 }, { "format": "$#,##0.00", "value": 4.49, "background": "#ffffff", "color": "#003e75", "index": 3 }, { "format": "$#,##0.00", "value": 2.694, "formula": "C11*D11*0.2", "background": "#ffffff", "color": "#003e75", "index": 4 }, { "format": "$#,##0.00", "value": 16.164, "formula": "C11*D11+E11", "background": "#ffffff", "color": "#003e75", "index": 5 }, { "background": "#ffffff", "color": "#003e75", "index": 6 }] }, { "index": 11, "cells": [{ "background": "#e5f3ff", "color": "#003e75", "index": 0 }, { "background": "#e5f3ff", "color": "#003e75", "index": 1 }, { "background": "#e5f3ff", "color": "#003e75", "index": 2 }, { "background": "#e5f3ff", "color": "#003e75", "index": 3 }, { "background": "#e5f3ff", "color": "#003e75", "index": 4 }, { "background": "#e5f3ff", "color": "#003e75", "index": 5 }, { "background": "#e5f3ff", "color": "#003e75", "index": 6 }] }, { "index": 12, "cells": [{ "background": "#ffffff", "color": "#003e75", "index": 0 }, { "background": "#ffffff", "color": "#003e75", "index": 1 }, { "background": "#ffffff", "color": "#003e75", "index": 2 }, { "background": "#ffffff", "color": "#003e75", "index": 3 }, { "background": "#ffffff", "color": "#003e75", "index": 4 }, { "background": "#ffffff", "color": "#003e75", "index": 5 }, { "background": "#ffffff", "color": "#003e75", "index": 6 }] }], "columns": [{ "index": 0, "width": 100 }, { "index": 1, "width": 215 }, { "index": 2, "width": 115 }, { "index": 3, "width": 115 }, { "index": 4, "width": 115 }, { "index": 5, "width": 155 }], "selection": "A1:G1", "activeCell": "A1:G1", "frozenRows": 0, "frozenColumns": 0, "showGridLines": true, "mergedCells": ["A1:G1", "C15:E15"], "hyperlinks": [], "defaultCellStyle": { "fontFamily": "Arial", "fontSize": "12" } }], "names": [], "columnWidth": 64, "rowHeight": 20 }

    $("#spreadsheet").kendoSpreadsheet({
        sheetsbar: false
    }).data("kendoSpreadsheet").fromJSON(spreadJson);

</script>

Regards,
Ianko
Telerik by Progress

[Ohenewa]

Calling resize() OnTabShow resolved my issue.

Thanks so much