Child Kendo grid headers

[Nathan]

We have a parent and child grid setup within our app.  Everything works fine except that the headers in the child grid are somehow inheriting CSS that underline the headers.

Here is the code in the parent:

    <kendo-grid-column field="ReportID">
      <ng-template kendoGridCellTemplate let-dataItem>
        <div class="k-icon k-i-plus-circle" style="color: limegreen; cursor:pointer;" title="Add" (click)="addToFavorite(dataItem.ReportAssociationID)"></div>
      </ng-template>
    </kendo-grid-column>
    <ng-template kendoGridDetailTemplate let-dataItem>
      <reportDocumentGrid>CHILD GRID IS IN HERE</reportDocumentGrid>
    </ng-template>

For some reason the headers in the child grid are getting the following style applied:

 

.k-grid tbody tr td:not(.k-hierarchy-cell) a {
text-decoration: underline;
}

Really stuck here, thanks in advance!

[Svet]

Hi Nathan,

Thank you for the provided details.

If there isn't any custom CSS that adds the demonstrated style then I would suggest to make sure that you are using the latest Kendo Default theme version 4.25.0.

Please check the following example from our documentation which uses the latest Kendo Default theme:

https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/

where the reported style doesn't seem to be applied to the child grid.

If the issue persists when using the latest theme, then the demonstrates style is most probably added by some custom CSS added to the project.

I hope the provided information helps. Please let me know in case the issue persists. Thank you.

Regards,
Svetlin
Progress Telerik