Open Closed

ngx-datatable-column *ngIf="prop.visible" does not hide the column #5674


User avatar
0
fernando.guilherme created
  • ABP Framework version: v7.2.3
  • UI Type: Angular
  • Database System: EF Core (SQL Server)
  • Tiered (for MVC) or Auth Server Separated (for Angular): no
  • Exception message and full stack trace:
  • Steps to reproduce the issue:

Hi, I'm using extensible-grid and I'm trying to set the entityProp class's visible to false. Eg: visible: data => Boolean(!data.record.tenantId). For the grid line it works.

In ngx-datatable-column I put a *ngIf="prop.visible" to not show the column when it is false. But when it is true it returns me _ => true and not boolean true.

How do I hide a column?


4 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello fernando.guilherme,

    I am trying to reproduce the issue. I am unable to reproduce. Could you please share steps to reproduce or give some snippet of html code and ts code of that particular condition?

    If you are using ngx-datatable-column in a loop then please check the following links Demo - http://swimlane.github.io/ngx-datatable/#toggle Source code - https://github.com/swimlane/ngx-datatable/blob/master/src/app/columns/column-toggle.component.ts let me know if this help you.

    Thanks, Anjali

  • User Avatar
    0
    fernando.guilherme created

    Hi,

    Let's use the users screen as an example.

    In the default-users-entity-props.ts class I set the following surname property to visible false when tenant.

    { type: ePropType.String, name: 'surname', displayName: 'AbpIdentity::Surname', sortable: true, columnWidth: 250, visible: data => Boolean(!data.record.tenantId), }

    In the Html of the extensible-table, where I displayed the column name I put a *ngIf="prop.visible"

    <ng-container ngFor="let prop of propList; let i = index; trackBy: trackByFn"> <ngx-datatable-column [width]="columnWidths[i + 1] || 200" [name]="prop.displayName | abpLocalization" [prop]="prop.name" [sortable]="prop.sortable" ngIf="prop.visible">

       &lt;ng-template let-row=&quot;row&quot; let-i=&quot;index&quot; ngx-datatable-cell-template&gt;
         &lt;ng-container *abpPermission=&quot;prop.permission; runChangeDetection: false&quot;&gt;
           &lt;ng-container *ngIf=&quot;row[&#39;_&#39; + prop.name]?.visible&quot;&gt;
             &lt;div *ngIf=&quot;!row[&#39;_&#39; + prop.name].component; else component&quot;
               [innerHTML]=&quot;row[&#39;_&#39; + prop.name]?.value | async&quot;
               (click)=&quot;prop.action &amp;&amp; prop.action({ getInjected: getInjected, record: row, index: i })&quot;
               [ngClass]=&quot;entityPropTypeClasses[prop.type]&quot;
               [class.pointer]=&quot;prop.action&quot;&gt;
             &lt;/div&gt;
           &lt;/ng-container&gt;
           &lt;ng-template #component&gt;
             &lt;ng-container *ngComponentOutlet=&quot;row[&#39;_&#39; + prop.name].component; injector: row[&#39;_&#39; + prop.name].injector&quot;&gt;
             &lt;/ng-container&gt;
           &lt;/ng-template&gt;
         &lt;/ng-container&gt;
       &lt;/ng-template&gt;
     &lt;/ngx-datatable-column&gt;
    

    </ng-container>

    If you set the value of prop.visible to print, you will notice that it is returning like this: _ => true instead of true and when it is false, print all the code that is inside the visible

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello fernando.guilherme,

    Please try to add this -

    <ngx-datatable-column [name]="prop.displayName" *ngIf="checkIf(data)">

    data = {
        record: {
          tenantId: null // or any other value
        }
      };
    isVisible = data => Boolean(!data.record.tenantId);
      
    checkIf(data) {
      console.log(this.isVisible(data));
    }
    

    Do we have the data which we can pass in if condition then in checkIf method we can call isVisible which we declared at the top for time being. We don't have data so we added statically which is returning us Boolean value. So if you are able to pass the data property in if condition you will get the Boolean value.

    Please do let us know if this solution has worked for you?

    Thank You, Anjali

  • User Avatar
    0
    mahmut.gundogdu created

    visible is a function not a value. the code must be

    before

       &lt;ng-container *ngIf=&quot;row[&#39;_&#39; + prop.name]?.visible&quot;&gt;
    

    after

    <ng-container *ngIf="row['' + prop.name]?.visible && row['' + prop.name].visible()">

    like that

Made with ❤️ on ABP v9.1.0-preview. Updated on December 10, 2024, 06:38