Как отключить функцию автоматической ширины столбца в Clarity Datagrid?

Мне нужно динамически создавать столбцы Clarity Datagrid в Angular. Вот как я это делаю:

У меня есть массив columnsDef, содержащий определение полей, которые мне нужно показать, например:

columnsDef = [
{id:'id', label:'ID'},
{id:'client', label:'Client/Prospect'},
...
]

и еще одна переменная backlog, которая содержит фактические данные для отображения в сетке.

затем в моем шаблоне html у меня есть следующий код для определения заголовков столбцов и ячеек:

<clr-datagrid>
  <clr-dg-column *ngFor="let def of columnsDef" [clrDgField]="def.id">
     {{ def.label }}
  </clr-dg-column>

  <clr-dg-row *clrDgItems="let request of backlog" [clrDgItem]="request">
      <clr-dg-cell *ngFor="let def of columnsDef">
          {{ request[def.id] }}
      </clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

Это на самом деле «работает», но выравнивание столбцов перепутано. Значения не ниже их заголовков, а ширина ячеек различается от строки к строке. введите описание изображения здесь

(Извините, мне пришлось пикселизировать некоторые конфиденциальные данные)

Как я могу это исправить?


datagrid vmware-clarity
person Patrick M.    schedule 10.02.2020    source источник
comment
Вы можете применить стиль с определенным width к столбцам - возможно, вам придется использовать то же значение для clr-dg-column и соответствующего clr-dg-cell   -  person Wand Maker    schedule 10.02.2020
comment
Я пробовал это, и это работает до тех пор, пока пользователь не меняет размер одного заголовка. Когда это происходит, все столбцы возвращаются к своим странным размерам. Я предполагаю, что это как-то связано с функцией автоматической ширины сетки данных.   -  person Patrick M.    schedule 10.02.2020
comment
Я предполагаю, что вам придется фиксировать ширину для всех столбцов и использовать какой-то перенос слов для столбцов, которые имеют действительно длинные значения.   -  person Wand Maker    schedule 10.02.2020

Ответы (1)


arrow_upward
1
arrow_downward

Динамические столбцы не получают расчетной ширины из-за характера жизненного цикла, содержимое не отображается вовремя, чтобы узнать, какой размер, поэтому они получают ширину по умолчанию. Если вы поместите привязку [style.width.px]="100" в каждый столбец, вместо этого он легко выберет этот размер по умолчанию.

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

    <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: isColumnHidden}">
            Column Name
        </ng-container>
    </clr-dg-column>

В некоторых случаях это может не иметь смысла (иногда столбцы вообще не должны быть доступны). В таких случаях я обычно рекомендую просто определять разные Datagrid для каждого случая вместо того, чтобы пытаться всегда иметь динамически построенный. Это делает более явным и декларативным, что такое Datagrid, и обеспечивает более четкую визуализацию.

person Jeremy Wilken    schedule 10.02.2020
comment
Использование clrDgHideableColumn кажется хорошей идеей, но, к сожалению, не работает. Проблема в том, что структура сетки извлекается из веб-службы, поэтому до тех пор, пока вызов API не будет разрешен, сетка не знает своей собственной структуры. Использование [style.width.px] = 100 сначала работает, но когда пользователь изменяет размер одного столбца, все ширины пересчитываются неправильно. Есть ли способ отключить автоматическую ширину? - person Patrick M.; 10.02.2020
comment
Я следую вашему совету о жизненном цикле datagrid (а также проверил исходный код :-p) и нашел обходной путь. использование * ngIf = gridDefinitionIsLoaded === true в элементе datagrid помогает, поскольку сетка фактически не отображается до тех пор, пока не будут доступны все данные. Когда это так, жизненный цикл сетки может правильно рассчитать ширину. Это некрасиво, но работает ... пока .. - person Patrick M.; 10.02.2020
comment
Это будет отложено, если вы загружаете значения асинхронно, так что это жизнеспособный обходной путь. - person Jeremy Wilken; 10.02.2020
comment
Да, это обходной путь. Однако я был бы рад получить более элегантное решение. Например, возможность выполнять de Calculate column с функцией по запросу, а не только для ngAfterViewInit, или отключить ее, или отключить изменение размера столбца. Это было бы прекрасно - person Patrick M.; 11.02.2020