@lidorsystems/integralui-web
Version:
IntegralUI Web - Advanced UI Components for Angular
565 lines (534 loc) • 21.8 kB
text/typescript
/*
Copyright © 2016-2019 Lidor Systems. All rights reserved.
This file is part of the "IntegralUI Web" Library.
The contents of this file are subject to the IntegralUI Web License, and may not be used except in compliance with the License.
A copy of the License should have been installed in the product's root installation directory or it can be found at
http://www.lidorsystems.com/products/web/studio/license-agreement.aspx.
This SOFTWARE is provided "AS IS", WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the specific language
governing rights and limitations under the License. Any infringement will be prosecuted under applicable laws.
*/
import { Component, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
import { IntegralUITreeGrid } from '../../integralui/components/integralui.treegrid';
@Component({
selector: '',
template: `
<style>
.treegrid-ctpl-normal
{
width: 850px;
height: 325px;
}
.treegrid-ctpl-normal .iui-treegrid-expand-box
{
margin-top: -3px;
}
.treegrid-ctpl-item-label
{
display: inline-block;
margin-top: 3px;
padding: 2px 0;
}
/* CheckBox Cell */
.cell-checkbox
{
background: url('') no-repeat 0 0;
display: inline-block;
padding: 0;
margin: 0 7px;
width: 16px;
height: 16px;
vertical-align: middle;
}
/* Price Cell */
.price-cell
{
margin-top: 5px;
padding-right: 2px;
}
.icons
{
background-image: url(app/resources/icons.png);
background-repeat: no-repeat;
display: inline-block;
float: left;
overflow: hidden;
padding: 0 !important;
margin: -1px 1px 0 0;
width: 16px;
height: 16px;
vertical-align: middle;
}
.price-up
{
background-position: -64px -32px;
}
.price-down
{
background-position: -80px -32px;
}
/* Change Cell */
.change-cell > span
{
display: inline-block;
margin: 5px 2px 0 0;
overflow: hidden;
padding: 0;
text-align: right;
vertical-align: middle;
width: 60px;
}
.change-cell > p
{
display: inline-block;
margin: 0;
padding: 0;
height: 16px;
vertical-align: middle;
}
.progress-blue
{
background: #0080ef;
}
.progress-red
{
background: #ef8000;
}
/* Button Cell */
.button-cell
{
text-align: center;
}
.button-cell button
{
background: #004896;
border: 0;
color: white;
padding: 5px;
width: 75px;
}
.button-cell button:hover
{
background: #0080ef;
}
</style>
<h2 class="feature-title">TreeGrid / Different Cell Templates</h2>
<div class="feature-content">
<div #application>
<iui-treegrid [appRef]="applicationRef" [controlStyle]="treegridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" [rowHeight]="25" #treegrid>
<ng-template let-column [iuiTemplate]="{ type: 'header' }">
<span *ngIf="column.id==9" class="cell-checkbox" [ngStyle]="{ 'background-image': getCheckValue(column) }" (mousedown)="columnCheckClicked(column)"></span>
{{column.headerText}}
</ng-template>
<ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
<span [ngSwitch]="cell.cid">
<div *ngSwitchCase="2" class="price-cell">
<span [ngClass]="getPriceClass(cell)"></span>
{{cell.text}}
</div>
<div *ngSwitchCase="4" class="change-cell">
<span>{{cell.text}}</span>
<p [ngStyle]="{ width: getProgressWidth(cell.progress) + 'px' }" [ngClass]="getProgressClass(cell.indicator)"></p>
</div>
<div *ngSwitchCase="7" class="button-cell">
<button (mousedown)="deleteRow(cell.rid)">Delete</button>
</div>
<div *ngSwitchCase="9">
<span class="cell-checkbox" [ngStyle]="{ 'background-image': getCheckValue(cell) }" (mousedown)="checkBoxClicked(cell)"></span>
</div>
<div *ngSwitchDefault style="display:inline-block">
<span class="treegrid-ctpl-item-label">{{cell.text}}</span>
</div>
</span>
</ng-template>
</iui-treegrid>
</div>
<div class="feature-help" style="width:850px">
<p><span class="initial-space"></span>An example of a TreeGrid where some of the cells are using custom template for their content:</p>
<ul class="feature-points">
<li><span style="color:#000080">Cells with a check box</span> - When check box in column header is clicked, it will update all cells in that column.</li>
<li><span style="color:#000080">Cells with price indicator</span> - represented by up/down icons algned on left side with price on right.</li>
<li><span style="color:#000080">Cells with change indicator</span> - represented by a progress bar on the right side.</li>
<li><span style="color:#000080">Cells with button</span> - when clicked wil remove the row.</li>
</ul>
<p><span class="initial-space"></span>For more information check out the source code of this sample (<i>treegrid/treegrid-cell-templates.ts</i>) file.</p>
</div>
</div>
`,
encapsulation: ViewEncapsulation.None
})
export class TreeGridCellTemplatesSample {
@ViewChild('application', {read: ViewContainerRef, static: false}) applicationRef: ViewContainerRef;
@ViewChild('treegrid', { static: false }) treegrid: IntegralUITreeGrid;
// TreeGrid settings
public columns: Array<any>;
public rows: Array<any>;
// Control Style
public treegridStyle: any = {
general: {
normal : 'treegrid-ctpl-normal'
}
}
private imageChecked: string = 'url(app/resources/checkbox/checkbox-checked.png)';
private imageUnchecked: string = 'url(app/resources/checkbox/checkbox-unchecked.png)';
constructor(){
// Add columns and rows for the TreeGrid
this.columns = [
{ id: 1, headerText: "Company", width: 190},
{ id: 9, width: 30, fixedWidth: true },
{ id: 2, headerText: "Price", width: 80, contentAlignment: 'right' },
{ id: 3, headerText: "Change", width: 70, contentAlignment: 'center' },
{ id: 4, headerText: "Change %", width: 100, minWidth: 120, headerAlignment: 'center' },
{ id: 5, headerText: "Volume", width: 90, headerAlignment: 'center', contentAlignment: 'right' },
{ id: 6, headerText: "Country" },
{ id: 7, width: 90 }
];
this.rows = [
{
id: 1,
text: "Europe",
cells: [{ cid: 1, text: "Europe" }],
rows: [
{
id: 11,
pid: 1,
cells: [
{ cid: 9, value: true },
{ cid: 1, text: "Augue LLC" },
{
cid: 2,
indicator: true,
text: "$7.43"
},
{ cid: 3, text: "+2.83" },
{
cid: 4,
progress: 18.5,
text: "+18.50%"
},
{ cid: 5, text: "12,251,937" },
{ cid: 6, text: "Germany" },
{ cid: 7 }
]
},
{
id: 12,
pid: 1,
cells: [
{ cid: 9, value: true },
{ cid: 1, text: "Porttitor Corp." },
{
cid: 2,
indicator: false,
text: "$196.53"
},
{ cid: 3, text: "-1.47" },
{
cid: 4,
indicator: false,
progress: 4.2,
text: "-4.21%"
},
{ cid: 5, text: "2,763,552" },
{ cid: 6, text: "Italy" },
{ cid: 7 }
]
},
{
id: 13,
pid: 1,
cells: [
{ cid: 9 },
{ cid: 1, text: "Id Risus PC" },
{
cid: 2,
indicator: true,
text: "$69.23"
},
{ cid: 3, text: "+3.51" },
{
cid: 4,
progress: 5.59,
text: "+5.59%"
},
{ cid: 5, text: "15,973,926" },
{ cid: 6, text: "France" },
{ cid: 7 }
]
},
{
id: 14,
pid: 1,
cells: [
{ cid: 9 },
{ cid: 1, text: "Magna Sed Limited" },
{
cid: 2,
text: "$78.60"
},
{ cid: 3, text: "+0.07" },
{
cid: 4,
progress: 0,
text: "+0.00%"
},
{ cid: 5, text: "5,198,276" },
{ cid: 6, text: "Germany" },
{ cid: 7 }
]
},
{
id: 15,
pid: 1,
cells: [
{ cid: 9 },
{ cid: 1, text: "Mi Felis Ltd" },
{
cid: 2,
indicator: true,
text: "$27.85"
},
{ cid: 3, text: "+3.17" },
{
cid: 4,
progress: 2.67,
text: "+2.67%"
},
{ cid: 5, text: "1,945,483" },
{ cid: 6, text: "France" },
{ cid: 7 }
]
}
]
},
{
id: 2,
text: "Asia",
cells: [{ cid: 1, text: "Asia" }],
rows: [
{
id: 21,
pid: 2,
cells: [
{ cid: 9 },
{ cid: 1, text: "Varius Orci In PC" },
{
cid: 2,
indicator: false,
text: "$59.27"
},
{ cid: 3, text: "-3.39" },
{
cid: 4,
indicator: false,
progress: 6.92,
text: "-6.92%"
},
{ cid: 5, text: "7,920,374" },
{ cid: 6, text: "India" },
{ cid: 7 }
]
},
]
},
{
id: 3,
text: "North America",
cells: [{ cid: 1, text: "North America" }],
rows: [
{
id: 31,
pid: 3,
cells: [
{ cid: 9 },
{ cid: 1, text: "Hymenaeos Corporation" },
{
cid: 2,
indicator: true,
text: "$44.67"
},
{ cid: 3, text: "+8.67" },
{
cid: 4,
progress: 12.68,
text: "+12.68%"
},
{ cid: 5, text: "3,399,847" },
{ cid: 6, text: "Canada" },
{ cid: 7 }
]
},
{
id: 32,
pid: 3,
cells: [
{ cid: 9, value: true },
{ cid: 1, text: "Urna Institute" },
{
cid: 2,
indicator: true,
text: "$77.79"
},
{ cid: 3, text: "+0.79" },
{
cid: 4,
progress: 3.24,
text: "+3.24%"
},
{ cid: 5, text: "9,732,775" },
{ cid: 6, text: "USA" },
{ cid: 7 }
]
},
{
id: 33,
pid: 3,
cells: [
{ cid: 9, value: true },
{ cid: 1, text: "Proin Ltd" },
{
cid: 2,
indicator: true,
text: "$290.32"
},
{ cid: 3, text: "+1.28" },
{
cid: 4,
progress: 4.92,
text: "+4.92%"
},
{ cid: 5, text: "5,999,324" },
{ cid: 6, text: "USA" },
{ cid: 7 }
]
},
{
id: 34,
pid: 3,
cells: [
{ cid: 9 },
{ cid: 1, text: "Id Consulting" },
{
cid: 2,
indicator: false,
text: "$54.99"
},
{ cid: 3, text: "-2.39" },
{
cid: 4,
indicator: false,
progress: 6.12,
text: "-6.12%"
},
{ cid: 5, text: "3,542,897" },
{ cid: 6, text: "Mexico" },
{ cid: 7 }
]
},
]
},
{
id: 4,
text: "South America",
cells: [{ cid: 1, text: "South America" }],
rows: [
{
id: 41,
pid: 4,
cells: [
{ cid: 9 },
{ cid: 1, text: "Lacus Aliquam Consulting" },
{
cid: 2,
indicator: true,
text: "$32.46"
},
{ cid: 3, text: "+5.23" },
{
cid: 4,
progress: 7.15,
text: "+7.15%"
},
{ cid: 5, text: "2,749,325" },
{ cid: 6, text: "Brazil" },
{ cid: 7 }
]
},
{
id: 42,
pid: 4,
cells: [
{ cid: 9 },
{ cid: 1, text: "Viverra LLC" },
{
cid: 2,
indicator: false,
text: "$9.76"
},
{ cid: 3, text: "-9.25" },
{
cid: 4,
indicator: false,
progress: 24.31,
text: "-24.31%"
},
{ cid: 5, text: "6,892,784" },
{ cid: 6, text: "Argentina" },
{ cid: 7 }
]
},
]
}
];
}
// CheckBox Cell ---------------------------------------------------------------------
public getCheckValue(obj: any){
return obj && obj.value == true ? this.imageChecked : this.imageUnchecked;
}
public checkBoxClicked(cell: any){
if (cell){
let currentValue = cell.value == true ? true : false;
cell.value = !currentValue;
}
}
public columnCheckClicked(column: any){
if (column){
let currentValue = column.value == true ? true : false;
column.value = !currentValue;
let list = this.treegrid.getFullList();
for (let i = 0; i < list.length; i++){
let cell = this.getCellWithCheckBox(list[i]);
if (cell)
cell.value = column.value;
}
}
}
private getCellWithCheckBox(row: any){
let found: any = null;
for (let j = 0; j < row.cells.length; j++){
if (row.cells[j].cid == 9){
found = row.cells[j];
break;
}
}
return found;
}
// Price Cell ------------------------------------------------------------------------
getPriceClass(cell: any){
return cell.indicator == true ? 'icons price-up' : cell.indicator == false ? 'icons price-down' : 'icons';
}
// Progress Cell ---------------------------------------------------------------------
getProgressClass(indicator: boolean){
return indicator != false ? 'progress-blue' : 'progress-red';
}
getProgressWidth(value: number){
return Math.floor(value * 5 / 3);
}
// Button Cell -----------------------------------------------------------------------
deleteRow(id: any){
let row = this.treegrid.findRowById(id);
if (row){
this.treegrid.removeRow(row);
this.treegrid.updateLayout();
}
}
}