Progress® Kendo UI® for Angular Feedback Portal

Declined

Last Updated: 25 Mar 2022 10:47 by ADMIN

Kendo Colorpicker header CSS styling

Created by: Mauro

Comments: 1

Category: Kendo UI for Angular

Type: Bug Report

Kendo Colorpicker header CSS styling

    .k-coloreditor-header {
        padding: $coloreditor-header-padding-y $coloreditor-header-padding-x 0;
    }

The style rule uses the two variables - with x and y respectively, yet has a hardcoded 0px value as a third parameter.

This causes x to only apply top padding, which is misleading.

Unplanned

Last Updated: 15 Mar 2022 16:11 by ADMIN

TreeView: Allow simultaneous usage of the built-in "Filtering" and "Drag and Drop" features

Created by: Georgi

Comments: 0

Category: Kendo UI for Angular

Type: Feature Request

TreeView: Allow simultaneous usage of the built-in "Filtering" and "Drag and Drop" features

Currently the Filtering functionality of the Kendo UI for Angular TreeView is not compatible with the built-in Drag'n'Drop.

Please make it possible to use both directives simultaneously.

Declined

Last Updated: 15 Mar 2022 13:17 by ADMIN

support for angular capacitor

Created by: Anatoli

Comments: 1

Category: Kendo UI for Angular

Type: Feature Request

support for angular capacitor

Support for building mobile apps using Angular Capacitor

Unplanned

Last Updated: 11 Mar 2022 22:37 by Jonathan

Customize the Upload/FileSelect surrounding drop area

Created by: Kendo UI

Comments: 1

Category: Kendo UI for Angular

Type: Feature Request

Customize the Upload/FileSelect surrounding drop area

Provide a built-in way to customize the dropzone area around the Select Files... button.

Duplicated

Last Updated: 03 Mar 2022 11:10 by ADMIN

MMMM/dd/yyyy date format doesn't handle number of month input properly.

Created by: Vrashabh

Comments: 0

Category: Kendo UI for Angular

Type: Bug Report

MMMM/dd/yyyy date format doesn't handle number of month input properly.

Hi,

If we format kendo-datepicker to (MMMM/dd/yyyy) and if we enter number of month in input then it is not reflecting and shows month in input field.

As you can see in screenshot, I called (valueChange) event to see the changed value, I have enter 10 in month input field so it shows two value in console, first one is when 1 is press and second is when 0 is pressed after 1 so it gives null and in input field it shows month instead of October.

It is working if we enter first letter of month but it should work if we enter month in number.

Please fix this issue asap.

Thanks.

Unplanned

Last Updated: 23 Feb 2022 08:56 by Pawel

[Dropdowns] MultiColumnDropDownList component

Created by: Pawel

Comments: 0

Category: Kendo UI for Angular

Type: Feature Request

[Dropdowns] MultiColumnDropDownList component

Hi team,

It will be a good addition to the library to have a MultiColumnDropDownList component similar to the already existing MultiColumnComboBox.

Thank you.

Completed

Last Updated: 16 Feb 2022 09:58 by ADMIN

fileselect

Created by: Johan

Comments: 1

Category: Kendo UI for Angular

Type: Feature Request

fileselect

a way to clear the file select after the files that was selected was processed.

Unplanned

Last Updated: 08 Feb 2022 16:41 by Sami

Trying to convert big IONIC angular html page into PDF.

Created by: Sami

Comments: 0

Category: Kendo UI for Angular

Type: Feature Request

Trying to convert big IONIC angular html page into PDF.

Hi

We are planning to purchase Kendo UI angular editor components and we consumed the trail version for the same. During the trial period we encountered the below issue.

Scenario : Trying to convert big IONIC angular html page into PDF. While using the <kendo-pdf-export #pdf > tag big pdf is generated and we want to split the big page into A4 hence we used the <kendo-pdf-export #pdf paperSize="A4"> .After placing the papersize empty pages are getting generated. 7 emty pages are downloaded.Kendo PDF converter not splitting the A4 while using the ionic controls.

Need your help for the above query so that we can proceed the purchase.

Thanks & Regards

Sami

Component.html

