datagrid sorting is not working ,when ng-template is used to display columns data

[Praveen Kumarrangu]

Hi

 Datagrid is not allowing sorting,When ng-template is used to display columns data,My app code is

as below

<ejs-grid #dt [dataSource]="gridData" [allowReordering]='allowReorder' (columnDrop)="onColumnReorder($event)" 

allowSorting="true">

<e-column *ngFor="let column of gridColumns" headerText="{{column.header | translate}}"

            [textAlign]='column.textAlign' [isPrimaryKey]='column.isPrimaryKey !== undefined ? column.isPrimaryKey : false'

            [visible]="column.visible !== undefined ? column.visible : true" [width]='column.width' [format]="column.format"

            [editType]="column.editType" [edit]="column.edit" [defaultValue]="column.defaultValue?column.defaultValue:null"

            [allowEditing]="column.allowEditing !== undefined ? column.allowEditing : true"

            [allowResizing]='column.allowResizing !== undefined ? column.allowResizing : true'>

    <!--[field]='column.field'-->

    <ng-template #template let-rowData>

      {{rowData[column.field]}}

    </ng-template>

  </e-column>

    </e-columns>

  </ejs-grid>

[Pavithra Subramaniyam]

Hi Praveen,

Thanks for contacting Syncfusion support.

The EJ2 Grid columns are sorted based on the field values from the data source. In your code, we could see that the columns are not defined with the “field” value which is the cause of the reported behavior. So, we suggest adding the field value for the “e-column” to overcome this. Please refer to the below code example for more information.

<e-column

 *ngFor="let column of gridColumns"

  field="{{ column.field }}"

 . . .>

 

  <ng-template #template let-rowData>

    {{ rowData[column.field] }}

  </ng-template>

</e-column>

 

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

Regards,

Pavithra S