Progress® Kendo UI® for Angular Feedback Portal
Recently Updated
New Items
Most Popular
Status Info
Most Popular
Request a Feature Report a Bug
Unplanned
Last Updated: 24 Mar 2025 07:10 by ADMIN
Add showOn="focus" to Kendo Tooltips for Angular
Created by: Max
Comments: 1
Category: Kendo UI for Angular
Type: Feature Request
1
Add showOn="focus" to Kendo Tooltips for Angular
See here. This is already a feature with the tooltips in Kendo for jQuery, and it would be useful to have it in Angular as well. Currently the Angular tooltips do not naturally support keyboard focus.
Unplanned
Last Updated: 12 May 2025 11:50 by ADMIN
Conditional Column Spanning
Created by: Kendo UI
Comments: 0
Category: Kendo UI for Angular
Type: Feature Request
1
Conditional Column Spanning

The Grid provides column spanning by default, but the change is applied to all rows:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/spanned

A good addition to the Grid would be to provide conditional columns spanning where some rows are normal while others - have spanned columns such as:

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
0
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 paperSize="A4"> -->
<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="2" class="ion-text-left value">{{'createrfwi.description' | translate}}
</ion-col> -->
<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 *ngIf="checkLists[0] && checkLists[0][0] && checkLists[0][0].status[0]"> -->
<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 *ngIf="checkLists[0] && checkLists[0][0] && checkLists[0][0].status[0]"> -->
<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 *ngIf="checkLists[0] && checkLists[0][0] && checkLists[0][0].status[0]"> -->
<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 *ngIf="checkLists[0] && checkLists[0][0] && checkLists[0][0].status[0]"> -->
<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 *ngIf="checkLists[0] && checkLists[0][0] && checkLists[0][0].status[0]"> -->
<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 *ngIf="checkLists[0] && checkLists[0][0] && checkLists[0][0].status[0]"> -->
<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 *ngIf="checkLists[0] && checkLists[0][0] && checkLists[0][0].status[0]"> -->
<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: 30 Mar 2022 06:05 by ADMIN
[Editor] - Expose input to set NodeViews option
Created by: Eran Weiser
Comments: 1
Category: Kendo UI for Angular
Type: Feature Request
0
[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

Unplanned
Last Updated: 10 Aug 2022 20:52 by Milan
Configure Filter component by using FilterExpression with predefined list of values for value dropdown list.
Created by: Milan
Comments: 4
Category: Kendo UI for Angular
Type: Feature Request
0
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.

Unplanned
Last Updated: 19 Sep 2022 08:34 by ADMIN
Popup horizontal flip does not flip when off screen
Created by: Mauro
Comments: 1
Category: Kendo UI for Angular
Type: Bug Report
0
Popup horizontal flip does not flip when off screen

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

If the popup is off-screen, it is simply cut off, unlike vertical which flips it to the other side.

Unplanned
Last Updated: 01 Feb 2023 08:55 by ADMIN
Scheduler displaying the wrong date v11
Created by: Sean
Comments: 3
Category: Kendo UI for Angular
Type: Bug Report
0
Scheduler displaying the wrong date v11

I upgraded today from 4.3.7 to v11 and the dates are 1 day off in the scheduler month view, meaning the date variable from let-date (I think).  

 

<kendo-scheduler
    <ng-template kendoSchedulerMonthDaySlotTemplate let-date="date">
                ...  
               <div>{{ date | kendoDate : 'dd' }}</div>

<kendo-scheduler

    <ng-template kendoSchedulerMonthDaySlotTemplate let-date="date">

                ...  <div>{{ date | kendoDate : 'dd' }}</div> 

 

The date is just flat out wrong. What's weird is the mouseover shows the correct date.

Again, if I use the old version everything works as expected but the v11 update I'm off by one.

Unplanned
Last Updated: 14 Feb 2023 11:52 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: 1
Category: Kendo UI for Angular
Type: Feature Request
0
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

 

Unplanned
Last Updated: 24 Feb 2023 12:43 by ADMIN
TimePicker blur event should contain data
Created by: Patrick
Comments: 3
Category: Kendo UI for Angular
Type: Feature Request
0
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.
Unplanned
Last Updated: 11 May 2023 10:00 by ADMIN
TagBox component or similar options for the MultiSelect component
Created by: Jörg
Comments: 2
Category: Kendo UI for Angular
Type: Feature Request
0
TagBox component or similar options for the MultiSelect component

Hi,

I am looking to have a MultiSelect which not allows do add Tags by Typing and still allows the tags to be removed. 

  • The Searchbar should not appear.
  • Typing should not be possible
  • If the delete Button of a Tag is clicked it should be removed

So flagging MultiSelect as disabled or readonly is not an option as removing the tags is not possible anymore. 

My i think legimate scenario is:

  • I don't want to be the users able to assign their own tags.
  • I want the user to be able to remove assigned tags
  • The UI to select a new tag is to complex to have it directly in the searchbar - also if i wanted to integrate it the template options are not suficient so i do it in an extra pop up controlling the selected tags by typescript

https://www.telerik.com/forums/remove-typing-box-from-multiselect-component

An extra option or config scenario to achieve this would be appreciated.

If you look at your competition, there it's possible to do that:

https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxTagBox/

Thanks and Regards

 

 

 

 

 

 

 

Unplanned
Last Updated: 11 Apr 2024 13:39 by ADMIN
[Scheduler] Concerned resource in RemoveEvent when event shared with many resources
Created by: Anthony
Comments: 0
Category: Kendo UI for Angular
Type: Feature Request
0
[Scheduler] Concerned resource in RemoveEvent when event shared with many resources

Hi Team,

I am looking for the ability to know from which resource (row) the [RemoveEvent](https://www.telerik.com/kendo-angular-ui/components/scheduler/api/RemoveEvent) is originated when a single event is shared by many resources.

Thanks

Alrick

Unplanned
Last Updated: 03 Jul 2023 07:54 by ADMIN
Distinguish which user action closed the dialog for kendo scheduler delete dialog
Created by: Varun
Comments: 1
Category: Kendo UI for Angular
Type: Feature Request
0
Distinguish which user action closed the dialog for kendo scheduler delete dialog

Hello Kendo Team, 

It would be great if we could have some differentiation when the user closes the delete dialog for kendo scheduler, that way we could take actions accordingly.

 

Scenarios
1. By clicking on close icon on top right corner.

2. By clicking on clicking on cancel button.

3. By clicking on backdrop.

 

Unplanned
Last Updated: 03 Aug 2023 09:10 by Roberta
Filter Menu feature for "Date" doesn't allow the user to select a date on tablet portrait mode. The filter closes up and the user is not able to select any date
Created by: Roberta
Comments: 2
Category: Kendo UI for Angular
Type: Bug Report
0
Filter Menu feature for "Date" doesn't allow the user to select a date on tablet portrait mode. The filter closes up and the user is not able to select any date
We found a bug in our application on tablet portrait mode when we want to select a date from the filter menu inbuilt feature of Kendo grid. 
When the user wants to select a date, the filter closes up and the user is not able to select any date from the calendar.

The issue is happening on tablet device in portrait mode and we found out that it's happening on your documentation too. To reproduce the issue, please go to the "Angular Grid Filter Menu" in your documentation:
https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-menu/

Please open the dev tools and set the browser on any tablet portrait size or use Galaxy Tab S4.
In your first example (Angular Grid Filter Menu), please click on the "Date" filter in the grid. When the popup opens up, please click on the calendar icon 
of the date input field. 
When the calendar shows up, try to select any date. You'll see that the filter closes up and the user is not able to select any date. Demo video attached for reference.
Please fix this bug as we support Samsung Galaxy tablet devices and we're using this feature in our project.  
Unplanned
Last Updated: 01 Sep 2023 06:31 by ADMIN
Excel export of treelist is very slow for large lists
Created by: Jaroslav
Comments: 3
Category: Kendo UI for Angular
Type: Bug Report
0
Excel export of treelist is very slow for large lists

We are exporting an Excel from a treelist -> there are merged cells, and the table has lots of rows (~20k).

It's taking forever (it's unusable) and the reason is that there is an O(N^2) bug in the toXML function: each row adds a merged cell range, and the mergedCells array is scanned linearly for every new row.

I was able to fix this by adding a mergedCells hash (I would be happy to create a pull request).

Also, as a related issue, it would be nice to be able to change the compression level on the generated zip file, because the default again takes forever for large enough files.

Unplanned
Last Updated: 17 Oct 2023 08:47 by ADMIN
Hi Team, kendo grid header double click action on grid line, expected to be expend grid column but when double click on grid line, scroll move to first column. how do I stable grid scroll.
Created by: Zaw
Comments: 1
Category: Kendo UI for Angular
Type: Bug Report
0
Hi Team, kendo grid header double click action on grid line, expected to be expend grid column but when double click on grid line, scroll move to first column. how do I stable grid scroll.

first double click on this column line . 
scroll move to first column 
Could you please help to solve this?
Unplanned
Last Updated: 18 Oct 2023 12:48 by ADMIN
toDataSourceRequest() needs an option to preserve UTC offset
Created by: Hui Chuan
Comments: 2
Category: Kendo UI for Angular
Type: Feature Request
0
toDataSourceRequest() needs an option to preserve UTC offset

Current behavior

Currently when calling toDataSourceRequest with a date filter, the following is observed:

  1. Set a filter with the Date object of Wed Sep 19 2018 00:00:00 GMT+0530 (India Standard Time)
  2. Call toDataSourceRequest or toDataSourceRequestString with the grid state
  3. The resulting query string contains datetime'2018-09-19T00-00-00'
  4. On the backend, MVC can bind the DataSourceRequest with DateTime of {2018/9/19 00:00:00} and an offset of ???

As you can see, the browser's UTC offset is discarded when constructing the query. This presents an issue when the backend server is running in a time zone that is different than the browser or is invariant. Internally toDataSourceRequest calls formatDateValue which calls toUTC. I propose adding an optional argument that allows us to skip this operation so that the offset can be kept as is, the reason being so that it can later be normalized to UTC without losing the information.

Expected behavior

Calling toDataSourceRequest with the option should produce the following:

  1. Set a filter with the Date object of Wed Sep 19 2018 00:00:00 GMT+0530 (India Standard Time)
  2. The resulting query string contains datetime'2018-09-18T18-30-00' (append Z if possible)
  3. On the backend, MVC can bind the DataSourceRequest with DateTime of {2018/9/18 18:30:00} and an offset of 0
Unplanned
Last Updated: 27 Nov 2023 16:18 by ADMIN
Spreadsheet Status Bar
Created by: Kendo UI
Comments: 0
Category: Kendo UI for Angular
Type: Feature Request
0
Spreadsheet Status Bar

The status bar is used to represent a summary of the aggregated values of the selected cell.


 

Unplanned
Last Updated: 15 Feb 2024 07:27 by ADMIN
Extend events with preparation and follow-up time
Created by: Daniel Mettler
Comments: 1
Category: Kendo UI for Angular
Type: Feature Request
0
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:

Unplanned
Last Updated: 08 May 2025 12:37 by ADMIN
Create a clock - like design for the time picker component
Created by: Florian
Comments: 0
Category: Kendo UI for Angular
Type: Feature Request
0
Create a clock - like design for the time picker component
I find the user handling of the time picker control quite complicated. Therefore, I would very much prefer an Angular Material like component with a clock to set the hours and minutes (see attached image).
Unplanned
Last Updated: 10 Apr 2025 06:37 by ADMIN
Dateinput/datepicker prevents full year typing with format d/M/y and allowCaretMode enabled
Created by: Paul
Comments: 3
Category: Kendo UI for Angular
Type: Bug Report
0
Dateinput/datepicker prevents full year typing with format d/M/y and allowCaretMode enabled

When dateinput format is "d/M/y" and "allowCaretMode" is enabled, users are unable to enter valid dates. Tested with dateinput and datepicker components.

Steps to reproduce

  1. Setup a kendo-dateinput component with "allowCaretMode" set to "true" and the "format" set to "d/M/y" (see stackblitz below).
  2. Enter a valid single-digit day and valid single-digit month into the input
  3. Try typing a year
  4. Observe that only one character of the year can be entered and the input locks up, preventing the user from completing a valid date.

Stackblitz example

https://angular-x4rvxqyp-qfq5b7mj.stackblitz.io

Expected Behaviour:

The user should be able to enter a full year after typing a valid single-digit day and month.

Observed Behaviour:

After entering a single-digit day and month, the input locks up, preventing the user from typing more than one character for the year. This prevents users from entering valid dates, making the input unusable in this scenario.

I couldn’t find an existing bug report related to this issue. Could you confirm whether this has already been reported or provide guidance on a potential fix or workaround?

Thanks

 

 

 

1 2 3 4 5 6
Create an account Log In
View
Type
Status
Category