We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Access row datasource object in column template

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];
    }
}
  1. 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?

  2. 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.


3 Replies

BS Balaji Sekar Syncfusion Team August 5, 2019 12:45 PM UTC

Hi Alex, 

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 while comparing this object with `data[0]`, its always failed. Can you please provide more details on your requirement, based on that we will provide solution on this. 

Regards, 
Balaji Sekar.  



AA Alex Abakumov replied to Balaji Sekar August 5, 2019 03:52 PM UTC

Hi Alex, 

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 while comparing this object with `data[0]`, its always failed. Can you please provide more details on your requirement, based on that we will provide solution on this. 

Regards, 
Balaji Sekar.  


Balaji:

1.
Suppose we'd like to implement a grid displaying a list of JavaScript objects that doesn't have any kind of a "key" or "id" property to identify a specific object. Now, we'd like to implement buttons located in every row to perform some action on the original object from the datasource, let's say, to set its `state` property to `'CA'`.

How do we suppose to match in a button `click()` handler that let-data object to the specific object in datasource?


2.
Could you provide some answer to this question on the Grid\column templating API, please?
    >>> Could anybody point me to docs\Github sources containing a list of all variables available for a column template? I know at least one more except let-data: let-clientData?



BS Balaji Sekar Syncfusion Team August 6, 2019 12:12 PM UTC

Hi Alex, 

Query #1: How to find the specific column Object in column template in the EJ2 Grid? 
 
You can find a specific row of the Grid using follow way to validate with original data value while click a template cell. In below code example, we can get the index of row from the template and we have checked the original data value in currentViewData of EJ2 Grid using index value Please refer the below code example and sample for more information.  

[app.component.ts] 

    public onClick(dataItem: any): void {           
        var existNameVal = this.grid.currentViewData[parseInt(dataItem.index)]["name"]; 
        this.isTheSame = existNameVal === this.data[0]; // Here, checked current row data with original data using index and it is matched correctly then we have returned a result is true   

    } 

 
Query #2: Could anybody point me to docs\Github sources containing a list of all variables available for a column template?  
We have noted the “Need to write the columnTemplate passing parameter details in EJ2 Grid when pass the let-data” as Documentation. We will include our any upcoming release. 

Regards, 
Balaji Sekar. 


Loader.
Up arrow icon