Kendo grid sort icon disappears (Angular 9)

user_10810813 0
Viewed 1208

I have my project developed in angular 9 and I am using the latest version of the kendo grid. In the grid, both sort and resize columns are enabled. Everything works fine when I access the application using the localhost. But when I deploy it on the server, sort icons disappear. When I resize, it appears and disappears on hover. Any clue?

kendo-ui angular grid sorting css
1 Answers

I had a similar problem. I tried many different ways to reproduce this issue in a different smaller Angular application so we can share our source code with Telerik. A small application with identical source code always worked fine. No blame to Telerik support community, I however can not share my original app code.

I attempted multiple options below..

  • Debugging, console logging Telerik source
  • Creating a separate application with the same grid source code that we have in our app
  • Applying a similar setting for angular, package, polyfills, browserslist, tsconfig.app & tsconfig.es5 on a separate application
  • Downgrading/ upgrading angular versions.
  • Rewriting my grid in a different way

I gave up on this bug & I am using a CSS workaround solution 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'};
}

Since you are updating kendo grid styles make sure, component has encapsulation set to

ViewEncapsulation.None

Example

@Component({
  selector: 'app-search-grid',
  templateUrl: './search-grid.component.html',
  styleUrls: ['./search-grid.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
user_9915130
Related