<ion-header class="modalHeaderheight">
<ion-row class="modalHeader">
<ion-col size=11>
<span class="modalheaderTitle"> {{'rfwireport.titleptw' | translate}}</span>
</ion-col>
<ion-col class="cursor-pointer">
<div (click)="closeDialog()">
<ion-icon class="modalheaderTitle" title="{{'general.dialogclose' | translate }}" name="close">
</ion-icon>
</div>
</ion-col>
</ion-row>
</ion-header>
<ion-row class="listpage-content ion-no-padding" style="width: 100%;">
<ion-col class="ion-no-padding">
<ion-content class="content-tag" style="height: 530px;--background: white;">
<ion-row>
<ion-col size=1></ion-col>
</ion-row>

<kendo-pdf-export #pdf >
<div id="PDFReportptw" >
<ion-grid class="ion-no-padding grid-bordered">
<ion-row class="ion-align-items-center tableheader tableBorder even-color">
<ion-col size="10" class="ion-text-center com-logo-height md hydrated">
<ion-col class="ion-text-center" style="font-size: 20px;">
{{selProject}} </ion-col>
</ion-col>
<ion-col size="2" class="ion-text-left md hydrated">
<div style="height:60px; width:100%">
<img id="orgimgid" [src]="orgImageUrl" (error)="setDefaultPic()">
</div>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center ">
<ion-col size="12" class="ion-text-center fontsubheader"> DAILY PERMIT TO WORK With PTW No -
{{data.eptwcode}}
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> Excavation </ion-col>
<ion-col size="4" class="ion-text-left fontBold"> {{selTrade}}
</ion-col>
<ion-col size="2" class="ion-text-left value">Form Ref No </ion-col>
<ion-col size="4" class="ion-text-left fontBold"> TBD
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> RA Ref No </ion-col>
<ion-col size="4" class="ion-text-left fontBold">{{data.rareferencenumber}}
</ion-col>
<ion-col size="2" class="ion-text-left value">SWP No </ion-col>
<ion-col size="4" class="ion-text-left fontBold">{{data.swpnumber}}</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> FPP No </ion-col>
<ion-col size="4" class="ion-text-left fontBold">{{data.fppnumber}}
</ion-col>
<ion-col size="2" class="ion-text-left value">Machine ID </ion-col>
<ion-col size="4" class="ion-text-left fontBold">{{data.machineid}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">

<ion-col size="12" class="ion-text-left fontBold">This permit is valid only for the period stated below.
The conditions of issue must be complied with throughout the duration of work. This permit may be
revoked at any time. You are responsible for the copy of this permit to display at work location till
completion of the above work or expiry or revocation of permit and must produce it on request. Ensure
relevant checklists are completed & submitted with this PTW application.
</ion-col>
</ion-row>

</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 1: APPLICATION - BY PERMIT REQUESTER
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="4" class="ion-text-left value"> Contractor Name </ion-col>
<ion-col size="8" class="ion-text-left fontBold">TBD</ion-col>

</ion-row>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="4" class="ion-text-left value"> Location of work </ion-col>
<ion-col size="8" class="ion-text-left fontBold">{{data.levelname}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="4" class="ion-text-left value"> Permit Validity period </ion-col>
<ion-col size="2" class="ion-text-left fontBold">From
</ion-col>
<ion-col size="2" class="ion-text-left fontBold"> {{data.plannedstarttime | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
<ion-col size="2" class="ion-text-left fontBold">To
</ion-col>
<ion-col size="2" class="ion-text-left fontBold"> {{data.plannedendtime | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="tableheader tableBorder" style="padding: 0 !important;"
*ngIf="checkLists[0] && checkLists[0][0]">
<ion-col size="6">
</ion-col>
<ion-col size="6" *ngFor="let stages of checkLists[0]">
<ion-row class="ion-no-padding">
<ion-col *ngFor="let stage of stages.stages" class="ion-text-center tableBorder value">
{{stage.stagecode}}
</ion-col>
</ion-row>
</ion-col>
<ion-col size="6">
<ion-row>
<ion-col class="ion-text-center" style="font-size: 25px;font-weight: bold;">{{'rfwireport.checklist' | translate}}
</ion-col>
</ion-row>
</ion-col>
<ng-container *ngIf="checkLists[0] && checkLists[0][0]">
<ion-col size="6" *ngFor="let chelist of checkLists[0]">
<ion-row class="ion-no-padding">
<ion-col *ngFor="let status of chelist.status" class="ion-text-center tableBorder value">
{{status.name}}
</ion-col>
</ion-row>
</ion-col>
</ng-container>
<ion-col size="6">
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableheader tableBorder" *ngIf="!isQuesExist">
<ion-col size="12">
<ion-row class="ion-no-padding tableheader">
<ion-col class="ion-text-center value"> {{'reports.noques' | translate}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ng-container *ngIf="checkLists[0] &&checkLists[0][0]">
<div *ngFor="let items of checkLists">
<ion-row class="ion-no-padding " *ngFor="let sec of items[0].sections;let secIndex = index">
<ion-col size="12">
<ion-row class="ion-no-padding tableheader even-color ">
<ion-col class="ion-text-center ">{{sec.name}}
</ion-col>
</ion-row>
<ion-col size="12">
<ion-col size="6">
<ion-row class="ion-no-padding " *ngFor="let ques of sec.questions;let quesIdx = index">
<ion-col class="ion-text-left tableheader tableBorder ">
<span class="" style="font-size:15px;">{{ques.label}}</span>
</ion-col>
<ion-col>
<ion-row class="ion-no-padding ">
<ion-col *ngFor="let stage of checkLists[0][0].stages;let stageindex = index"
class="ion-text-center fontBold1">
<span *ngIf="getStatus(secIndex,quesIdx,stageindex) else nozone"
class="add-icon material-icons mdi mdi-check active-status"
style="font-size:25px;"></span>
</ion-col>
</ion-row>
<ng-template #nozone>
<ion-col class="ion-text-center ">
<div class="add-icon material-icons inactive-status" style="font-size:25px;"></div>
</ion-col>
</ng-template>
</ion-col>
</ion-row>
</ion-col>
</ion-col>
</ion-col>
</ion-row>
</div>
</ng-container>

<ion-row class="ion-align-items-left">
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 1 a: PTW APPLICAT DECLARATION
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-left">
I ensure that necessary safety precautions are taken and in place for above mentioned work
activity at all time during the validity period of the permit. I must inform Project
Manager/ Authorized Manager immediately if there is any incompatible work carried out
nearby or significant changes in the work
process or work environment. I shall also display a copy of the approved PTW at the work
location.

</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">Appointed PTW</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 1 b: DECLARATION BY MAIN CONTRACTOR WORK IN CHARGE
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-left">
I shall also ensure that PART 1a statement is complied with and I will ensure that
housekeeping is carried out before closing the PTW
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">PART 1 CONTRACTOR</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 2: EVALUATION AND ASSESSMENT OF HSE COMPLIANCE - BY SAFETY ASSESSORS
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-left">
I have inspected & assessed the location and its surroundings together with the permit
requester and ensured that all reasonable, practicable measures have been taken and are
put in place to carry out the hazardous work safely. The said location is safe for the
intended work at height.
▪ I have informed the contractor that a stop work order will be implemented immediately
should any of the conditions change.

</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">PART 2 CONTRACTOR</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 3a: REVIEW AND APPROVAL- BY PROJECT MANAGER / AUTHORISED MANAGER
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-left">
I am satisfied that there has been a proper evaluation of the risks involved, that there
will be no incompatible work running concurrently in the vicinity which may pose a risk to
personnel, that all reasonably practicable measures will be taken to ensure the safety,
health of personnel, and that all personnel have
been made aware of the hazards associated with the work.
</ion-col>
</ion-row>

</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="4" class="ion-text-left value"> The permit to work is </ion-col>
<ion-col size="3" class="ion-text-left fontBold">Approved
</ion-col>
<ion-col size="1" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">Rejected
</ion-col>
<ion-col size="1" class="ion-text-left fontBold">
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ">
<ion-col size="4" class="ion-text-left value"> The Reason for rejecttion </ion-col>
<ion-col size="8" class="ion-text-left fontBold">
</ion-col>
</ion-row>
</ion-col>
</ion-row>

</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">PART 3 CONTRACTOR</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 3b: REVOCATION AFTER APPROVAL - BY PROJECT MANAGER / AUTHORISED MANAGER (if required)
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-left">
I have determined that the permit should be revoked for the following reasons:
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">PART 3b CONTRACTOR</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 4: NOTIFICATION OF COMPLETION OF WORK BY CONTRACTOR PTW APPLICANT
</ion-col>
</ion-row>
</ion-col>
</ion-row>
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-left">
Work completed & housekeeping has been carried out.
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">PART 4 CONTRACTOR</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
PART 5: Closing of PTW by Project Manager
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-card class="project-card cursor-pointer">
<ion-card-content>
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center ion-no-padding">
<ion-row class="ion-align-items-center">
<ion-col class="ion-text-center">
<ion-card-header class="card-header ">
<ion-card-title class="ion-text-center">PART 5 CONTRACTOR</ion-card-title>
</ion-card-header>
</ion-col>
</ion-row>
<ion-row class="ion-align-items-center card-font">
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">

<div>Name & Signature</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
<div style="height:75px; width:100px">
<img *ngIf="regSigPath" id="approverSig" height="75px" width="100px"
[src]="regSigPath" (error)="setDefaultPic1()">
</div>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
<ion-col class="ion-text-center date-col">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding">
<ion-row class="ion-align-items-center ion-no-padding">
<ion-col class="ion-no-padding ion-text-start">
{{data.createdAt | date:'dd-MMM-yyyy hh:mm'}}
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col size="12" class="ion-text-cener ">
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding " style="background-color:#939393">
<ion-col size="12" class="ion-text-left fontBold">
Personal Involved in this activity
</ion-col>
</ion-row>
<ion-row class="ion-no-padding tableRows">
<ion-col class="ion-no-padding">
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> S.No </ion-col>
<ion-col size="4" class="ion-text-left fontBold">Name of Employee
</ion-col>
<ion-col size="3" class="ion-text-left fontBold"> NRIC/ FIN / WP No
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">Designation
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> </ion-col>
<ion-col size="4" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> </ion-col>
<ion-col size="4" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> </ion-col>
<ion-col size="4" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
</ion-row>
<ion-row class="ion-no-padding ">
<ion-col size="2" class="ion-text-left value"> </ion-col>
<ion-col size="4" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
<ion-col size="3" class="ion-text-left fontBold">
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-grid>
</div>
</kendo-pdf-export>
</ion-content>
</ion-col>
</ion-row>
<ion-footer class="modalHeaderheight modalfooterheight">
<div class="paddingLetf5px modalFooter">
<ion-row>
<ion-col size-md="6"></ion-col>
<ion-col size-md="2" class="ion-no-padding ion-text-end">
<ion-button class="submitbutton button-highlight" (click)="pdf.saveAs('demo-content.pdf')" expand="block">
Kendo
</ion-button>
</ion-col>
<ion-col size-md="2" class="ion-no-padding ion-text-end">
<ion-button class="submitbutton button-highlight" (click)="generatePdfLarge()" expand="block">
Large
</ion-button>
</ion-col>
<ion-col size-md="2" class="ion-no-padding ion-text-end btnpadding30">
<ion-button class="cancelButton button-highlight" (click)="closeDialog()">
{{'general.dialogclose' | translate}}
</ion-button>
</ion-col>
</ion-row>
</div>
</ion-footer>

Technology Used : (package.json)

{
"name": "IonicApp",
"productName": "IONICApp",
"version": "1.0.0",
"FileVersion": "1.0.0",
"buildVersion": "1.0.0",
"launchUiVersion": "1.0.0",
"author": "Sami",
"private": true,
"scripts": {
"ng": "node --max_old_space_size=8192 ng",
"start": "node --max_old_space_size=8192 ng serve",
"build": "node --max_old_space_size=8192 ng build --prod",
"test": "node --max_old_space_size=8192 ng test",
"lint": "node --max_old_space_size=8192 ng lint",
"e2e": "node --max_old_space_size=8192 ng e2e"
},
"typings": "./dist/definitions/index.d.ts",
"browser": {
"zlib": false,
"crypto": false
},
"dependencies": {
"@angular/animations": "^11.0.9",
"@angular/cdk": "^7.0.3",
"@angular/common": "~10.0.0",
"@angular/forms": "~10.0.0",
"@angular/platform-browser": "~10.0.0",
"@angular/platform-browser-dynamic": "~10.0.0",
"@angular/router": "~10.0.0",
"@ionic-native/core": "^5.32.1",
"@ionic-native/file": "^5.32.1",
"@ionic/angular": "^5.0.0",
"@ionic/storage": "^2.2.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@progress/kendo-angular-pdf-export": "^3.0.3",
"@techiediaries/ngx-qrcode": "^9.1.0",
"@types/html2canvas": "0.0.36",
"@types/jspdf": "^1.3.3",
"angular-image-annotator": "0.0.10",
"angularx-qrcode": "^10.0.12",
"buffer": "^5.4.3",
"chart.js": "^2.9.3",
"core-js": "^2.5.4",
"crypto-js": "^4.0.0",
"dom-to-image": "^2.6.0",
"es6-promise-plugin": "^4.2.2",
"exceljs": "4.2.1",
"file-saver": "^2.0.5",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.7",
"image-to-base64": "^2.2.0",
"jquery": "^3.4.1",
"jspdf": "^2.3.1",
"lodash": "^4.17.15",
"moment": "^2.29.1",
"ng-circle-progress": "^1.6.0",
"ng2-charts": "^2.4.3",
"ngx-tableau": "^1.2.0",
"node-jose": "1.0.0",
"process": "^0.11.10",
"quill": "^1.3.7",
"randombytes": "^2.1.0",
"rxjs-compat": "^6.5.4",
"signature_pad": "^3.0.0-beta.4",
"stream": "0.0.2",
"temp": "^0.8.3",
"tslib": "^2.0.0",
"underscore": "^1.9.2",
"xlsx": "^0.16.9",
"xml-js": "^1.6.11",
"@progress/kendo-angular-common": "^2.0.0",
"@progress/kendo-drawing": "^1.2.0",
"@progress/kendo-licensing": "^1.0.2",
"@angular/localize": null,
"@progress/kendo-theme-default": "^5.0.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.0",
"@angular/cli": "^11.2.11",
"@angular/compiler": "~10.0.0",
"@angular/compiler-cli": "~10.0.0",
"@angular/core": "^11.0.9",
"@angular/language-service": "~10.0.0",
"@ionic/angular-toolkit": "^2.3.0",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.20.33",
"codelyzer": "^6.0.0",
"node-loader": "^0.6.0",
"node-sass": "^4.13.1",
"rxjs": "^6.6.3",
"sass": "^1.26.3",
"ts-node": "~8.3.0",
"typescript": "~3.9.5",
"zone.js": "^0.11.3"
},
"description": "OnSiteTracking"
}

Unplanned

Last Updated: 03 Feb 2022 10:46 by ADMIN

[Grid][Pager] Allow customizing the responsive UI and pager type further

Created by: Kendo UI

Comments: 0

Category: Kendo UI for Angular

Type: Feature Request

[Grid][Pager] Allow customizing the responsive UI and pager type further

Please allow setting the pager type to "Select" so that the Select element, currently only visible in responsive numeric pagers when there is not enough space for rendering the numeric buttons, can be displayed as a result of developer configuration instead.

Also, provide an option for displaying the numeric input element instead of the Select element when the pager responsive behavior kicks in.

Completed

Last Updated: 31 Jan 2022 15:52 by ADMIN

UI Query Builder

Created by: Jin

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

UI Query Builder

Any plans for a UI Query Builder that uses the Data Query component?

Completed

Last Updated: 31 Jan 2022 15:21 by ADMIN

Multiselect: Clicking on the margin between checkbox and label closes dropdown

Created by: Mauro

Comments: 3

Category: Kendo UI for Angular

Type: Bug Report

Multiselect: Clicking on the margin between checkbox and label closes dropdown

autoClose is set to false and checkboxes true.
Clicking on that small margin area next to checkbox causes the dropdown to close.

Duplicated

Last Updated: 26 Jan 2022 14:02 by ADMIN

Rowspan option in Grid

Created by: Mohamed

Comments: 0

Category: Kendo UI for Angular

Type: Feature Request

Rowspan option in Grid

Hello
We need to add rowspan option in Grid component.

Unplanned

Last Updated: 22 Dec 2021 06:31 by Varun

Scheduler Disable All Day feature

Created by: Kevin

Comments: 3

Category: Kendo UI for Angular

Type: Feature Request

Scheduler Disable All Day feature

We do not want to use the all day functionality.

When an event is 24 hours or longer, it does not render in the time slots, rather than the all day slot.

Hiding the all day slot does not work, as that not render the event.

https://stackblitz.com/edit/angular-jpj9fl?file=app/app.component.ts

Unplanned

Last Updated: 25 Nov 2021 08:47 by ADMIN

[Grid][TreeList] Support touch-scrolling in the locked columns section

Created by: Kendo UI

Comments: 0

Category: Kendo UI for Angular

Type: Feature Request

[Grid][TreeList] Support touch-scrolling in the locked columns section

Currently it is not possible to touch-scroll the locked section of the Grid on mobile devices - this is a known limitation:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/#toc-known-limitations

https://www.telerik.com/kendo-angular-ui-develop/components/treelist/columns/locked/#toc-known-limitations

Please provide the opportunity for touch-scrolling the locked section of Grid and TreeList similar to the one available on other devices via the mousewheel.

Unplanned

Last Updated: 19 Nov 2021 08:19 by ADMIN

Chart Tooltip control over position options and appending to a specific element.

Created by: Kendo UI

Comments: 0

Category: Kendo UI for Angular

Type: Feature Request

Chart Tooltip control over position options and appending to a specific element.

Hi,

It will be good to have a feature to control the position and limit the render to a specific container(appendTo option) for the Chart TooltipComponent - https://www.telerik.com/kendo-angular-ui/components/charts/api/TooltipComponent/.

Thanks.

Unplanned

Last Updated: 10 Nov 2021 09:13 by ADMIN

OrgChart component

Created by: Theo

Comments: 0

Category: Kendo UI for Angular

Type: Feature Request

OrgChart component

Provide a built-in OrgChart component part of the Kendo Angular suite.

https://demos.telerik.com/kendo-ui/orgchart/index

Declined

Last Updated: 27 Oct 2021 22:20 by ADMIN

tabs

Created by: Rajesh

Comments: 1

Category: Kendo UI for Angular

Type: Bug Report

tabs

Can i reorder tabs using drag and drop in angular ?

How i need to close kendo sortable item in angular? is there any event for that?

Unplanned

Last Updated: 18 Oct 2021 12:13 by Dylan

Add support for Moment.js

Created by: Stefan

Comments: 3

Category: Kendo UI for Angular

Type: Feature Request

Add support for Moment.js

momentjs is a widely used date library which makes handling dates much more comfortable, and all Date components should support it

Duplicated

Last Updated: 08 Oct 2021 08:14 by ADMIN

There is no event to cater mouse-over events for a row cell in k-grid. This is important if we need to perform something cell specific like pop over a dynamic component.

Created by: Jyothi

Comments: 1

Category: Kendo UI for Angular

Type: Feature Request

There is no event to cater mouse-over events for a row cell in k-grid. This is important if we need to perform something cell specific like pop over a dynamic component.

There is no event to cater mouse-over events for a specific cell of a row in k-grid. This is important if we need to perform something cell specific like pop up a dynamic component

related to that cell and row.

Unplanned

Last Updated: 27 Sep 2021 09:12 by ADMIN

Filter on Column List (Column Menu)

Created by: David

Comments: 1

Category: Kendo UI for Angular

Type: Feature Request

Filter on Column List (Column Menu)

On the Column Menu on the Grid, I can have a large number of columns that get rendered as a scrollable list of column names.
It would be useful to have a simple way to filter this list of columns, maybe something that reduces the list of columns as you type.