File
Metadata
selector |
kiewit-grid-row-action |
styleUrls |
kiewit-grid.component.scss |
templateUrl |
./kiewit-grid.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Methods
gridCollapseclick
|
gridCollapseclick(event: )
|
|
Parameters :
Name |
Type |
Optional |
Description |
event |
|
|
|
|
gridExpandclick
|
gridExpandclick(event: , dataItemOriginal: )
|
|
Parameters :
Name |
Type |
Optional |
Description |
event |
|
|
|
dataItemOriginal |
|
|
|
|
Protected pageChange
|
pageChange(undefined: PageChangeEvent)
|
|
Parameters :
Name |
Type |
Optional |
Description |
|
PageChangeEvent
|
|
|
|
import { Component, Input, Output, OnInit, Inject, ElementRef, ViewChild } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AddEvent, EditEvent, GridComponent, PageChangeEvent } from '@progress/kendo-angular-grid';
declare var initializeCurrencyTextbox: any;
declare var initializePercentageTextbox: any;
@Component({
selector: 'kiewit-grid-row-action',
templateUrl: './kiewit-grid.component.html',
styleUrls: ['./kiewit-grid.component.scss']
})
export class KiewitGridComponent {
@Input() public gridData: Object;
@Input() public dataitem: any;
private skip: number = 0;
protected pageChange({ skip, take }: PageChangeEvent): void {
this.skip = skip;
}
gridExpandclick(event, dataItemOriginal) {
if (dataItemOriginal.HiddenHeaderRow) {
var dataItem = dataItemOriginal.HiddenHeaderRow.slice().reverse();
var target = event.target || event.srcElement || event.currentTarget;
var nextSibling = target.parentNode.parentNode.parentNode.parentNode.nextSibling;
if (nextSibling !=null && nextSibling.className == "expandedRow") {
for (var rowHide = 0; rowHide < dataItem.length; rowHide++) {
nextSibling = target.parentNode.parentNode.parentNode.parentNode.nextSibling;
target.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(nextSibling);
}
}
else {
var r;
for (var row = 0; row < dataItem.length; row++) {
r = document.createElement("tr");
r.className = 'expandedRow';
for (var c = 0; c < dataItem[row].length; c++) {
let col = r.insertCell(c);
col.innerHTML = dataItem[row][c].data;
col.colSpan = dataItem[row][c].colSpan;
col.className = dataItem[row][c].class;
//col.style = "border-left-width:" + dataItem[row][c].rightMarginWidth; +"px";
}
target.parentNode.parentNode.parentNode.parentNode.parentNode.insertBefore(r.cloneNode(true), target.parentNode.parentNode.parentNode.parentNode.nextSibling);
}
var classname = document.getElementsByClassName("up-arrow");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', this.gridCollapseclick, false);
}
}
}
if (dataItemOriginal.HiddenRow) {
var dataItem = dataItemOriginal.HiddenRow.slice().reverse();
var target = event.target || event.srcElement || event.currentTarget;
var nextSibling = target.parentNode.parentNode.parentNode.nextSibling;
if (nextSibling.className == "expandedRow") {
for (var rowHide = 0; rowHide < dataItem.length; rowHide++) {
nextSibling = target.parentNode.parentNode.parentNode.nextSibling;
target.parentNode.parentNode.parentNode.parentNode.removeChild(nextSibling);
}
}
else {
var r;
for (var row = 0; row < dataItem.length; row++) {
r = document.createElement("tr");
r.className = 'expandedRow';
for (var c = 0; c < dataItem[row].length; c++) {
let col = r.insertCell(c);
col.innerHTML = dataItem[row][c].data;
col.colSpan = dataItem[row][c].colSpan;
col.className = dataItem[row][c].class;
//col.style = "border-left-width:" + dataItem[row][c].rightMarginWidth; +"px";
}
target.parentNode.parentNode.parentNode.parentNode.insertBefore(r.cloneNode(true), target.parentNode.parentNode.parentNode.nextSibling);
}
var classname = document.getElementsByClassName("up-arrow");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', this.gridCollapseclick, false);
}
}
}
initializeCurrencyTextbox(".currency");
initializePercentageTextbox(".percentage");
}
gridCollapseclick(event) {
var target = event.target || event.srcElement || event.currentTarget;
var allRows = target.parentNode.parentNode.parentNode.children;
var eleToRemove=[];
for (var aRow = allRows.length - 1; aRow >= 0; aRow--) {
if (target.parentNode.parentNode == allRows[aRow]) {
for (var arRow = aRow ; arRow >= 0; arRow--) {
if (allRows[arRow].className == "expandedRow") {
eleToRemove.push(allRows[arRow]);
}
else {
break;
}
}
}
}
for (var aRowRemove = eleToRemove.length - 1; aRowRemove >= 0; aRowRemove--) {
target.parentNode.parentNode.parentNode.removeChild(eleToRemove[aRowRemove]);
}
}
}
<span [ngClass]="{'down-arrow': dataitem.isExpandRowVisible }" class="down-arrow" (click)="gridExpandclick($event,dataitem)"></span>
Implementation
In Type Script File
import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { formatNumber } from '@telerik/kendo-intl';
type ColumnSetting = {
field: string,
title: string,
format?: string,
type: '' | 'text' | 'formattedText' | 'formattedTextWithRowAction' | 'numeric' | 'boolean' | 'date' | 'checkbox',
width: string,
style: string,
class: string,
configData: object,
sortable: boolean,
isClickable: boolean,
isBidColumn: boolean,
lineHeight: string,
isEquipmentGain: boolean,
isSafetyMhrsTransaction: boolean,
isYears: boolean
};
export class KiewitGridComponent implements OnInit{
private summaryGridData: any[] = [];
public columns: ColumnSetting[] = [];
ngOnInit() {}
}
In HTML File
<kendo-grid #grdSummary id="grdSummary"
[data]="summaryGridData"
[scrollable]="'virtual'"
[pageSize]="5"
[height]="480"
(cellClick)="cellClickHandler($event,grdSummary)"
(cellClose)="cellCloseHandler($event)">
<ng-template kendoGridNoRecordsTemplate>
<div *ngIf="isLoading == false;">
No records available.
</div>
<div *ngIf="isLoading == true;" class="loadingGridContent">
<span class="k-icon k-i-loading"></span>
</div>
</ng-template>
<kendo-grid-column *ngFor="let columndata of columns"
field="{{columndata.field}}"
format="{{columndata.format}}"
filter="{{columndata.type}}"
[style]="getAlignment(columndata.style)"
[width]='columndata.width'
[class]='columndata.class'
[sortable]='columndata.sortable'>
<ng-template *ngIf="columndata.isYears" kendoGridHeaderTemplate>
</ng-template>
<ng-template *ngIf="columndata.isYears" kendoGridCellTemplate let-dataItem="dataItem" let-rowIndex="rowIndex">
<kiewit-grid-row-action *ngIf="rowIndex==0" style="margin-right:41px" [dataitem]="dataItem"></kiewit-grid-row-action>
<span style="float:right;">{{dataItem.Years}}</span>
</ng-template>
<ng-template kendoGridHeaderTemplate>
<kiewit-grid-row-action *ngIf="columndata.isBidColumn" [dataitem]="headerData"></kiewit-grid-row-action>
<span [class]='columndata.lineHeight' [innerHTML]="columndata.title" (click)="onTemplateClick($event)"></span>
</ng-template>
<ng-template kendoGridEditTemplate *ngIf="columndata.type=='numeric'" let-dataItem="dataItem" let-formGroup="formGroup" let-column="column" let-isNew="isNew" class="kcs-grid-field">
<kiewit-numerictextbox-grid [config]="columndata.configData" [(kcsNgModel)]="dataItem[columndata.field]" (keydown)="onGridTabbing(grdSummary,$event);" [kcsFormControl]="formGroup.get(column.field)"></kiewit-numerictextbox-grid>
</ng-template>
<ng-template *ngIf="columndata.type=='formattedText'" kendoGridCellTemplate let-dataItem>
<span>{{ formatNumericTextBox(dataItem[columndata.field])}}</span>
</ng-template>
<ng-template *ngIf="columndata.type=='formattedTextWithRowAction'" kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<kiewit-grid-row-action *ngIf="rowIndex!=0" style="float:left" [dataitem]="dataItem"></kiewit-grid-row-action>
<span style='margin-left: 18px;'>{{formatCurrencyTextBox(dataItem.DistrictOverHead)}}</span>
</ng-template>
<ng-template *ngIf="columndata.isEquipmentGain" kendoGridCellTemplate let-dataItem="dataItem" let-rowIndex="rowIndex" >
<span class="spnEquipmentGain" *ngIf="rowIndex > 0" >{{ formatCurrencyTextBox(dataItem.EquipmentGain)}} </span>
<span #target class="spnEquipmentGain" *ngIf="rowIndex == 0">{{ formatCurrencyTextBox(dataItem.EquipmentGain)}} </span>
</ng-template>
<ng-template *ngIf="columndata.isSafetyMhrsTransaction" kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup" let-column="column" let-isNew="isNew" class="kcs-grid-field">
<kiewit-numerictextbox-grid class="txtSafetyMhrs" [config]="columndata.configData" [(kcsNgModel)]="dataItem[columndata.field]" (keydown)="onGridTabbing(grdSummary,$event);" [kcsFormControl]="formGroup.get(column.field)"> </kiewit-numerictextbox-grid>
</ng-template>
</kendo-grid-column>
</kendo-grid>
Legend
Html element with directive