Grid Column headers not showing index when sorted on multiple columns

[schakravarty]

I just turned on multi column sorting in one of my grids I use. When sorting on multiple columns, the index of the sort is not shown.

Am I missing a style sheet to load or component in my module to make this happen? 

Example page is:

https://test.tropicos.org/name/25509881 go to the Specimen Tab on this screen.

 

HTML:

<kendo-grid
      #nameSpecimenGrid
      [data]="gridDataResult"
      [loading]="isSearching"
      [pageSize]="state.take"
      [pageable]="{
        buttonCount: 5,
        info: true,
        type: pageableType,
        previousNext: true
      }"
      [skip]="state.skip"
      [sort]="state.sort"
      [sortable]="{
        allowUnsort: true,
        mode: 'multiple'
      }"
      [resizable]="true"
      [reorderable]="true"
      (dataStateChange)="onDataStateChange($event)">

 

Imported styles...

@import './theme/variables';

@import './theme/tropicos-layout-variables';
@import '~@progress/kendo-theme-default/scss/toolbar/_index.scss';
@import '~@progress/kendo-theme-default/scss/button/_index.scss';
@import '~@progress/kendo-theme-default/scss/autocomplete/_index.scss';
@import '~@progress/kendo-theme-default/scss/menu/_index.scss';
@import '~@progress/kendo-theme-default/scss/tabstrip/_index.scss';
@import '~@progress/kendo-theme-default/scss/input/_index.scss';
@import '~@progress/kendo-theme-default/scss/radio/_index.scss';
@import '~@progress/kendo-theme-default/scss/switch/_index.scss';
@import '~@progress/kendo-theme-default/scss/scrollview/_index.scss';
@import '~@progress/kendo-theme-default/scss/notification/_index.scss';
@import '~@progress/kendo-theme-default/scss/popup/_index.scss';
@import '~@progress/kendo-theme-default/scss/dialog/_index.scss';
@import '~@progress/kendo-theme-default/scss/grid/_index.scss';
@import '~@progress/kendo-theme-default/scss/pager/_index.scss';
@import '~@progress/kendo-theme-default/scss/action-buttons/_index.scss';
@import '~@progress/kendo-theme-default/scss/ripple/_index.scss';
@import '~@progress/kendo-theme-default/scss/multiselect/_index.scss';
@import '~@progress/kendo-theme-default/scss/dropdownlist/_index.scss';
@import '~@progress/kendo-theme-default/scss/tooltip/_index.scss';
@import '~@progress/kendo-theme-default/scss/panelbar/_index.scss';
@import '~@progress/kendo-theme-default/scss/datetime/_index.scss';
@import '~@progress/kendo-theme-default/scss/checkbox/_index.scss';
@import '~@progress/kendo-theme-default/scss/common/_index.scss';
@import '~@progress/kendo-theme-default/scss/dropzone/_index.scss';
@import '~@progress/kendo-theme-default/scss/numerictextbox/_index.scss';
@import '~@progress/kendo-theme-default/scss/combobox/_index.scss';
@import '~@progress/kendo-theme-default/scss/calendar/_index.scss';
@import '~@progress/kendo-theme-default/scss/card/_index.scss';

 

[Martin Bechev]

Hello Paul,

Thank you for the provided details.

The markup of the Grid seems valid, as well as the imported styles. I tested the multiple sorting functionality in the attached example, but the indexes are shown as expected:

A possible cause could be an outdated version of the Grid (4.8.2) or used theme (4.26.0). 

In order to provide more suitable assistance about this case, please could I ask you to share some more details, used Kendo and Angular framework versions. It could be ideal if you try to replicate the issue in an isolated runnable project (or update the attached one). Thank you in advance.

Regards,
Martin
Progress Telerik

[schakravarty]

Martin,

Thanks for the response. Here is the content of my package.json

"@angular/animations": "^10.2.3",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "~10.2.3",
    "@angular/compiler": "~10.2.3",
    "@angular/core": "~10.2.3",
    "@angular/flex-layout": "^10.0.0-beta.32",
    "@angular/forms": "~10.2.3",
    "@angular/localize": "~10.2.3",
    "@angular/material": "^10.2.7",
    "@angular/platform-browser": "~10.2.3",
    "@angular/platform-browser-dynamic": "~10.2.3",
    "@angular/router": "~10.2.3",
    "@asymmetrik/ngx-leaflet": "^8.1.0",
    "@progress/kendo-angular-buttons": "^5.5.1",
    "@progress/kendo-angular-charts": "^4.2.0",
    "@progress/kendo-angular-common": "^1.2.3",
    "@progress/kendo-angular-dateinputs": "^4.3.2",
    "@progress/kendo-angular-dialog": "^4.2.2",
    "@progress/kendo-angular-dropdowns": "^4.4.0",
    "@progress/kendo-angular-excel-export": "^3.1.5",
    "@progress/kendo-angular-grid": "^4.8.1",
    "@progress/kendo-angular-inputs": "^6.7.2",
    "@progress/kendo-angular-intl": "^2.0.3",
    "@progress/kendo-angular-l10n": "^2.0.2",
    "@progress/kendo-angular-label": "^2.3.3",
    "@progress/kendo-angular-layout": "^5.0.4",
    "@progress/kendo-angular-menu": "^2.0.4",
    "@progress/kendo-angular-notification": "^2.1.2",
    "@progress/kendo-angular-pdf-export": "^2.0.4",
    "@progress/kendo-angular-popup": "^3.0.6",
    "@progress/kendo-angular-progressbar": "^1.0.0",
    "@progress/kendo-angular-ripple": "^2.0.2",
    "@progress/kendo-angular-scrollview": "^3.0.3",
    "@progress/kendo-angular-sortable": "^3.0.5",
    "@progress/kendo-angular-toolbar": "^3.1.4",
    "@progress/kendo-angular-tooltip": "^2.1.5",
    "@progress/kendo-charts": "^1.15.0",
    "@progress/kendo-data-query": "^1.5.4",
    "@progress/kendo-drawing": "^1.9.3",
    "@progress/kendo-theme-default": "^4.25.2",
    "@telerik/kendo-dropdowns-common": "^1.0.0",
    "core-js": "^3.7.0",
    "esri-loader": "^2.16.0",
    "hammerjs": "^2.0.8",
    "leaflet": "^1.7.1",
    "ngx-cacheable": "^1.4.3",
    "ngx-cookie-service": "^10.1.1",
    "rxjs": "^6.6.3",
    "tslib": "^2.0.3",
    "zone": "^0.3.4",

 

   _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 10.2.0
Node: 10.16.3
OS: win32 x64

Angular: 10.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1002.0
@angular-devkit/build-angular   0.1002.0
@angular-devkit/core            10.2.0
@angular-devkit/schematics      10.2.0
@angular/cdk                    10.2.7
@angular/cli                    10.2.0
@angular/flex-layout            10.0.0-beta.32
@angular/material               10.2.7
@schematics/angular             10.2.0
@schematics/update              0.1002.0
rxjs                            6.6.3
typescript                      4.0.5

 

I will try out the project you to see if it works.

[schakravarty]

I loaded the project you sent me and it seems to work. Not sure how to fix this one....

[schakravarty]

Martin,

Again, thanks for your help. After inspecting the elements of the grid header I did see that the sort indexes were there, they were styled to be the same color as the grid header so not visible. I added a style to make then the same color as the header text and it is working now

[schakravarty]

see https://tropicos.org/name/25509881 go to Specimen tab... Thanks for the help, it made me take a minute to look at things and see that the element existed in the dom and that the color was set to the same color of the grid header background... 

[Martin Bechev]

Hi Paul,

I am glad to see that you have already resolved the experienced issue. Now it seems to work as expected. 

If any further questions come up, do not hesitate to write us back.

A quick note, I checked your account and notice that you have purchased DevCraft Complete license, which allows you to open unlimited private support threads with 24h response time. The forum threads (like the current one) has 48h response time.

Regards,
Martin
Progress Telerik