Настройка ячеек dgrid для отображения полной ширины данных

Question

Я пишу приложение, в котором результирующий dgrid может иметь различное количество столбцов / столбцов ширины в зависимости от ввода. Обратите внимание на следующие два скриншота. В первом есть только несколько полей выбора, а ячейки / данные отображаются горизонтально. второй запрос имеет много полей выбора, и, как вы можете видеть, рендеринг нежелателен, поскольку он пытается поместить все ячейки в один экран, загромождая данные. Обратите внимание, что dgrid также находится внутри dijit BorderContainer.

Снимок экрана 1 (Небольшой набор полей SELECT, отображает нормально)

Снимок экрана 2 (Большой набор полей SELECT, отображает нежелательно

Здесь будет ряд вопросов, с которыми придется бороться, но я думаю, что мой главный вопрос:

1. Есть ли правило css (или любой другой путь - функция / событие dgrid?), который я могу использовать, чтобы указать, для каких ячеек нужно расширяться, чтобы использовать всю ширину данных внутри них, не обрезая их (то есть не переполнение)? Затем необходимо, чтобы сетка отображалась с горизонтальной полосой прокрутки. Поэтому я бы хотел, чтобы данные определяли ширину сетки, а не устанавливали ширину. Я старался .dgrid-cell { white-space:nowrap; } но это, казалось, было проигнорировано. Кажется, что внутри ячейки должен быть добавлен промежуток, который будет иметь указанное выше правило css?
2. Во-вторых, следующей проблемой будет определение того, в каких случаях мне следует применять вышеупомянутое правило по сравнению со случаями, когда данные помещаются на экране. В этих ситуациях может быть лучше просто позволить таблице использовать ширину 100%, как показано на первом скриншоте. любой вклад на этот?

Спасибо

Answer 1

Здесь я, как я устанавливаю ширину ячейки сетки на основе данных. Это для datagrid но вам, вероятно, нужно сделать несколько корректировок для dgrid OBJ.

Есть несколько шагов:

1) Создать <div> тег в вашем HTML-вызове test

<div id="test"></div>

2) Переберите данные для каждого столбца в сетке и запишите наибольшую ширину данных для этого столбца, используя JavaScript, например:

var fnt_sz = '9pt';
var tst_item = window.document.getElementById("test");
tst_item.style.fontSize = fnt_sz;
var widthPX = 45; //default px width
for (var i = 0; i < columns.length; i++) {
  tst_item.innerHTML = columns[i]; //columns array represents data that will display for the column
   widthPX = (tst_item.clientWidth + 1); //Give width in PX of the data pad it a bit as needed
}

Важные пункты здесь включают установку соответствующего размера шрифта (fnt_sz), цикл по всем данным столбца, чтобы найти наибольшую ширину в PX для столбца. Используйте самый большой widthPX для столбца, чтобы установить ширину столбца в вашем layout объект для сетки данных.

3) При создании данных JSON макета для вашей таблицы данных установите ширину для каждого столбца (максимальная ширина данных PX для столбца). Что-то вроде:

var build_layout = "    var layout = [[{'name': 'ID', 'field': 'id', 'width': '17px'},";
for (var i = 0; i < cols.length; i++) {
  build_layout += "\n{'name': '" + cols[i] + "', 'field': 'col" + (i+1) + "', 'width': '" + widths[i] + "px'},"; 
}
build_layout += "]];";
eval(build_layout);

/*create a new grid*/
var grid = new DataGrid({
  id: 'grid',
  store: store,
  structure: layout, //Use layout JSON data which has width: xxpx; set for each column
  rowSelector: '20px',
  style: 'font-size:9pt',
  rowsPerPage: 1000,
  columnReordering: true,
  autoWidth: true,
  autoHeight: autoH});

Когда сетка отображается, она должна хорошо выглядеть в любом браузере, и все данные должны быть видны, потому что значение PX ширины столбца больше, чем самый большой элемент данных для этого столбца. Должно быть достаточно просто добавить значение max px для каждого столбца, чтобы вещи не выходят из-под контроля с шириной.

Это немного болезненно для $ss и должно быть свойством объекта djo-datagrid, но......

Вот то, что я в конечном итоге пройти через эти шаги: