Kendo grid angular hide table cell

Question

I'm using kendo grid in angular. I'm trying to hide/remove the total cell from the kendo grid using *ngIf, but only content inside the cell is hiding, empty cell is showing.

How to hide the total cell from the grid,

This is the code , I have used

<kendo-grid id="antibiotic-result-view" [data]="uniqAntibioticList" [resizable]="false">
<kendo-grid-column field="Expansion" [width]="150">
    <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
        <div class="antibiotic-heading">{{"Antibiotic" | translate}}
            <mat-checkbox type="checkbox" [ngModel]="allCompleted" disabled="true"></mat-checkbox>
        </div>
    </ng-template>
    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
        <div *ngIf="dataItem.IsSuppressed">
            <span>{{ dataItem.Expansion }}</span>
            <mat-checkbox type="checkbox" [ngModel]="dataItem.IsSuppressed" disabled="true"></mat-checkbox>
        </div>
    </ng-template>
</kendo-grid-column>

I have been trying for past 2 days, could someone help me on this ?

Answer 1

I am not sure what you are trying to achieve, but to solve this issue simply, we can just remove the row by filtering it based on the criteria needed, but note, we should do this filtering selectively on the change events, if we directly call the filter on [data] property it will cause performance issues. Please find below working example for your reference and analysis!

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
        <kendo-grid id="antibiotic-result-view" [data]="gridDataOnlyNoSuppressed" [resizable]="false" [trackBy]="trackBy">
          <kendo-grid-column field="ProductName" [width]="150">
            <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
              <div class="antibiotic-heading">Antibiotic
                <input type="checkbox" kendoCheckBox type="checkbox" [ngModel]="allCompleted" disabled="true"/>
              </div>
            </ng-template>
            <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
                <span>{{ dataItem | json }}</span>
                <input type="checkbox" #checkbox kendoCheckBox type="checkbox" [ngModel]="dataItem.IsSuppressed" [disabled]="dataItem.IsSuppressed" (input)="change(dataItem, checkbox)"/>
            </ng-template>
          </kendo-grid-column>
        </kendo-grid>
    `,
})
export class AppComponent {
  allCompleted = false;
  gridDataOnlyNoSuppressed = [];
  public gridData: any[] = [
    {
      ProductID: 1,
      ProductName: 'Chai',
      UnitPrice: 18,
      Category: {
        CategoryID: 1,
        CategoryName: 'Beverages',
      },
      IsSuppressed: false,
    },
    {
      ProductID: 2,
      ProductName: 'Chang',
      UnitPrice: 19,
      Category: {
        CategoryID: 1,
        CategoryName: 'Beverages',
      },
      IsSuppressed: false,
    },
    {
      ProductID: 3,
      ProductName: 'Aniseed Syrup',
      UnitPrice: 10,
      Category: {
        CategoryID: 2,
        CategoryName: 'Condiments',
      },
      IsSuppressed: false,
    },
  ];

  ngOnInit() {
    this.filterRows();
  }

  trackBy(index, item) {
    return item.productID;
  }

  change(dataItem, checkbox: any) {
    dataItem.IsSuppressed = !dataItem.IsSuppressed;
    this.filterRows();
    setTimeout(() => {
      checkbox.checked = false;
    });
  }

  filterRows() {
    this.gridDataOnlyNoSuppressed = this.gridData.filter(
      (x) => !x.IsSuppressed
    );
  }
}

Stackblitz Demo