How to hide kendo grid header label angular 4/6/7?

Question

This is is my kendo grid code

      <kendo-grid [data]="fileDetails" [selectable]="{enabled: true, checkboxOnly: true}" (selectionChange)="checkboxSelectionChange($event)">
            <kendo-grid-checkbox-column class="text-center" width="5">
            </kendo-grid-checkbox-column>
            <kendo-grid-column field="fileName" width="40">
            </kendo-grid-column>
      </kendo-grid>

I need this fileName column. But without header label. It always shows header as fileName

Answer 1

You can hide the whole header row of the grid with CSS. Hope this helps.

<style>
    .k-grid-header{
      display: none;
    }
</style>

Answer 2

This one easy to hide header labels. CSS classes sometimes not working

            <kendo-grid-column width="40">
              <ng-template kendoGridCellTemplate let-dataItem="dataItem">
                <a>{{dataItem.fileName}}</a>
              </ng-template>
            </kendo-grid-column>