Изменить значок переключения столбцов на текст

Я использую Angular 7 и Clarity Datagrid от VMWare. Есть ли способ изменить кнопку «Показать / скрыть столбцы» в нижнем колонтитуле Datagrids, чтобы она говорила «Показать / скрыть столбцы» вместо отображения значка столбца?

Показать / скрыть кнопку столбцов

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

<clr-dg-column-toggle>
  <clr-dg-column-toggle-title>Show Columns</clr-dg-column-toggle-title>
  <clr-dg-column-toggle-button>Select All</clr-dg-column-toggle-button>
</clr-dg-column-toggle>

angular vmware-clarity
person Jake    schedule 06.06.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

person Jeremy Wilken    schedule 06.06.2019
comment
Альтернативным решением является создание кнопки с названием «Показать / скрыть столбцы» вне Datagrid, но с тем, чтобы она запускала действие для кнопки в нижнем колонтитуле. Позже я могу скрыть значок в нижнем колонтитуле с помощью CSS. Однако я не уверен, как вызвать щелчок с помощью внешней кнопки. - person Jake; 06.06.2019

arrow_upward
0
arrow_downward

Я решил эту проблему, добавив кнопку, внешнюю по отношению к Datagrid, и запустил щелчок по кнопке в нижнем колонтитуле:

В HTML:

<button (click)="showHideColumns();">Show/Hide Columns</button>

В компонентном TypeScript:

showHideColumns()
{
  var el = <HTMLElement>document.querySelector(".column-switch-wrapper").firstElementChild;
  el.click();
}
person Jake    schedule 06.06.2019