Posted 20 October 2017, 6:57 am EST
I have a fairly common flex-grid usage like below, where I have pair of identical flex-grids, one with a single row, and one with multiple rows, and I want to enter data into the single row upper grid, click a button and copy that data into all rows in the grid below.
This functionality is working perfectly, and my upper grid is formatted as below. Note that the button is placed in the cell-template, which means it crowds the data entry, and often forces the cell to wrap to two lines.
<wj-flex-grid #flex
[itemsSource]="groupData"
[isReadOnly]="false"
[allowResizing]="'Columns'"
[showMarquee]="false"
[showSort]="false"
[headersVisibility]="1">
<wj-flex-grid-column [header]="'Field One'" [binding]="'Field_One'" [width]="'*'">
<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
<span class="grid_link">
{{item.Field_One}}
</span>
<span class="event-icon icon-Arrow_Circle_Down" (click)="pushValueDown('Field_One',item.Field_One)"></span>
</ng-template>
</wj-flex-grid-column>
<wj-flex-grid-column [header]="'Field Two'" [binding]="'Field_Two'" [width]="'*'">
<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
<span class="grid_link">
{{item.Field_Two}}
</span>
<span class="event-icon icon-Arrow_Circle_Down" (click)="pushValueDown('Field_Two',item.Field_Two)"></span>
</ng-template>
</wj-flex-grid-column>
</wj-flex-grid>
What I would much prefer is to move this button to the column header, like below:
<wj-flex-grid #flex
[itemsSource]="groupData"
[isReadOnly]="false"
[allowResizing]="'Columns'"
[showMarquee]="false"
[showSort]="false"
[headersVisibility]="1">
<wj-flex-grid-column [header]="'Field One'" [binding]="'Field_One'" [width]="'*'">
<ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'">
Field One
<span class="event-icon icon-Arrow_Circle_Down" (click)="pushValueDown('Field_One',item.Field_One)"></span>
</ng-template>
<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
<span class="grid_link">
{{item.Field_One}}
</span>
</ng-template>
</wj-flex-grid-column>
<wj-flex-grid-column [header]="'Field Two'" [binding]="'Field_Two'" [width]="'*'">
<ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'">
Field Two
<span class="event-icon icon-Arrow_Circle_Down" (click)="pushValueDown('Field_Two',item.Field_Two)"></span>
</ng-template>
<ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-row="row" let-item="item">
<span class="grid_link">
{{item.Field_Two}}
</span>
</ng-template>
</wj-flex-grid-column>
</wj-flex-grid>
However, when I do this, and click the button, I get the following error:
ERROR TypeError: Cannot read property 'Field_One' of undefined
This makes sense, as the ‘item.Field_One’ reference isn’t correct from the header, it has no way of knowing what row it should be plucking the item. value from, so my question is this - how would I get a reference to this value from the header to include in a script (pass as a parameter in a function call)?
Is there some form of flex.row[0].valueForKey(Field_One) that I can pass, or some other way to get a reference to this value?
