I'm using Grid compponent (ejs-grid
) from Syncfusion Angular UI Components (Essential JS 2).
An issue is that I can't access an original object from a datasource for a current row when using a column template. That's why after clicking on the black square in a cell in Stackblitz, the output under the grid is:
Is the same: false
let-data
variable doesn't hold the original object from the datasource, but rather some copy of it.
HTML template:
<ejs-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>{{ data.testFunc() }}</span>
<span
(click)="onClick(data)"
class="clickable">
</span>
</div>
</ng-template>
</e-column>
</e-columns>
</ejs-grid>
<div>Is the same: {{ isTheSame !== undefined ? isTheSame : 'undefined' }}</div>
TypeScript component code:
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'],
providers: [FilterService,VirtualScrollService]
})
export class AppComponent {
public data: ReadonlyArray<any> = [new Item("Name1")];
public isTheSame: boolean | undefined;
public onClick(dataItem: any): void {
this.isTheSame = dataItem === this.data[0];
}
}
Is there another variable except
let-data
we could bind a column template to to get the original row data? If not, what is a workaround?Could anybody point me to docs\Gitub source containing a list of all variables available for a column template? I know at least one more except
let-data
:let-clientData
.