File
Implements
Metadata
| selector |
wm-xam-grid-sample |
| templateUrl |
./xam-grid-sample.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
declarative
|
Type : {}
|
Default value : []
|
|
|
Methods
|
cellClickHandler
|
cellClickHandler(e)
|
|
|
|
|
|
cellDoubleClicked
|
cellDoubleClicked()
|
|
|
|
|
|
declarative
|
Type : []
|
Default value : []
|
Decorators :
@Input()
|
|
|
|
doubleClickedState
|
Type : any
|
Default value : ''
|
|
|
|
grid1SelectedIndex
|
Type : string
|
|
|
|
initializeRowState
|
Type : any
|
Default value : ''
|
|
|
|
instance
|
Type : XamGridComponent
|
Decorators :
@ViewChild(XamGridComponent, {read: XamGridComponent})
|
|
|
|
products
|
Type : []
|
Default value : [...DATA]
|
|
|
|
selectedColumnIndex
|
Type : string
|
|
|
|
selectedValueChange
|
Type : any
|
|
|
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import {
XamGridModel,
XamGridColumnModel,
InitializeRowEventArgs,
} from '@mobilize/wms-framework';
import { XamGridComponent } from '../xam-grid.component';
import { DATA } from './data';
@Component({
selector: 'wm-xam-grid-sample',
templateUrl: './xam-grid-sample.component.html',
})
export class XamGridSampleComponent implements OnInit {
@ViewChild(XamGridComponent, { read: XamGridComponent })
instance: XamGridComponent;
@Input()
declarative = [];
model: any;
columnModel1: any;
grid1SelectedIndex: string;
selectedColumnIndex: string;
selectedValueChange: any;
doubleClickedState: any = '';
initializeRowState: any = '';
products = [...DATA];
constructor() {
this.model = {
grid: new XamGridModel(),
gridColumn1: new XamGridColumnModel(),
gridColumn2: new XamGridColumnModel(),
gridColumn3: new XamGridColumnModel(),
};
}
ngOnInit(): void {
this.model.gridColumn1.Header = 'ProductID';
this.model.gridColumn1.Field = 'ProductID';
this.model.gridColumn2.Header = 'ProductName';
this.model.gridColumn2.Field = 'ProductName';
this.model.gridColumn3.Header = 'SupplierID';
this.model.gridColumn3.Field = 'SupplierID';
}
cellClickHandler(e): void {
this.grid1SelectedIndex = e.cell.row.index;
this.selectedColumnIndex = e.cell.column.index;
this.selectedValueChange = e.cell.value;
}
cellDoubleClicked(): void {
this.doubleClickedState = 'double clicked called!';
}
grid_InitializeRow(sender: any, e: InitializeRowEventArgs): void {
this.initializeRowState = 'initializeRow called!';
}
}
<wm-xam-grid
[model]="model.grid"
[data]="products"
(cellClick)="cellClickHandler($event)"
(cellDoubleClicked)="cellDoubleClicked()"
(initializeRow)="grid_InitializeRow($event.sender, $event.e)"
[autoGenerateColumns]="false"
>
<wm-xam-grid-column [model]="model.gridColumn1" [key]="'ProductID'">
<ng-template #columnContentTemplate let-context="cell">
<label (click)="contextEvent(context)">
{{ context.rowData.data.ProductID }}
</label>
<label>
{{ context.rowData.data.ProductName }}
</label>
<input type="checkbox" value="first_checkbox" />
</ng-template>
</wm-xam-grid-column>
<wm-xam-grid-column [model]="model.gridColumn2" [key]="'ProductName'">
<ng-template #columnContentTemplate let-context="cell">
<label>
{{ context.rowData.data.ProductName }}
</label>
<input type="checkbox" value="first_checkbox" />
</ng-template>
</wm-xam-grid-column>
<wm-xam-grid-column [model]="model.gridColumn3"></wm-xam-grid-column>
<wm-xam-grid-column *ngFor="let each of declarative"></wm-xam-grid-column>
<wm-xam-grid-column-group [key]="'Group'" [headerText]="'Column Group'">
<wm-xam-grid-template-column
[key]="'GroupColumn1'"
[headerText]="'Prod %'"
[horizontalContentAlignment]="1"
#columnContentTemplate
>
<ng-template let-context="cell.row.data.data" #columnContentTemplate>
<wm-text-block [text]="Prueba"> </wm-text-block>
</ng-template>
</wm-xam-grid-template-column>
</wm-xam-grid-column-group>
<wm-xam-grid-pager-settings>
<wm-pager-settings
[allowPaging]="'Bottom'"
class="pagersettings-wm-control0"
>
</wm-pager-settings>
</wm-xam-grid-pager-settings>
</wm-xam-grid>
Legend
Html element with directive