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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Access row datasource object in column template

Thread ID:

Created:

Updated:

Platform:

Replies:

146428 Aug 2,2019 08:41 PM UTC Aug 6,2019 12:12 PM UTC Angular - EJ 2 3
loading
Tags: Grid
Alex Abakumov
Asked On August 2, 2019 08:41 PM UTC

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.


Balaji Sekar [Syncfusion]
Replied On 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.  


Alex Abakumov
Replied On 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?


Balaji Sekar [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon