I encountered a similar issue and attempted various methods to replicate it in a smaller Angular application for sharing with Telerik support.
Despite creating a sample app with the same source code, the problem persisted.
I hold no fault with the Telerik community, but I am unable to disclose my original app's code.
Below are some of the steps I tried:
- Debugging and console logging the Telerik source
- Developing a new app with identical grid code
- Configuring angular, package, polyfills, browserslist, tsconfig.app & tsconfig.es5 settings similarly on a separate app
- Testing different angular versions
- Restructuring the grid implementation
Frustrated with the bug, I resorted to using a CSS workaround solution as shown below.
search-grid.component.scss
.k-icon {
height: 1em;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 16px;
font-family: 'WebComponentsIcons';
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
speak: none;
text-transform: none;
text-decoration: none;
display: inline-block;
vertical-align: middle;
}
.k-i-sort-asc-sm, .k-i-sort-desc-sm {
margin-left: calc(1rem - 1px);
}
.k-i-sort-asc-sm::before {
content: '\e127';
}
.k-i-sort-desc-sm::before {
content: '\e128';
}
kendo-grid th[aria-sort='ascending'] span span[aria-label='Sortable'] {
@extend #{'.k-icon', '.k-i-sort-asc-sm'};
}
kendo-grid th[aria-sort='descending'] span span[aria-label='Sortable'] {
@extend #{'.k-icon', '.k-i-sort-desc-sm'};
}
If you are modifying kendo grid styles, ensure that component encapsulation is set to
ViewEncapsulation.None
Example
@Component({
selector: 'app-search-grid',
templateUrl: './search-grid.component.html',
styleUrls: ['./search-grid.component.scss'],
encapsulation: ViewEncapsulation.None,
})