Binding to Typescript Getter Properties

[Matt Shanahan]

I have a model object that has some getters inside of it which can be used to show/hide data in various places across the app based on other properties in the object, or it can traverse the object tree for me to look like a more flattened object. Unfortunately, I'm unable to bind to these properties in the grid. I've put together a Plunker here: http://plnkr.co/edit/ubchKC55IHg7DwHj02HQ?p=preview

As you can see in my example below and the screenshot, the DisplayValue does not show in the grid, but it's being correctly bound as demonstrated by the text below. Is there any way to use a getter property within the grid? When examining the data object, it looks like those are being ignored. But they can be accessed within the Details template. Thank you.

//our root app component
import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-ng-grids';

@Component({
  selector: 'my-app',
  template: `
  <ejs-grid #grid [dataSource]='rows'>
  <e-columns>
  <e-column headerText="Details">
          <ng-template #template let-data>
              {{ data.RowDetails }}
          </ng-template>
      </e-column>
      <e-column headerText="Display Value">
          <ng-template #template let-data>
              {{ data.DisplayValue }}
          </ng-template>
      </e-column>
    </e-columns>
  </ejs-grid>
  <br />
  <br />
  <b>Display Value should be:</b> {{ rows[0].DisplayValue }}
      `,
})
export class App {
  rows: MyDisplayObject[];
  constructor() {
    this.rows = [];
    const row1 = new MyDisplayObject();
    row1.OrderID = 1123;
    row1.RowDetails = 'My details row';
    this.rows.push(row1);
  }
}

@NgModule({
  imports: [ BrowserModule, GridModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

export class MyDisplayObject {
  OrderID: number;
  RowDetails: string;
  get DisplayValue(): string {
    return this.RowDetails + ' And More Details for Display';
  }
}

[Pavithra Subramaniyam]

Hi Matt, 

Thanks for contacting Syncfusion Support. 

We have checked your query and  you can achieve your requirement by using ‘Columns.ValueAccessor’ property which will used to customize the display data of the column cells. We have prepared a simple sample based on your query. Please refer to the below code example, Documentation link and sample link. 

 

[component.ts] 

@Component({ 

  selector: 'my-app', 

  template: ` 

  <ejs-grid #grid [dataSource]='rows' (queryCellInfo)='info($event)'> 

  <e-columns> 

  <e-column headerText="Details"> 

          <ng-template #template let-data> 

              {{ data.RowDetails }} 

          </ng-template> 

      </e-column> 

   <e-column field='DisplayValue' headerText="Display Value" [valueAccessor]='valueAccess'> 

      </e-column>    </e-columns> 

  </ejs-grid> ` 

}) 

export class App { 

  rows: MyDisplayObject[]; 

  constructor() { 

    this.rows = []; 

    const row1 = new MyDisplayObject(); 

    row1.OrderID = 1123; 

    row1.RowDetails = 'My details row'; 

    this.rows.push(row1); 

  } 

public valueAccess = (field: string, data: Object, column: Object) => { 

        return data['RowDetails'] +  ' And More Details for Display'; 

    } 

} 

 

Documentation: https://ej2.syncfusion.com/16.1.37/angular/documentation/grid/columns.html#valueaccessor  

Sample               : http://plnkr.co/edit/lwe04jknrIzoXf9xYDZI?p=preview   

Regards, 

Pavithra S. 

[Matt Shanahan]

Thank you for the prompt response. While the solution offered would work, it is not a clean separation and forces additional code and duplication in the components that could be wrapped into a reusable view model. Is there a better way that would allow me to use the getter as I would like, or is that not supported currently?

Thank you.

[Pavithra Subramaniyam]

Hi Matt, 

We have checked your query and you can achieve your requirement by settings ‘Enumerable’ property as true for the getter property so that Object.Keys() method can map the getter properties. We have prepared a simple sample based on your query. Please refer to the below code example and sample link. 

 

[component.ts] 

@Component({ 

  selector: 'my-app', 

  template: ` 

  <ejs-grid #grid [dataSource]='rows' > 

  <e-columns> 

      <e-column headerText="Display Value"> 

          <ng-template #template let-data> 

              {{ data.DisplayValue }} 

          </ng-template> 

      </e-column> 

    </e-columns> 

  </ejs-grid> ` 

}) 

export class App { 

  .  .  . 

} 

export class MyDisplayObject  

  .   .   . 

   constructor() { 

    Object.defineProperty(this, 'DisplayValue', { 

      enumerable: true, {   // setting Enumerable 

      get: function () { return this.RowDetails + ' And More Details for Display'; } 

    }); 

  } 

} 

 

Sample: http://plnkr.co/edit/TUAGKjbNw3BbamS3Uw9U?p=preview  

Regards, 

Pavithra S. 

[Matt Shanahan]

Thanks for the follow-up. I think that will work much better.

[Pavithra Subramaniyam]

Hi Matt, 

 

Thanks for your update. 

 

We are glad to hear that the provided solution helped you. 

 

Please contact us if you have any queries. 

 

Regards, 

Pavithra S.