Неверный стиль Jquery Mobile Grid

Question

У меня есть следующая сетка:

<div data-role="page" id="mainpage">

    <!-- header -->
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1>Main</h1>
        <a href="#optionsPanel" data-icon="gear" class="ui-btn-right">Options</a>
        <div data-role="navbar">
            <ul>
                <li><a href='/'>Menu</a></li>
            </ul>
        </div>
    </div>
    <!-- /header -->

    <!-- content -->
    <div role="main" class="ui-content">
        <div class="ui-grid-d" id="grdAssignmentDump">
        </div>
    </div>
    <!-- /content -->

    <!-- footer -->
    <div data-role="footer" data-position="fixed" data-theme="b" class="ui-bar">
        &nbsp;
    </div>
    <!-- /footer -->

</div>

По какой-то причине я не могу заставить стиль сетки иметь «квадратный» вид. Он показывает каждый элемент в виде кнопки и раунда. Я хотел бы, чтобы сетка была квадратной и соединенной, как обычно. Не уверен, в чем проблема. Вот JavaScript, чтобы заполнить сетку. Все работает нормально, просто стиль не показывает правильный стиль в квадрате для мобильного jquery. Вот javascript для заполнения сетки (работает правильно):

function LoadInfo(info) {

        // Set Assignment Date
        var e = document.getElementById(info);
        var assignmentDate = e.options[e.selectedIndex].value;

        $.ajax({
            type: 'GET',
            url: '@Url.Action("getAssignmentDump")',
            data: { assignmentId: assignmentId, assignmentDate: assignmentDate },
            dataType: 'json',
            success: function (data) {

                // Create assignment dump grid
                var grdHtml = "";

                // Loop through each record returned from json
                $.each(data, function (i, item) {

                    // Add row to grid
                    grdHtml += "<div class='ui-block-a'><div class='ui-bar ui-bar-a'>" + item.user + "</div></div>";
                    grdHtml += "<div class='ui-block-b'><div class='ui-bar ui-bar-a'>" + item.assignmentTime + "</div></div>";
                    grdHtml += "<div class='ui-block-c'><div class='ui-bar ui-bar-a'>" + item.complete + "</div></div>";
                    grdHtml += "<div class='ui-block-d'><div class='ui-bar ui-bar-a'>" + item.redone + "</div></div>";

                });

                // Fill grid
                $('#grdAssignmentDump').html(grdHtml);

                // Refresh grid to enhance its styling
                //$('#grdAssignmentDump').grid("refresh");

            },
            error: function (ex) {
                var r = jQuery.parseJSON(response.responseText);
                alert("Message: " + r.Message);
                alert("StackTrace: " + r.StackTrace);
                alert("ExceptionType: " + r.ExceptionType);
            }
        });
    }

Вот как выглядят столбцы (неверно):

Вот как должны выглядеть колонны (квадратные углы):

Чего мне не хватает? Спасибо.