Data Grid sorting with invisible columns and grouping

[Cesar Smerling]

Hello! I'm trying to apply sorting to a data grid with grouping.

The column is created in the template, and then a apply grouping with the settings. The I apply sorting settings on one column and I receive an error:

core.js:6014 ERROR TypeError: Cannot read property 'field' of undefined

    at ComponentBase.processModel (ej2-grids.es2015.js:12690)

    at ComponentBase.render (ej2-grids.es2015.js:10883)

    at ComponentBase.appendTo (ej2-base.es2015.js:5412)

    at component-base.js:114

    at ZoneDelegate.invokeTask (zone-evergreen.js:391)

    at Object.onInvokeTask (core.js:39680)

    at ZoneDelegate.invokeTask (zone-evergreen.js:390)

    at Zone.runTask (zone-evergreen.js:168)

    at invokeTask (zone-evergreen.js:465)

    at ZoneTask.invoke (zone-evergreen.js:454)

This is my code:

ejs-grid [dataSource]="rows"
          [allowSorting]="true"
          [allowMultiSorting]='true'
          [sortSettings]="sortSettings"
          [allowFiltering]='true'
          [filterSettings]='filterOptions'
          [editSettings]='editSettings'
          [groupSettings]="groupSettings"
          [allowGrouping]="true"
          height=600 [enableVirtualization]=true
          (cellSaved)="cellSaved($event)"
>
    <e-columns>
        <e-column field='node' headerText="{{'txt.Node' | translate}}"
                  [allowEditing]="false" [visible]="false"></e-column>
        <e-column field='accessoryId' headerText="{{'txt.NodePart' | translate}}"
                  [allowEditing]="false" [visible]="false"></e-column>
        <e-column field='accessory.accessoryName' headerText="{{'txt.NodePart' | translate}}"
                  [allowEditing]="false" [visible]="false"></e-column>
        <e-column field='accessory.objectOccurrence' headerText="{{'txt.NodePart' | translate}}"
                  [allowEditing]="false" [visible]="false"></e-column>
        <e-column field='accessoryMaterial' headerText="{{'txt.Material' | translate}}"
                  [allowEditing]="false" [visible]="false"></e-column>
        <e-column field='component.accessoryName' headerText="{{'txt.Component' | translate}}"
                  [allowEditing]="false" [visible]="false"></e-column>
        <e-column field='component.objectOccurrence' headerText="{{'txt.Component' | translate}}"
                  [allowEditing]="false" [visible]="false"></e-column>
        <e-column field='componentMaterial' headerText="{{'txt.Component' | translate}}"
                  [allowEditing]="false" [visible]="false"></e-column>


        <e-column field='property.name' headerText="{{'txt.Property' | translate}}"
                  [allowEditing]="false">
            <ng-template #template let-data>
                {{data.property.name | translate}}
            </ng-template>
        </e-column>
        <e-column field='property.value' headerText="{{'txt.Value' | translate}}" textAlign='Right'>
            <ng-template #template let-data>
                <div [ngClass]="{ 'scs-cell-editable': isPropertyEditable(data)}">
                    {{data.property.value}}
                </div>
            </ng-template>
        </e-column>
        <e-column field='property.selectedUnit' headerText="{{'txt.Unit' | translate}}" [edit]='unitProfilesEditParam'>
            <ng-template #template let-data>
                <div [ngClass]="{ 'scs-cell-editable': isPropertyEditable(data)}">
                    {{data.property.selectedUnit | translate}}
                </div>
            </ng-template>
        </e-column>
        <e-column field='dataSource.name' headerText="{{'txt.DataSource' | translate}}">
            <ng-template #template let-data>
                <div [ngClass]="{ 'scs-cell-editable': isDataSourceEditable(data)}">
                    {{data.dataSource.name | translate}}
                </div>
            </ng-template>
        </e-column>

        <e-column field='selectedDataSource' headerText="selectedDataSource" [visible]="false"></e-column>
        <e-column field='isVisible' headerText="isVisible" [visible]="false"></e-column>
    </e-columns>
</ejs-grid>

This is my component options in the onInit of the component:

