Dojo DataGrid не отображается

Question

В моем dojo.xhrGet я указал это load::

load: function (data) {
    // reset data display containers
    dojo.addClass("search_results", "hide_on_load");
    dojo.byId("search_results_found").innerHTML = "";
    // populate table with new results.
    dojo.byId("search_results_found").innerHTML = "" + data.length + " search result(s) found.";

    // when data is from an XHR request, you must transform it into a store.
    // See: /1620081/datagrid-v-dojo-s-dannymi-json-iz-servleta
    var items = dojo.map(data, function (res_row) {
        return {
            'Id': res_row.Id,
            'Name': res_row.Name,
            'VisitType': res_row.VisitType,
            'VisitDate': res_row.VisitDate
        };
    });

    var store = new dojo.data.ItemFileReadStore({
        data: {
            items: items
        }
    });

    var res_layout = [
        {field: 'Id',        name: 'ID',         width: '10%'},
        {field: 'Name',      name: 'Site Name',  width: '50%'},
        {field: 'VisitType', name: 'Visit Type', width: '20%'},
        {field: 'VisitDate', name: 'Visit Date', width: '20%'}
        ];

    // create a new grid:
    var res_grid = new dojox.grid.DataGrid({
        store: store,
        structure: res_layout,
        rowsPerPage: 10
    }, document.createElement('div'));

    // append the new grid to the div "search_results_table":
    dojo.byId("search_results_table").appendChild(res_grid.domNode);

    // Call startup, in order to render the grid:
    res_grid.startup();

    dojo.removeClass("search_results", "hide_on_load");
    standby.hide();
},

И HTML:

<!-- Search Results Table -->
<div id="search_results" class="hide_on_load">
    <div id="search_results_found"></div>
    <div id="search_results_table"></div>
</div>

В конце этого скрипта сетка делаетне показывать.

Я удалил селектор класса hide_on_load css, чтобы исключить его как проблему.Но это не помогло.

Глядя на консоль, ошибок не регистрируется.

Кроме того, при записи различных объектов (res_grid, store и т. Д.) Все выдает результат, который выглядит какбыть правильным.

Может ли кто-нибудь помочь с тем, как его показать?

Спасибо!

Обновление:

Когда я проверяю DOM после выполнения этого кода, я вижу созданный с заголовками планшет, но затем, когда я иду, чтобы найти фактическую таблицу с результатами поиска (ниже div class=dojoxGridContent), ее там нет.

Обновление 2:

У меня тоже указаны стили:

<style type="text/css">
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
    .dojoxGrid table { margin: 0; }
</style>

Answer 1

Убедитесь, что вы установили размер с помощью свойства style в div, где вы размещаете свою сетку, и не забудьте импортировать CSS-файлы для вашей сетки, например:

<style type="text/css">
    @import "dojoroot/dojox/grid/resources/Grid.css";
    @import "dojoroot/dojox/grid/resources/soriaGrid.css";

    .dojoxGrid table {
        margin: 0;
    }
</style>

Примечание: Заменитьsoria по темам, которые вы используете ...

... и не забудьте установить размер dom-узла вашей сетки:

<div id="gridnode" style="width:100%; height:500px;"></div>

Answer 2

Если вам не нужна фиксированная высота, вы можете объявить сетку с помощью autoHeight: true.

var res_grid = new dojox.grid.DataGrid({

        store: store,
        structure: res_layout,
        rowsPerPage: 10,
        autoHeight: true
    }, document.createElement('div'));

С этим атрибутом вам не нужно добавлять стиль в родительский контейнер для его отображения.