Data inside Grid Column directive template is Object not the original Type.

[Jeremy Carter]

Scenario:

Grid is setup with dataSource as an array of T. In this example the T is type Activity which has method isOwnedBy(user: User).

Grid uses column directive e-column with template.

<ng-template #template let-data>
  {{data.isOwnedBy(user)}}
  <ng-template>

Problem:

When inside the ng-template using the variable data the object is no longer an instance of Activity, but rather it is an Object without any of the methods from the Activity class type. 

Screenshot: 

This should be an object of type Activity not Object.

I notice that it now has fields like index, column and foreignKeyData

[Manivel Sellamuthu]

Hi Jeremy, 

Greetings from Syncfusion support. 

By default,  column template rendering provides additional details(like column object, index, etc) along with the row data. This details is used to customize the template column based on user scenarios. 

So the data passed inside the template will not have instance of the class. So could you please provide more details on your requirement, based on that we will provide solution on this. 

Regards, 

Manivel 

[Jeremy Carter]

"So the data passed inside the template will not have instance of the class" - Why is this the case? It's JavaScript you can add fields/properties to any instance of an object at runtime (every object is dynamic akin to a Map/Dictionary).

I feel that this functionality is quirky and undocumented. What if my object has a field/property called "index" or "column"? Are you just using Object.assign to create the new object?

I don't want to be too critical here but if you need to mutate or clone my object don't change its type (thus removing any functions). Create another type for your information like ColumnRowDetail (which includes the column, index and other fields) and keep my object as pure as it can be. Angular apps are written in Typescript not AnyThingGoesScript. Perhaps the template context should also include the reference to the original instance in another context field, eg. let-item="item".

[Manivel Sellamuthu]

Hi Jeremy, 

Thanks for your update. 

You  can achieve your requirement by using the custom helper inside the template. Please refer the below code example and sample for more information. 

<ejs-grid #grid [dataSource]='data' rowHeight='38' height='200' width="300"> 

  <e-columns> 

    <e-column field='name' headerText='Employee Name' width='200'> 

      <ng-template #template let-data> 

        <div> 

          <span>{{ data.name }}</span> 

          <span> {{helper(data)}} 

                    </span> 

        </div> 

      </ng-template> 

    </e-column> 

  </e-columns> 

</ejs-grid> 

export class Item { 

  public constructor(public readonly name: string) {} 

 

  public testFunc(): string { 

    return "testFunc " + this.name; 

  } 

} 

 

@Component({ 

  selector: "app-root", 

  templateUrl: "app.component.html", 

  styleUrls: ["app.component.css"] 

}) 

export class AppComponent { 

  @ViewChild("grid", { static: true }) 

  public grid: GridComponent; 

  public data: ReadonlyArray<any> = [new Item("Name")]; 

 

  public isTheSame: boolean | undefined; 

 

  public helper(args) { 

// here we can match and get the object with instance of the class 

    let data: any = this.grid.getCurrentViewRecords()[parseInt(args.index)]; 

    return data.testFunc(); 

  } 

} 

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

 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Jeremy Carter]

Manivel,

Thank you.

That work around does solve the problem. Perhaps the documentation should be updated to note that the "let-data" will equal an Object and that it will have additional fields on it like index and column.

[Manivel Sellamuthu]

Hi Jeremy, 

Thanks for your update. 

We are glad that the provided suggestion worked. 

We will consider to include the explanation in the documentation. It will be included in any of the upcoming release. 

Please let us know, if you need further assistance. 

Regards, 

Manivel