Sorting issue nested columns

[Laurens Albers]

Hi,

I have a grid which can contain one ore more nested columns dynamically. But when there is a nested columns structure in place the sorting function doesnt work properly.

You can check the added zip file for en example of a sorted column, but the logic doesn't make sense.

greetings,

Laurens

Attachment: sorting_example_images_8086125f.zip

[Mohammed Farook J]

Hi Laurens, 

 

Greetings from Syncfusion support. 

Before we proceed with your query, we would like to confirm the following details.  

• Share the full code example of Grid rendering.
• Share the EJ2 version and package.json details.
• Share the sample if it is possible?

  

Regards, 

J Mohammed Farook  

[Laurens Albers]

Hi,

Setting the data is not very exciting: 

It's just an object(response) containing 2 properties columns and data. 

The user inputs a couple of required fields and a call gets made to fill the grid's data through a subscription/Subject using a get(see below).

See the previous(post) attached zipfile containing an image(sorting columns example data.png) to see a example of the data within that object.

See the now(current post) added zipfile an image(sorting columns example headers.png) of the column headers within that object.

In the component:

ngOnInit()

//push the data through a subscription/Subject to blabla.subcribe(resp =>

      this.grid.columns = resp.columns;

      this.dataSource = resp.data;

in the html:

See the previous(post) attached zipfile containing an image(sorting grid example.png) to see the endresult of a example of the sorted grid.

package.json:

 "dependencies": {

    "@angular/animations": "^7.2.1",

    "@angular/cdk": "^7.2.1",

    "@angular/common": "^7.2.1",

    "@angular/compiler": "^7.2.1",

    "@angular/core": "^7.2.1",

    "@angular/flex-layout": "^7.0.0-beta.24",

    "@angular/forms": "^7.2.1",

    "@angular/http": "^7.2.1",

    "@angular/material": "^7.2.1",

    "@angular/platform-browser": "^7.2.1",

    "@angular/platform-browser-dynamic": "^7.2.1",

    "@angular/platform-server": "^7.2.1",

    "@angular/router": "^7.2.1",

    "@nguniversal/module-map-ngfactory-loader": "^7.1.0",

    "@ngx-translate/core": "^11.0.1",

    "@ngx-translate/http-loader": "^4.0.0",

    "@syncfusion/ej2-angular-base": "17.3.26",

    "@syncfusion/ej2-angular-buttons": "17.3.26",

    "@syncfusion/ej2-angular-calendars": "17.3.26",

    "@syncfusion/ej2-angular-charts": "17.3.26",

    "@syncfusion/ej2-angular-diagrams": "17.3.26",

    "@syncfusion/ej2-angular-dropdowns": "17.3.26",

    "@syncfusion/ej2-angular-filemanager": "17.3.26",

    "@syncfusion/ej2-angular-grids": "17.3.26",

    "@syncfusion/ej2-angular-inputs": "17.3.26",

    "@syncfusion/ej2-angular-layouts": "17.3.26",

    "@syncfusion/ej2-angular-lists": "17.3.26",

    "@syncfusion/ej2-angular-maps": "18.1.52",

    "@syncfusion/ej2-angular-navigations": "17.3.26",

    "@syncfusion/ej2-angular-popups": "17.3.26",

    "@syncfusion/ej2-angular-richtexteditor": "17.3.26",

    "@syncfusion/ej2-angular-schedule": "17.3.26",

    "@syncfusion/ej2-angular-splitbuttons": "17.3.26",

    "@syncfusion/ej2-angular-spreadsheet": "^17.4.41",

    "@syncfusion/ej2-base": "17.3.26",

    "@syncfusion/ej2-buttons": "17.3.26",

    "@syncfusion/ej2-data": "17.3.26",

    "@syncfusion/ej2-dropdowns": "17.3.26",

    "@syncfusion/ej2-file-utils": "17.3.26",

    "@syncfusion/ej2-filemanager": "17.3.26",

    "@syncfusion/ej2-grids": "17.3.26",

    "@syncfusion/ej2-inputs": "17.3.26",

    "@syncfusion/ej2-layouts": "17.3.26",

    "@syncfusion/ej2-lists": "17.3.26",

    "@syncfusion/ej2-maps": "17.3.26",

    "@syncfusion/ej2-navigations": "17.3.26",

    "@syncfusion/ej2-popups": "17.3.26",

    "@syncfusion/ej2-splitbuttons": "17.3.26",

    "ajv": "~6.7.0",

    "angular-oauth2-oidc": "^8.0.4",

    "angular-split": "3.0.1",

    "aspnet-prerendering": "^3.0.1",

    "cldr-data": "^34.0.0",

    "core-js": "^2.5.4",

    "guid-typescript": "^1.0.9",

    "hammerjs": "^2.0.8",

    "html2canvas": "^1.0.0-rc.5",

    "jquery": "^3.4.1",

    "material-design-icons-iconfont": "^5.0.1",

    "ng-contenteditable": "^2.1.1",

    "ngx-bootstrap": "^4.3.0",

    "ngx-custom-validators": "^7.0.0",

    "ngx-float-button": "^1.0.0",

    "ngx-monaco-editor": "^7.0.0",

    "ngx-perfect-scrollbar": "^7.2.1",

    "ngx-quicklink": "^0.2.0",

    "qrcode": "^1.3.3",

    "rxjs": "^6.3.3",

    "tslib": "^1.9.3",

    "uuid": "^3.3.2",

    "zone.js": "~0.8.28"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "^0.13.8",

    "@angular/cli": "^7.2.1",

    "@angular/compiler-cli": "^7.2.7",

    "@angular/language-service": "^7.2.1",

    "@types/jasmine": "^2.8.14",

    "@types/jasminewd2": "~2.0.3",

    "@types/node": "~8.9.4",

    "codelyzer": "~4.5.0",

    "jasmine-core": "~2.99.1",

    "jasmine-spec-reporter": "~4.2.1",

    "karma": "~3.1.1",

    "karma-chrome-launcher": "~2.2.0",

    "karma-coverage-istanbul-reporter": "~2.0.1",

    "karma-jasmine": "~1.1.2",

    "karma-jasmine-html-reporter": "^0.2.2",

    "protractor": "~5.4.0",

    "ts-node": "~7.0.1",

    "tslint": "~5.11.0",

    "typescript": "~3.1.6"

  },

