<div>
    <div class="copy">
        <h3>
            Cell Edit Templates
        </h3>
        <p>
            This sample demonstrates how to use cell edit templates to create cell editors for simple
            and complex objects. The <b>wjFlexGridCellTemplate</b> introduces the <b>cell</b> local
            template variable containing an object that stores cell related information like <b>item</b>,
            <b>row</b>, <b>col</b>, <b>value</b> and <b>values</b> properties which are useful
            in template bindings. The last two properties mentioned here are specially intended for use
            in cell edit templates.
        </p>
        <p>
            The <b>Amount</b> column uses a simple numeric value editor implemented using the
            <b>wj-input-number</b> component. The component is bound to the <b>cell.value</b>
            property that contains the cell value. By binding to the <b>cell.value</b> instead of
            an underlying item property, you allow <b>FlexGrid</b> to properly cancel the cell
            editing process on pressing the <b>Esc</b> key.
        </p>
        <p>
            The <b>Date Range</b> column is bound to the <b>start</b> item property of the <b>Date</b>
            type, but actually shows <b>start - end</b> date range retrieved from two item properties.
            The cell editor uses two <b>wj-input-date</b> components to edit each end of the range in order
            to be consistent with the cell rendering. To cancel the editing process properly in this
            case, the template element assigns the <b>valuePaths</b> property with the <b>&#123;rangeEnd: 'item.end'}</b>
            object, that defines the additional editing path (<b>item.end</b>) and its name (<b>rangeEnd</b>).
            According to this definition, the <b>cell.values</b> property contains the <b>rangeEnd</b>
            property with the value obtained using this path, and the second <b>wj-input-date</b> is bound
            to the <b>cell.values.rangeEnd</b> property. This way, the grid will properly cancel the editing process
            of both editing values.
        </p>
        <p>
            The <b>Person</b> column is bound to the item property containing complex object represented
            by the <b>Person</b> class, which exposes the <b>firstName</b> and the <b>lastName</b> properties out of
            its interface. It uses the same technique as the <b>Date Range</b> column for cancelling
            the cell editing properly using two editor fields in a single cell.
        </p>
        <!--<p>
            The <b>Person (Editor Component)</b> is the same as its <b>Person</b> sibling. But,
            cell edit template markup, here, is stored in the component's <b>personCellEditorHtml</b>
            property and is loaded using the <b>wj-html-loader</b> component, which is an analogue of
            the Angular 1 directive named <b>ngBindHtml</b>.
        </p>-->
    </div>
    <div>

        <!-- the grid -->
        <wj-flex-grid #flex1 [allowResizing]="'Both'"
                      class="grid"
                      [itemsSource]="data"
                      [isReadOnly]="false"
                      [allowAddNew]="true"
                      (beginningEdit)="beginningEdit(flex1, $event)">

            <wj-flex-grid-column [header]="'Date Range'" [binding]="'start'" [width]="260">
                <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
                    {{format(cell.item.start, 'd')}} - {{format(cell.item.end, 'd')}}
                </ng-template>
                <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell"
                          [valuePaths]="{rangeEnd: 'item.end'}">
                    <wj-input-date [(value)]="cell.value" [isRequired]="false" style="width:120px"></wj-input-date>
                    -
                    <wj-input-date [(value)]="cell.values.rangeEnd" [isRequired]="false" style="width:120px"></wj-input-date>
                </ng-template>
            </wj-flex-grid-column>

            <wj-flex-grid-column [header]="'Amount'" [binding]="'amount'" [format]="'n0'" [width]="150">
                <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell">
                    <wj-input-number [(value)]="cell.value" [isRequired]="false" [step]="1">
                    </wj-input-number>
                </ng-template>
            </wj-flex-grid-column>

            <wj-flex-grid-column [header]="'Person'" [binding]="'person'" [width]="220" #personCol [dataType]="'Object'">
                <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell"
                          [valuePaths]="{ln: 'item.person.lastName'}">
                    {{cell.item[personCol.binding]?.firstName}} {{cell.values.ln}}
                </ng-template>
                <ng-template wjFlexGridCellTemplate [cellType]="'CellEdit'" let-cell="cell"
                          [valuePaths]="{fn: 'item.person.firstName', ln: 'item.person.lastName'}">
                    First:
                    <input [(ngModel)]="cell.values.fn" style="width:70px" />
                    Last:
                    <input [(ngModel)]="cell.values.ln" style="width:70px" />
                </ng-template>
            </wj-flex-grid-column>

        </wj-flex-grid>
    </div>
</div>
