Grid in hidden div renders lightgrey on mobile

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

    Posted 28 Jan 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>
    <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();
            }       
        }

     
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 01 Feb 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:

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

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top