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
In HTML File
Legend
Html element with directive