Enabled Sorting and Filtering on Column with ng-template

Enabled Sorting and Filtering on Column with ng-template

Posted by: hoang.nguyen on 8 August 2018, 3:10 am EST

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 August 2018, 3:10 am EST

  I have a grid with 4 columns, 1 of them ais ng-template. When I turn on the sort and filtering, the three normal colum will work but not the one with ng-template. Is there any work around on this. Thank you very much.

  <wj-flex-grid
  
  id=“Projects”
  
  #flexProjects
  
  [autoGenerateColumns]=“false”
  
  [headersVisibility]=“1”
  
  [allowSorting]=“true”
  
  [itemsSource]=“projects”
  
  [isReadOnly]=“true”
  
  [selectionMode]=“3”
  
  (loadedRows)=“loadedRows(flexProjects)”
  
  (formatItem)=“formatItem(flexProjects,$event)”>

                <wj-flex-grid-column
                  [header]="'COL_PROJECT' | translate"
                  [allowSorting]="true"
                  [width]="'*'">
                  <ng-template wjFlexGridCellTemplate
                    [cellType]="'Cell'" let-item="item">
                    <div>{{ item.Code || '00' }} - {{ item.ProjectName }}</div>
                    <div style="color: #777777">{{ item.Superintendent }}</div>
                  </ng-template>
                </wj-flex-grid-column>
  
                <wj-flex-grid-column
                  [header]="'COL_FORECAST' | translate"
                  [binding]="'ForeCast'"
                  [allowSorting]="true"
                  [width]="75">
                </wj-flex-grid-column>
  
                <wj-flex-grid-column
                  [header]="'COL_SCHEDULED' | translate"
                  [binding]="'Scheduled'"
                  [allowSorting]="true"
                  [width]="75">
                </wj-flex-grid-column>
  
                <wj-flex-grid-column
                  [header]="'COL_DIFFERENCE' | translate"
                  [binding]="'Difference'"
                  [allowSorting]="true"
                  [width]="75">
                </wj-flex-grid-column>
  
                <wj-flex-grid-filter></wj-flex-grid-filter>
              </wj-flex-grid>
  

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 8 August 2018, 8:36 pm EST

  Hi,
  
  Sorting and filter work quite well with ng-templates. The issue you are facing is not due to the cell templates but due to the absence of binding property in the column with the template.
  
  Defining the binding property for the column should fix the issue.
  
  Just for the reference, here is a sample with cell-templates and sort/filter capabilities:-
  
  https://stackblitz.com/edit/angular-ompmk9?file=app%2Fapp.component.html

  ~Manish

• 

  hoang.nguyen

  • Post Options:
  • Link
    Copy

  Posted 15 August 2018, 3:59 am EST

  Thank you sir very much.