File

src/lib/kiewit-grid/kiewit-grid.component.ts

Metadata

selector kiewit-grid-row-action
styleUrls kiewit-grid.component.scss
templateUrl ./kiewit-grid.component.html

Index

Properties
Methods
Inputs

Inputs

dataitem

Type: any

gridData

Type: Object

Methods

gridCollapseclick
gridCollapseclick(event: )
Parameters :
Name Type Optional Description
event
Returns : void
gridExpandclick
gridExpandclick(event: , dataItemOriginal: )
Parameters :
Name Type Optional Description
event
dataItemOriginal
Returns : void
Protected pageChange
pageChange(undefined: PageChangeEvent)
Parameters :
Name Type Optional Description
PageChangeEvent
Returns : void

Properties

Private skip
skip: number
Type : number
Default value : 0
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
Component
Html element with directive

results matching ""

    No results matching ""