Attachment: sorting_columns_example_headers_dd793e29.zip

[Thiyagu Subramani]

Hi Laurens, 

Thanks for your update. 

Based on your reported information, we have prepared a sample like stacked columns with sorting property. From our end your reported issue “ Sorting issue nested columns” doesn’t reproduced our side. Its working fine. please refer to the below sample. 

Sample link :  https://stackblitz.com/edit/angular-ubpogw-x4q8hy?file=app.component.ts 

If still facing the issue, please share below details to find root cause of your issue. 

1. In your code you are using enableVirtualization property , So please share total no of  records.
2. Share your issue reproducing sample.
3. Reproduce the issue in above sample
4. Share complete grid rendering (app.component.ts)code.
5. Share video/image representation of your sample.

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

[Laurens Albers]

Hi,

I recreated the scenario based on your stackblitz + data.

In the sample I updated the column structure and freight data, now the column freight isnt being sorted properly.

https://stackblitz.com/edit/angular-ubpogw-nxl4ky?file=app.component.ts

The only difference in data with your original code is that all the values(being returned from my API) belonging to the columns are "strings". 

The sorting documentation of the grid doesn't say that it cannot be a string or that it can only be a numeric value(when it comes to numbers).

[Thiyagu Subramani]

Hi Laurens, 

Thanks for your update. 

By default, our EJ2 Grid sorts the values as strings in alphabetical and ascending order. This works well for strings However, if numbers are sorted as strings, "25" is bigger than "100", because "2" is bigger than "1" (Sorting works based on digit basis). 

Because of this, it will produce an incorrect result when sorting numbers as string type. For this case,  We an option for sortComparer property. using this property we can achieve your requirement. 

Please refer to the below code and modified sample. 

{ 

           field: 'Freight', 

            headerText: 'Freight ($)', 

            width: 120, 

            textAlign: 'Right', 

            minWidth: 10, 

            sortComparer: function (refC, comC) { 

              if (Number(refC) < Number(comC)) { 

                return -1; 

              } 

              if (Number(refC) > Number(comC)) { 

                return 1; 

              } 

              return 0; 

            } 

} 

Reference link :  https://ej2.syncfusion.com/angular/documentation/grid/sorting/#sort-comparer 

API Link :  https://ej2.syncfusion.com/angular/documentation/api/grid/column/#sortcomparer 

Modified Sample link : https://stackblitz.com/edit/angular-ubpogw-kcq3mf?file=app.component.ts 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Laurens Albers]

Your answer fixes the issue, thanks!

[Thiyagu Subramani]

Hi Laurens, 

Thanks for your update. 

We're glad to hear that your problem has been resolved. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S