CODEWITHSUNDEEP
vmware-clarity
dajo
dajo

Reputation: 187

Datagrid - dynamic column generation with custom filter causing an issue

I am using VMWare Clarity, version 0.10.

I have a datagrid, which dynamically does a few things:

Plnkr: https://plnkr.co/edit/Jov3VMt63C3lpkTp2ldi?p=preview

Code:

<clr-datagrid *ngIf="myData$ | async as myData" #myGrid>
  <clr-dg-placeholder>No data found</clr-dg-placeholder>

  <clr-dg-column *ngFor="let column of myData.columns"
                 [clrDgField]="column.name" [clrDgSorted]="column.name === 'name'">
    <div *ngIf="column.isMandatory; else hideableBlock">
      {{column.displayName}}
    </div>
    <ng-template #hideableBlock>
      <div *ngIf="column.name !== 'score'; else scoreColumn">
        <ng-container *clrDgHideableColumn="{hidden: (column.name !== 'score') && !column.isscore}">
          {{column.displayName}}
        </ng-container>
      </div>

      <ng-template #scoreColumn>
        <ng-container *clrDgHideableColumn="{hidden: false}">{{column.displayName}}
          <clr-dg-string-filter id="scoreFilter" [clrDgStringFilter]="scoreFilter"  [clrFilterValue]="(scoreScore$ | async)"></clr-dg-string-filter>
        </ng-container>
      </ng-template>
    </ng-template>
  </clr-dg-column>

  <clr-dg-row *clrDgItems="let entity of (entities$ | async)">
    <clr-dg-cell *ngFor="let column of myData.columns">{{entity[column.name]}}
    </clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer></clr-dg-footer>
</clr-datagrid>

The issue is with how this Score header is rendered in html:

<ng-container *clrDgHideableColumn="{hidden: false}">{{column.displayName}}
      <clr-dg-string-filter id="scoreFilter" [clrDgStringFilter]="scoreFilter"  [clrFilterValue]="(scoreScore$ | async)"></clr-dg-string-filter>
    </ng-container>

All other columns display the filter button outside of the sort button. E.g.

<clr-dg-column _ngcontent-c4="" ng-reflect-field="owner" ng-reflect-sorted="false" class="datagrid-column" style="width: 96px;">
<div class="datagrid-column-flex">
    <clr-dg-string-filter ng-reflect-custom-string-filter="[object Object]" ng-reflect-value="">
        <clr-dg-filter ng-reflect-open="false" ng-reflect-custom-filter="[object Object]">
            <button class="datagrid-filter-toggle" type="button"></button>
        </clr-dg-filter>
    </clr-dg-string-filter>

    <button class="datagrid-column-title" type="button">
        <div _ngcontent-c4="">
            Owner
        </div>
    </button>
    <div class="datagrid-column-separator">
        <button class="datagrid-column-handle" tabindex="-1" type="button"></button>
        <div class="datagrid-column-handle-tracker"></div>
    </div>
</div>

Note the position of:

<button class="datagrid-filter-toggle" type="button"></button>

However, in the Score html, this button appears within the 

<button class="datagrid-column-title" type="button">

E.g.

<clr-dg-column _ngcontent-c4="" ng-reflect-field="score" ng-reflect-sorted="false" class="datagrid-column desc" style="width: 100px;">
<div class="datagrid-column-flex">
    <button class="datagrid-column-title" type="button">
        Score
        <clr-dg-string-filter _ngcontent-c4="" id="completenessFilter" ng-reflect-custom-string-filter="[object Object]">
            <clr-dg-filter ng-reflect-open="false" ng-reflect-custom-filter="[object Object]">
                <button class="datagrid-filter-toggle" type="button" style="position: static;"></button>
            </clr-dg-filter>
        </clr-dg-string-filter>
    </button>
    <div class="datagrid-column-separator">
        <button class="datagrid-column-handle" tabindex="-1" type="button"></button>
        <div class="datagrid-column-handle-tracker"></div>
     </div>
</div>

The issue is that clicking on the filter icon also toggles the sorting:

enter image description here

Any suggestions?

Upvotes: 1

Views: 1555

Answers (1)

Eudes
Eudes

Reputation: 1661

As answered on Github, Clarity components can't drill into templates that are declared on the application side, because they're "black-boxed" by Angular. So the solution in your case is to put your custom filter in its own *ngIf, which means the only *ngIf left on the columns themselves is the hideable/mandatory one: https://plnkr.co/edit/Hhms3CxLmzKHark5HVsd?p=preview

Upvotes: 4

Related Questions