Grid in hidden div renders lightgrey on mobile

2 posts, 0 answers
  1. Erik
    Erik avatar
    50 posts
    Member since:
    Jan 2011

    Posted 28 Jan 2016 Link to this post

    Hi - I'm using the Kendo Grid and it is behaving strangely on mobile devices when being included in
    an initially-hidden div.  I'm using Bootstrap and the latest version of Kendo UI.
    The basic layout is this -- I have a button toward the bottom of a Bootstrap panel, and a div underneath that (still
    inside the panel), which gets initialized to a kendo grid and has an initial style of "display:none;".
    The button toggles the display of the grid.  This works perfectly on desktop browsers.
    On mobile devices a light grey renderding of the space for the grid shows up (see the "HiddenDivs" image).  When I
    click the "Show / Hide" button, the grid shows up nicely (see the "showing data" image).
    What can I do to prevent the light grey showing when the grid is hidden?
    Here is the HTML code:
    <div id="paymentHistoryButtons" style="padding-bottom: 30px;">
        <button class="btn btn-xs btn-info pull-right" onclick="viewPaymentHistory();">Show / Hide History</button>
    <div id="PaymentHistoryGrid" style="display: none;"></div>
    Here is the javascript that sets up the grid -- the "getPaymentHistory" function is called in document.ready.

    function getPaymentHistory() {
            var consumerId = @NwpSession.SelectedAccount.ConsumerId;
            var merchantId = @NwpSession.SelectedAccount.PropertyMerchantId;
            var window = $("#window").kendoWindow({
                title: "Cancel Payment",
                visible: false, //the window will not appear before its .open method is called
                width: "400px",
                height: "200px",
            var windowTemplate = kendo.template($("#windowTemplate").html());
            var rot = OneResidentUtilities.getResourceOwnerToken();
                columns: [
                { title: 'Date', field: 'DueDate', type: 'date', format: '{0:MM/dd/yyyy}' },
                { title: 'Tracking Number', field: 'TrackingNumber', width: 125},
                    { title: 'Amount', field: 'Amount', format: '{0:C}' },
                    { title: 'Status', field: 'PaymentStatusString' },
                        command: {
                            name: 'cancelButton',
                            text: 'Cancel',
                            click: function(e) {
                                var tr = $("tr"); //get the row for deletion
                                var data = this.dataItem(tr); //get the row data so it can be referred later
                                window.content(windowTemplate(data)); //send the row data object to the template and render it
                                $("#yesButton").click(function() {
                                $("#noButton").click(function() {
                            className: 'btn btn-primary btn-xs'
                dataSource: {
                    transport: {
                        read: {
                            url: 'https://' + OneResidentUtilities.getApiRoot() + '/Payments/retrieval/paymenthistory?consumerId=' + consumerId +
                                '&merchantId=' + merchantId,
                            headers: {
                                'Authorization': 'Bearer ' + rot
                            method: 'GET',
                            dataType: 'json'
                    sort: { field: "DueDate", dir: "desc" },
                dataBound: function(e) {
                editable: true,
                mobile: true,
                theme: 'bootstrap',
                sortable: true,
                filterable: true,
                scrollable: true,
        function viewPaymentHistory() {
        function gridDataBound(e) {
            var grid = $("#PaymentHistoryGrid").data("kendoGrid");
            var gridData = grid.dataSource.view();
            if (gridData.length === 0) {
            else {
                var cancelButtonColumn = grid.columns[grid.columns.length - 1];
                var showCancelColumn = false;
                for (var i = 0; i < gridData.length; i++) {
                    var currentUid = gridData[i].uid;
                    if (gridData[i].PaymentStatus != 1) {
                        var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                        var cancelButton = $(currentRow).find(".k-grid-cancelButton");
                    } else {
                        showCancelColumn = true;
                if (showCancelColumn) {
                } else {
                var lastPayment = gridData[0];
                if (lastPayment) {
                    $('#lastPaymentDate').html(new Date(lastPayment.DueDate).toLocaleDateString());
                    $('#lastAmount').html('$' + lastPayment.Amount.toFixed(2));
                    if (lastPayment.PaymentStatusString === "Scheduled") {

  2. Dimo
    Dimo avatar
    8406 posts

    Posted 01 Feb 2016 Link to this post

    Hello Erik,

    It seems that the Grid is missing a height and position style for its parent. Please check the documentation:

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top