Permalink
3d926bf Dec 22, 2016
73 lines (68 sloc) 3.77 KB
<div style="width: 800px;">
<h1>Rich Grid with Declarative Markup</h1>
<div style="padding: 4px;">
<div style="float: right;">
<input (keyup)="onQuickFilterChanged($event)" type="text" id="quickFilterInput" placeholder="Type text to filter..."/>
<button [disabled]="!showGrid" (click)="showGrid=false">Destroy Grid</button>
<button [disabled]="showGrid" (click)="showGrid=true">Create Grid</button>
</div>
<div>
<b>Employees Skills and Contact Details</b>
{{rowCount}}
</div>
</div>
<div style="clear: both;"></div>
<div *ngIf="showGrid">
<!-- Because we are using the Angular ID (ie #ag-grid marker), we have to have all the items that use
that marker inside the same ng-if as the grid -->
<div style="padding: 4px;" class="toolbar">
<span>
Grid API:
<button (click)="agGrid.api.selectAll()">Select All</button>
<button (click)="agGrid.api.deselectAll()">Clear Selection</button>
</span>
<span style="margin-left: 20px;">
Column API:
<button (click)="agGrid.columnApi.setColumnVisible('country', false)">Hide Country Column</button>
<button (click)="agGrid.columnApi.setColumnVisible('country', true)">Show Country Column</button>
</span>
</div>
<div style="clear: both;"></div>
<div style="padding: 4px;" class="toolbar">
<label>
<input type="checkbox" (change)="showToolPanel=$event.target.checked"/>
Show Tool Panel
</label>
<button (click)="createRowData()">Refresh Data</button>
</div>
<div style="clear: both;"></div>
<ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh"
[gridOptions]="gridOptions"
[showToolPanel]="showToolPanel"
[rowData]="rowData"
enableColResize
enableSorting
enableFilter
groupHeaders
suppressRowClickSelection
toolPanelSuppressGroups
toolPanelSuppressValues
rowHeight="22"
rowSelection="multiple">
<ag-grid-column headerName="Employee">
<ag-grid-column headerName="#" [width]="30" [checkboxSelection]="true" [suppressSorting]="true" [suppressMenu]="true" [pinned]="true"></ag-grid-column>
<ag-grid-column headerName="Name" field="name" [width]="150" [pinned]="true"></ag-grid-column>
<ag-grid-column headerName="Country" field="country" [width]="150" [cellRenderer]="countryCellRenderer" [pinned]="true" [filterParams]="getCountryFilterParams()"></ag-grid-column>
</ag-grid-column>
<ag-grid-column headerName="IT Skills">
<ag-grid-column headerName="Skills" [width]="125" [suppressSorting]="true" [cellRenderer]="skillsCellRenderer" [filter]="getSkillFilter()"></ag-grid-column>
<ag-grid-column headerName="Proficiency" field="proficiency" [width]="120" [cellRenderer]="percentCellRenderer" [filter]="getProficiencyFilter()"></ag-grid-column>
</ag-grid-column>
<ag-grid-column headerName="Contact">
<ag-grid-column headerName="Mobile" field="mobile" [width]="150" filter="text"></ag-grid-column>
<ag-grid-column headerName="Land-line" field="landline" [width]="150" filter="text"></ag-grid-column>
<ag-grid-column headerName="Address" field="address" [width]="500" filter="text"></ag-grid-column>
</ag-grid-column>
</ag-grid-ng2>
</div>
</div>