Progress® Kendo UI® for Angular Feedback Portal

Declined

Last Updated: 15 Sep 2026 08:34 by ADMIN

Provide support for setting values of input properties programmatically

Created by: Kendo UI

Comments: 1

Category: Kendo UI for Angular

Type: Feature Request

Provide support for setting values of input properties programmatically

Currently, the supported approach for setting values for the input properties of the Kendo UI for Angular components is by binding them to a DOM property.

Please provide support for the ability to set values for the input properties programmatically.

Declined

Last Updated: 15 Sep 2026 07:50 by ADMIN

Extend events with preparation and follow-up time

Created by: Daniel Mettler

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

Extend events with preparation and follow-up time

In some calendar apps like Apple it's nice to extend appointments with a travel time (or preparation time).

Please extend Kendo Scheduler with such an event preparation-time and also a follow-up time, which looks like this:

Declined

Last Updated: 14 Sep 2026 13:57 by ADMIN

Trying to convert big IONIC angular html page into PDF.

Created by: Sami

Comments: 1

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"
}

Declined

Last Updated: 14 Sep 2026 13:46 by ADMIN

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

Created by: Kendo UI

Comments: 1

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.

Declined

Last Updated: 14 Sep 2026 13:34 by ADMIN

Add support for a separator line between two menu items in the kendo-splitbutton component's popup.

Created by: Christian

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

Add support for a separator line between two menu items in the kendo-splitbutton component's popup.

Currently, there is no out-of-the-box approach to add a separator line between two menu items in the kendo-splitbutton component's popup, so we would like request this feature.

Declined

Last Updated: 14 Sep 2026 13:33 by ADMIN

Feature Request: expose individual properties from toODataString to allow for integration with OpenAPI etc

Created by: Adam

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

Feature Request: expose individual properties from toODataString to allow for integration with OpenAPI etc

Currently toODataString constructs the entire query string used to make a request. When API endpoints are automatically generated (using swagger/OpenAPI for example), this makes toODataString less helpful. I would like a function that exposes the individual properties generated by toODataString

For example, toODataString currently produces something like

'$skip=0&$top=20&$orderby=quantity&$filter=date ge 2020-01-01T00:00:00.000Z'

I'd like something like toODataObject that produces something like

{$skip: 0, $top: 20, $orderby: 'quantity', $filter: 'date ge 2020-01-01T00:00:00.000Z'}

so that I could pass individual properties as parameters to generated API functions.

Thanks.

Declined

Last Updated: 14 Sep 2026 13:32 by ADMIN

[Editor] - Expose input to set NodeViews option

Created by: Eran Weiser

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

[Editor] - Expose input to set NodeViews option

The nodeViews feature of proseMirror can't be used if not exposed as an input as it should be set in construction of the EditorView which is done internally the component.

We would like to supply it as an input to your component

Declined

Last Updated: 14 Sep 2026 13:28 by ADMIN

[Dropdowns] MultiColumnDropDownList component

Created by: Pawel

Comments: 1

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.

Declined

Last Updated: 14 Sep 2026 12:03 by ADMIN

Configure Filter component by using FilterExpression with predefined list of values for value dropdown list.

Created by: Milan

Comments: 5

Category: Kendo UI for Angular

Type: Feature Request

Configure Filter component by using FilterExpression with predefined list of values for value dropdown list.

Hi

I've started using Filter component since your recent editorTemplate feature makes is more usable when it comes to selecting predefined list of values.

One problem with this is that majority of values for filterable fields are based on predefined list of values that we put in dropdown list.
So our component template has many repeated templates like this

<ng-template let-currentItem #field1 >
    <kendo-dropdownlist
        [data]="valuesForField1"
        (valueChange)="
            currentItem.value = $event; filter.valueChange.emit(filter.value)
        "
    >
    </kendo-dropdownlist>
</ng-template>
<ng-template let-currentItem #field2 >
    <kendo-dropdownlist
        [data]="valuesForField2"
        (valueChange)="
            currentItem.value = $event; filter.valueChange.emit(filter.value)
        "
    >
    </kendo-dropdownlist>
</ng-template>

Writing these editor templates with handlers for valueChange that differs only in the source list and using onInit to set these as editorTemplate seems inefficient.
Our component ended up with mostly filter editor templates just in order to use filter component.
I am aware that this could be all done in markup but using filters property on Filter is more flexible as filters can be driven from server side.

It would be a good that FilterExpression type has some property like valuesListData: {text: string, value: any}[].so that dropdown get generated automatically.
I assume that picking from the dropdown is the mostly used scenario and would satisfy majority use cases.

So this is a feature request:

As a developer I would like to be able to set a list of objects on FilterExpression object so that Filter component create dropdown for value editor with the provided list.

Declined

Last Updated: 14 Sep 2026 11:41 by ADMIN

[Intl] Support for 'j' input skeleton symbol

Created by: Felix

Comments: 1

Category: Kendo UI for Angular

Type: Feature Request

[Intl] Support for 'j' input skeleton symbol

Hi Kendo Angular team,

It will be a good addition to the Kendo UI internalization to add support for the 'j' input skeleton symbol.

https://www.unicode.org/reports/tr35/tr35-dates.html#dfst-hour

Thank you for your consideration.

Declined

Last Updated: 14 Sep 2026 11:31 by ADMIN

Template for the Textbox input area

Created by: n/a

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

Template for the Textbox input area

The TextBox component allows us to specify a template for the prefix and suffix areas by applying the TextBoxPrefixTemplate and TextBoxSufffixTemplate directives to an ng-template.

I would also like to able to specify a template for the actual input area itself.

My use case for this is that I have a directive that I use within my application that I would normally apply to the <input> tag to ensure some custom processing is undertaken during user input. With the current TextBox component I am unable to do this.

Additionally I would like to specify the autocomplete attribute for the <input> tag to alow the browser to autocomplete things such as shipping-address etc. or even to disable the browser autocomplete completely by setting this to "off". Again this is not possible with the current TextBox but would be easily achievable if I could specify the template for the input area.

If this was implemented as requested I would expect my angular HTML to look something like:

 <kendo-textbox>
   <ng-template kendoTextBoxPrefixTemplate>
       <button kendoButton look="clear" icon="image"></button>
   </ng-template>
   <ng-template kendoTextBoxInputTemplate>
       <input myDirective [autocomplete]="myValue" />
   </ng-template>
   <ng-template kendoTextBoxSuffixTemplate>
       <kendo-textbox-separator></kendo-textbox-separator>
       <button kendoButton fillMode="clear" icon="calendar"></button>
       <kendo-icon name="bell"></kendo-icon>
    </ng-template>
 </kendo-textbox>

The input template could be specified using kendoTextBoxInputDirective

Declined

Last Updated: 14 Sep 2026 11:28 by ADMIN

Nest lists, paragraphs with Tab key

Created by: Babu

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

Nest lists, paragraphs with Tab key

Tab Key: When you press the TAB key, the editor loses control of the focus. It is intended to give tab space rather than leave editor control. The indent space actually differs greatly from the tab space.

Declined

Last Updated: 14 Sep 2026 11:24 by ADMIN

[Toolbar] Add PopupSettings interface for the SplitButton and DropDownButton

Created by: Kendo UI

Comments: 1

Category: Kendo UI for Angular

Type: Feature Request

[Toolbar] Add PopupSettings interface for the SplitButton and DropDownButton

Current behavior
ToolbarComponent, DropDownButton and SplitButton utilize the PopupSettings of type:

interface PopupSettings { animate?: boolean; appendTo?: 'root' | 'component' | ViewContainerRef; popupClass?: string; anchorAlign?: Align; popupAlign?: Align; width?: number | string; height?: number | string; }

For the overflow popup, they all work fine, but for the buttons:

- popupAlign
- anchorAlign
- height
- width
properties don't work.

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

Currently, the DropDownButton and SplitButton popup alignment can be changed, by using the align property of the Buttons PopupSettings type
https://stackblitz.com/edit/angular-jqhp2d-smtyhp?file=app/app.component.ts

Expected behavior
Create separate PopupSettings interface for the DropDownButton and SplitButton components to:

isolate the width and height options
to unify the PopupSettings of the Toolbar SplitBtn and DropDownBtn with the updated Buttons PopupSettings:

interface PopupSettings {
    animate?: boolean;
    appendTo?: 'root' | 'component' | ViewContainerRef;
    popupClass?: string;
    anchorAlign?: Align;
    popupAlign?: Align;
    width?: number | string;
    height?: number | string;
}

Declined

Last Updated: 14 Sep 2026 11:24 by ADMIN

Add support for automatic horizontal Grid scroll when a grid column is dragged to the edge the visible area

Created by: Shai

Comments: 2

Category: Kendo UI for Angular

Type: Feature Request

Add support for automatic horizontal Grid scroll when a grid column is dragged to the edge the visible area

Hi,

This feature request considers the Kendo Angular UI Grid component.

We use the builtin drag & drop columns reordering functionallity. When we try to drag a column to the edge of the visible part of the grid with a horizontal scroll the scroll does not adjust automatically so we cann't drag to column to a place outside of the horizontal visible area.

It would be nice if you could enable automatic horizontal Grid scroll when a grid column is reordered and dragged to the edge the visible column area.

Thanks,

Shai

Declined

Last Updated: 14 Sep 2026 11:16 by ADMIN

[TileLayout] More flexible columns width configuration

Created by: Kendo UI

Comments: 1

Category: Kendo UI for Angular

Type: Feature Request

[TileLayout] More flexible columns width configuration

Currently the TileLayout allows having equal width for all columns, and has a columnWidth option (which is essentially max-width), applying the same value for all columns.

Providing the developers with the options to configure various widths for different columns, as well as min-width, based on the supported features of the CSS Grid Layout, will be a nice enhancement enabling richer customization opportunities.

Declined

Last Updated: 14 Sep 2026 11:13 by ADMIN

TimePicker blur event should contain data

Created by: Patrick

Comments: 4

Category: Kendo UI for Angular

Type: Feature Request

TimePicker blur event should contain data

The (blur)-Event of the TimePicker should be an object similar to the plain javascript (blur)-event object. Specificly, it should contain a relatedTarget property.

Declined