Possible CSS Rendering Issue on Initialization

5 posts, 1 answers
  1. Ohenewa
    Ohenewa avatar
    6 posts
    Member since:
    May 2012

    Posted 03 May 2017 Link to this post

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

  2. Ianko
    Admin
    Ianko avatar
    1940 posts

    Posted 05 May 2017 Link to this post

    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
    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.
  3. Ohenewa
    Ohenewa avatar
    6 posts
    Member since:
    May 2012

    Posted 10 May 2017 Link to this post

    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. 

  4. Answer
    Ianko
    Admin
    Ianko avatar
    1940 posts

    Posted 11 May 2017 Link to this post

    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
    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.
  5. Ohenewa
    Ohenewa avatar
    6 posts
    Member since:
    May 2012

    Posted 11 May 2017 in reply to Ianko Link to this post

    Calling resize() OnTabShow resolved my issue.

    Thanks so much

Back to Top