this.filterOptions = {
    columns: [
        {field: 'selectedDataSource', matchCase: false, operator: 'equal', predicate: 'and', value: true},
        {field: 'isVisible', matchCase: false, operator: 'equal', predicate: 'and', value: true}
    ]
};
this.editSettings = {
    allowEditing: true, mode: 'Batch'
};

this.groupSettings = {
    showGroupedColumn: true,
    showDropArea: false,
    columns: ['node', 'accessoryId', 'accessoryMaterial', 'componentMaterial']
};

this.sortSettings = {
    columns: [
        {field: 'node', direction: 'Ascending', isFromGroup: true},
    ]
};

[Rajapandiyan Settu]

Hi Cesar, 

Greetings from syncfusion support. 

Query : I'm trying to apply sorting to a data grid with grouping.The column is created in the template, and then a apply grouping with the settings. The I apply sorting settings on one column and I receive an error 

We are able to reproduce the reported issue with the provided code. Due to the asynchronous process of grid, Immediate sorting after the grouping raises this issue. Because while on grouping we manually sort that grouped column in the source. 

To avoid such case of issues we suggest you to set the grid’s groupSettings in its created event ( triggered at initial rendering of grid ). Please refer the below code example and sample for more information. 

   

export class AppComponent implements OnInit { 

  @ViewChild('grid', { static: true }) public grid: GridComponent; 

  public data: object[]; 

------- 

  ngOnInit(): void { 

    this.sortSettings = { 

      columns: [ 

        { field: 'CustomerID', direction: 'Descending' }, 

      ] 

    }; 

  } 

  created(args) { 

// bind the groupsetting in grid’s created event  

    this.grid.groupSettings = { 

      columns: ['CustomerID', 'OrderID', 'ShipAddress.ShipCity'] 

    }; 

  } 

} 

 

 

 

Sample : https://stackblitz.com/edit/angular-udaqpk-zjiaew?file=app.component.ts 

UG : https://ej2.syncfusion.com/angular/documentation/api/grid/#created 

Please get back to us if you need further assistance on this. 

 

Regards, 

Rajapandiyan S 

[Cesar Smerling]

Thanks this work correctly

Another simply question is there a way to sort the null /undefined values at top not at the end?

[Rajapandiyan Settu]

Hi Cesar, 

Thanks for your update. 

Query : Another simply question is there a way to sort the null /undefined values at top not at the end? 

In EJ2 grid, sorting null or undefined records placed at last while on ascending direction. This is the default behavior of the grid sorting. But in your requirement you need show those records at top. You can achieve this by using a column API of sortComparer  to that column.
sortComparer is used to customize our sorting method and the returned value will be bound to the grid. Please refer the below sample and code example for more information. 

   

ej.grids.Grid.Inject(ej.grids.Filter); 

var datas = [{ OrderID: 1, CustomerID: 'SDTH', ShipCity: 'GB', ShipName: null, ShipCountry: '' }, 

{}, 

{ OrderID: 2, CustomerID: 'THYH', ShipCity: 'gc', ShipName: null, ShipCountry: null }, 

{ OrderID: 3, CustomerID: 'YHUJ', ShipCity: null, ShipName: null, ShipCountry: '' }, 

{ OrderID: 4, CustomerID: 'HNYT', ShipCity: undefined, ShipName: null, ShipCountry: 'j' }] 

var grid = new ej.grids.Grid({ 

  dataSource: datas, 

  allowFiltering: true, 

  allowSorting: true, 

  filterSettings: { type: 'Menu' }, 

  columns: [ 

    { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100 }, 

    { field: 'ShipCity', headerText: 'Ship City', width: 100, type: 'string', sortComparer: sortComparer } 

  ], 

  height: 273 

}); 

grid.appendTo('#Grid'); 

function sortComparer(reference, comparer, refrenceObj, comparerObj) { 

// perform sorting action as you need to show in the grid 

  if (reference < comparer || reference == undefined || reference == null) { 

    return -1; 

  } 

  if (reference > comparer || comparer == undefined || comparer == null) { 

    return 1; 

  } 

  return 0; 

} 

 

 

 

Sample : https://stackblitz.com/edit/nknmm8-ucqxr2?file=index.js 

UG : https://ej2.syncfusion.com/documentation/api/grid/column/#sortcomparer 

Please get back to us if you need further assistance on this. 

 

Regards, 

Rajapandiyan S