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

Question

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

Скриншот 1 (Small ВЫБРАТЬ FIELDSET, делает КИ)

Скриншот 2 (Большой ВЫБОР Fieldset, оказывает нежелательные

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

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

Благодаря

Answer 1

Здесь я, как я установить ширину ячейки сетки на основе данных. Это для datagrid obj, но вам, вероятно, нужно внести несколько корректировок для 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 для вашего datagrid задайте ширину для каждого столбца (максимальная ширина данных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 для каждого столбца, чтобы вещи не выходили из-под контроля с шириной.

Это немного боли в $ сс и должен быть свойством объекта додзё DataGrid но ......

Вот что я в конечном итоге с выходом через эти шаги: