Grid in hidden div renders lightgrey on mobile

[Erik]

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>
<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() {
        $('#PaymentHistoryGrid').html('');

        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",
        }).data("kendoWindow");
        var windowTemplate = kendo.template($("#windowTemplate").html());

        var rot = OneResidentUtilities.getResourceOwnerToken();

        $("#PaymentHistoryGrid").kendoGrid({
            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 = $(e.target).closest("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
                            window.open().center();

                            $("#yesButton").click(function() {
                                cancelPayment(data);
                                window.close();
                            });
                            $("#noButton").click(function() {
                                window.close();
                            });
                        },
                        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) {
                gridDataBound(e);
            },
            editable: true,
            mobile: true,
            theme: 'bootstrap',
            sortable: true,
            filterable: true,
            scrollable: true,
        });
    }

    function viewPaymentHistory() {
        $('#PaymentHistoryGrid').toggle();
    }

    function gridDataBound(e) {
        $('#lastPaymentTable').hide();
        $('#paymentHistoryLoader').show();
        var grid = $("#PaymentHistoryGrid").data("kendoGrid");
        var gridData = grid.dataSource.view();
        if (gridData.length === 0) {
            $('#paymentHistoryButtons').hide();
            $('#paymentHistoryGrid').hide();
            $('#noPaymentHistoryFound').show();
            $('#paymentHistoryLoader').hide();
        }
        else {
            $('#noPaymentHistoryFound').hide();
            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");
                    cancelButton.hide();
                } else {
                    showCancelColumn = true;
                }
            }
            if (showCancelColumn) {
                grid.showColumn(cancelButtonColumn);
            } else {
                grid.hideColumn(cancelButtonColumn);
            }
            var lastPayment = gridData[0];
            if (lastPayment) {
                $('#lastPaymentDate').html(new Date(lastPayment.DueDate).toLocaleDateString());
                $('#lastTrackingNumber').html(lastPayment.TrackingNumber);
                $('#lastAmount').html('$' + lastPayment.Amount.toFixed(2));
                $('#lastStatus').html(lastPayment.PaymentStatusString);
                if (lastPayment.PaymentStatusString === "Scheduled") {
                    $('#cancelLastPayment').show();
                }
            }
            $('#paymentHistoryLoader').hide();
            $('#lastPaymentTable').show();
        }
    }

 

[Dimo]

Hello Erik,

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

http://docs.telerik.com/kendo-ui/controls/data-management/grid/adaptive#add-multiple-grids-to-pages

Regards,
Dimo
Telerik