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

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
Component
Html element with directive

results matching ""

    No results matching ""