Search code examples
angularvmware-clarity

Change Toggle Columns icon to text

I am using Angular 7 and VMWare's Clarity Datagrid. Is there a way to change the Show/Hide columns button in the Datagrids footer to say "Show/Hide Columns" instead of showing a Column icon?

Show/Hide Columns Button

I noticed that I can change Title and Button text in the dialog, once I click on the icon using the following code, but, I am not sure how to change the column icon to text.

<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>
Solution

  • I have resolved this, by adding a button external to the Datagrid and trigger the click on the button in the footer:

    In HTML:

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

    In Component TypeScript:

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