or
0 answers
413 views
I am using DialogService in my project and add below line in root file of the application so other component don't need to add.
Now the problem is, if i opened the dialog from specific component then If I go back to previous screen then Dialog remain open.
What I found is, basically I put the div is in root file so the dialog will always reside it at root level.
right now I have a one solution is to remove that div from root file and keep it in all component file, where it is used.
If you have another solution then let me know because I don't want to put that div in all angular component.
1 answer
171 views
<section style="margin-top: 1rem;">
<div class="container h-100" style="width: 100vw;">
<div id="contentToConvet" class="row d-flex h-100">
<div class="col">
<div class="row">
<div class="col-1">
<img [src]="imageUrl" alt="Image Description">
</div>
<div class="col-11">
<h3 class="text-black mb-2" style="text-align: center;">CRIME SITREP For SUPERINTENDENT OF
POLICE,KARNAL
</h3>
<h5 style="text-align: center; font-weight: bolder;">{{getCurrentDate()}}</h5>
<h5 style="text-align: center;">Up to Midnight of {{getPreviousDate()}}</h5>
<h2 style="text-align: center;">Section I: Registration of FIR on {{getPreviousDate()}}
</h2>
</div>
</div>
<div>
<head>
<title>Incident Report Form</title>
</head>
<app-section1-registration-of-fir></app-section1-registration-of-fir>
<hr>
<app-section2-accused-arrested></app-section2-accused-arrested>
<app-section3-case-property></app-section3-case-property>
<app-section4-modification-of-sections></app-section4-modification-of-sections>
<app-section5-disposal-of-cases></app-section5-disposal-of-cases>
<app-section6-case-reopened></app-section6-case-reopened>
<app-section7-submission-of-final-reports></app-section7-submission-of-final-reports>
<app-section8-preventive-action></app-section8-preventive-action>
<app-section9-unnatural-deaths></app-section9-unnatural-deaths>
<app-section11-fir-upload></app-section11-fir-upload>
</div>
<!-- <button class="btn btn-primary" type="button" printSectionId="section" ngxPrint>Generate
Report</button> -->
</div>
</div>
<button (click)="exportToPDF()">Export to PDF</button>
</div>
</section>
Tsvetelina
Telerik team
answered
on
01 Dec 2023
2 answers
175 views
Hey everyone,
Hope this message finds you well.
I'm creating a grid table with Add/Edit/Delete features. Currently running into a blocker when clicking on a checkbox during an Add procedure. This action completely resets the values from the dropdown menus I've previously selected from. Any ideas as to why this behavior might be occurring? Thanks!
TS:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/other_api/DataService';
import { ErrorHandlerService } from '../../services/error-handler.service';
import { Item } from '../../models/other_api/Item';
import { FormBuilder, FormGroup } from '@angular/forms';
import { SortDescriptor } from "@progress/kendo-data-query";
import { RemoveEvent, SaveEvent } from '@progress/kendo-angular-grid';
import { AnotherService } from '../../services/other_api/AnotherService';
import { DifferentService } from '../../services/other_api/DifferentService';
import { SomeService } from '../../services/other_api/SomeService';
@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.scss'],
})
export class ClientComponent implements OnInit {
clients: Item[] = [];
anotherItems: string[] = [];
differentItems: string[] = [];
someItems: string[] = [];
moreItems: string[] = [];
parentItems: string[] = [];
constructor(
private errorHandlerService: ErrorHandlerService,
private dataService: DataService,
private anotherService: AnotherService,
private differentService: DifferentService,
private someService: SomeService,
private formBuilder: FormBuilder,
) {
this.createFormGroup = this.createFormGroup.bind(this);
}
public formGroup: FormGroup = this.formBuilder.group({
Id: 0,
ClientName: '',
ClientKey: '',
ParentClientName: '',
IsParent: false,
MarketVertical: '',
Region: '',
Inactive: false,
Locale: ''
});
public createFormGroup = (args: any): FormGroup => {
const item = args.isNew ? new Item(0, '', '', '', '', '', false, false, '') : args.dataItem;
return this.formBuilder.group({
Id: item.Id,
ClientName: item.ClientName,
ClientKey: item.ClientKey,
ParentClientName: item.ParentClientName,
IsParent: item.IsParent || false,
MarketVertical: item.MarketVertical,
Region: item.Region,
Inactive: item.Inactive || false,
Locale: item.Locale
});
};
public sort: SortDescriptor[] = [
{
field: "Name",
dir: "asc",
},
];
public sortChange(sort: SortDescriptor[]): void {
this.sort = sort;
this.getAllClients();
this.getAnotherItems();
this.getDifferentItems();
this.getSomeItems();
this.getMoreItems();
this.getParentItems();
}
ngOnInit(): void {
this.getAllClients();
this.getAnotherItems();
this.getDifferentItems();
this.getSomeItems();
this.getMoreItems();
this.getParentItems();
};
login() {
//Implementation for login
};
showError() {
this.errorHandlerService.handleError("This is a test error. Stuff is super wrong.");
}
getClient(): void {
this.dataService.get(1).subscribe();
}
getAllClients(): void {
this.dataService.getAll().subscribe((data) => {
this.clients = data;
});
}
getAnotherItems(): void {
this.anotherService.getAll().subscribe((data) => {
this.anotherItems = data.map((anotherItem) => anotherItem.Name);
});
}
getDifferentItems(): void {
this.differentService.getAll().subscribe((data) => {
this.differentItems = data.map((differentItem) => differentItem.Description);
});
}
// Similar functions for other services
saveHandler(args: SaveEvent): void {
if (args.isNew) {
this.dataService.create(args.dataItem).subscribe((createdData) => {
const updateItem = this.clients.filter(element => element.ClientName === createdData.ClientName)[0];
updateItem.Id = createdData.Id;
});
}
else {
this.dataService.update(args.formGroup.value).subscribe((updatedData) => {
const updateItem = this.clients.filter(element => element.Id === updatedData.Id)[0];
updateItem.ClientName = updatedData.ClientName;
updateItem.ClientKey = updatedData.ClientKey;
// Similar updates for other properties
});
}
args.sender.closeRow(args.rowIndex);
}
removeHandler(args: RemoveEvent): void {
this.dataService.delete(args.dataItem).subscribe();
}
}
import { DataService } from '../../services/other_api/DataService';
import { ErrorHandlerService } from '../../services/error-handler.service';
import { Item } from '../../models/other_api/Item';
import { FormBuilder, FormGroup } from '@angular/forms';
import { SortDescriptor } from "@progress/kendo-data-query";
import { RemoveEvent, SaveEvent } from '@progress/kendo-angular-grid';
import { AnotherService } from '../../services/other_api/AnotherService';
import { DifferentService } from '../../services/other_api/DifferentService';
import { SomeService } from '../../services/other_api/SomeService';
@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.scss'],
})
export class ClientComponent implements OnInit {
clients: Item[] = [];
anotherItems: string[] = [];
differentItems: string[] = [];
someItems: string[] = [];
moreItems: string[] = [];
parentItems: string[] = [];
constructor(
private errorHandlerService: ErrorHandlerService,
private dataService: DataService,
private anotherService: AnotherService,
private differentService: DifferentService,
private someService: SomeService,
private formBuilder: FormBuilder,
) {
this.createFormGroup = this.createFormGroup.bind(this);
}
public formGroup: FormGroup = this.formBuilder.group({
Id: 0,
ClientName: '',
ClientKey: '',
ParentClientName: '',
IsParent: false,
MarketVertical: '',
Region: '',
Inactive: false,
Locale: ''
});
public createFormGroup = (args: any): FormGroup => {
const item = args.isNew ? new Item(0, '', '', '', '', '', false, false, '') : args.dataItem;
return this.formBuilder.group({
Id: item.Id,
ClientName: item.ClientName,
ClientKey: item.ClientKey,
ParentClientName: item.ParentClientName,
IsParent: item.IsParent || false,
MarketVertical: item.MarketVertical,
Region: item.Region,
Inactive: item.Inactive || false,
Locale: item.Locale
});
};
public sort: SortDescriptor[] = [
{
field: "Name",
dir: "asc",
},
];
public sortChange(sort: SortDescriptor[]): void {
this.sort = sort;
this.getAllClients();
this.getAnotherItems();
this.getDifferentItems();
this.getSomeItems();
this.getMoreItems();
this.getParentItems();
}
ngOnInit(): void {
this.getAllClients();
this.getAnotherItems();
this.getDifferentItems();
this.getSomeItems();
this.getMoreItems();
this.getParentItems();
};
login() {
//Implementation for login
};
showError() {
this.errorHandlerService.handleError("This is a test error. Stuff is super wrong.");
}
getClient(): void {
this.dataService.get(1).subscribe();
}
getAllClients(): void {
this.dataService.getAll().subscribe((data) => {
this.clients = data;
});
}
getAnotherItems(): void {
this.anotherService.getAll().subscribe((data) => {
this.anotherItems = data.map((anotherItem) => anotherItem.Name);
});
}
getDifferentItems(): void {
this.differentService.getAll().subscribe((data) => {
this.differentItems = data.map((differentItem) => differentItem.Description);
});
}
// Similar functions for other services
saveHandler(args: SaveEvent): void {
if (args.isNew) {
this.dataService.create(args.dataItem).subscribe((createdData) => {
const updateItem = this.clients.filter(element => element.ClientName === createdData.ClientName)[0];
updateItem.Id = createdData.Id;
});
}
else {
this.dataService.update(args.formGroup.value).subscribe((updatedData) => {
const updateItem = this.clients.filter(element => element.Id === updatedData.Id)[0];
updateItem.ClientName = updatedData.ClientName;
updateItem.ClientKey = updatedData.ClientKey;
// Similar updates for other properties
});
}
args.sender.closeRow(args.rowIndex);
}
removeHandler(args: RemoveEvent): void {
this.dataService.delete(args.dataItem).subscribe();
}
}
------------------------------
HTML:
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default/dist/all.css" />
<app-page-layout [workingArea]="body" [footer]="footer">
<ng-template #body>
<h1>Clients</h1>
<kendo-grid [kendoGridReactiveEditing]="createFormGroup"
[kendoGridBinding]="clients"
[pageable]="true"
[sortable]="true"
[navigable]="true"
[filterable]="true"
[sort]="sort"
(sortChange)="sortChange($event)"
[pageSize]="10"
(save)="saveHandler($event)"
(remove)="removeHandler($event)">
<ng-template kendoGridToolbarTemplate>
<button kendoGridAddCommand themeColor="success">Add</button>
</ng-template>
<kendo-grid-column field="ClientName" title="Client Name"> </kendo-grid-column>
<kendo-grid-column [filterable]="false" field="ClientKey" title="Client Key">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-dropdownlist [data]="clientKeys" [(ngModel)]="dataItem.ClientKey" name="ClientKey"></kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<!-- Other columns-->
<kendo-grid-column [filterable]="true" filter="boolean" field="IsParent" title="Is Parent" editor="boolean">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<input kendoCheckBox id="isParentCheckbox" type="checkbox" [checked]="dataItem.IsParent" disabled /><app-page-layout [workingArea]="body" [footer]="footer">
<ng-template #body>
<h1>Clients</h1>
<kendo-grid [kendoGridReactiveEditing]="createFormGroup"
[kendoGridBinding]="clients"
[pageable]="true"
[sortable]="true"
[navigable]="true"
[filterable]="true"
[sort]="sort"
(sortChange)="sortChange($event)"
[pageSize]="10"
(save)="saveHandler($event)"
(remove)="removeHandler($event)">
<ng-template kendoGridToolbarTemplate>
<button kendoGridAddCommand themeColor="success">Add</button>
</ng-template>
<kendo-grid-column field="ClientName" title="Client Name"> </kendo-grid-column>
<kendo-grid-column [filterable]="false" field="ClientKey" title="Client Key">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-dropdownlist [data]="clientKeys" [(ngModel)]="dataItem.ClientKey" name="ClientKey"></kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<!-- Other columns-->
<kendo-grid-column [filterable]="true" filter="boolean" field="IsParent" title="Is Parent" editor="boolean">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
</ng-template>
</kendo-grid-column>
<kendo-grid-column [filterable]="true" filter="boolean" field="Inactive" title="Inactive" editor="boolean">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<input kendoCheckBox id="InactiveCheckbox" type="checkbox" [checked]="dataItem.Inactive" disabled />
</ng-template>
</kendo-grid-column>
<kendo-grid-command-column title="Actions" [width]="220">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridEditCommand themeColor="info">
Edit
</button>
<button kendoGridRemoveCommand themeColor="error">Remove</button>
<button kendoGridSaveCommand themeColor="success">
{{ isNew ? "Add" : "Update" }}
</button>
<button kendoGridCancelCommand themeColor="warning">
{{ isNew ? "Discard changes" : "Cancel" }}
</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</ng-template>
<ng-template #footer>
<app-custom-button [buttonText]="'Login'" aria-label="Login" (onClick)="login()"></app-custom-button>
<app-custom-button [buttonText]="'Show Error'" aria-label="Show Error" (onClick)="showError()"></app-custom-button>
</ng-template>
</app-page-layout>
</kendo-grid-column>
<kendo-grid-column [filterable]="true" filter="boolean" field="Inactive" title="Inactive" editor="boolean">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<input kendoCheckBox id="InactiveCheckbox" type="checkbox" [checked]="dataItem.Inactive" disabled />
</ng-template>
</kendo-grid-column>
<kendo-grid-command-column title="Actions" [width]="220">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridEditCommand themeColor="info">
Edit
</button>
<button kendoGridRemoveCommand themeColor="error">Remove</button>
<button kendoGridSaveCommand themeColor="success">
{{ isNew ? "Add" : "Update" }}
</button>
<button kendoGridCancelCommand themeColor="warning">
{{ isNew ? "Discard changes" : "Cancel" }}
</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</ng-template>
<ng-template #footer>
<app-custom-button [buttonText]="'Login'" aria-label="Login" (onClick)="login()"></app-custom-button>
<app-custom-button [buttonText]="'Show Error'" aria-label="Show Error" (onClick)="showError()"></app-custom-button>
</ng-template>
</app-page-layout>
Slavena
Telerik team
answered
on
30 Nov 2023
1 answer
273 views
Hello!
Our customer complained that when trying to enter a decimal point in the numeric filter of the grid, it appears and then immediately disappears. This effect appeared after upgrading the kendo-angular-grid package from version 4.7.0 to version 11.2.0 (we also upgraded the Angular version from version 10 to 15). I noticed that the same effect is present on your site
https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-menu/
Notice the Order column in the 1st example there. Please open a filter for it and try to quickly (as fast as possible) enter a number and then a dot in the top input of the filter.
The same thing happens in the other examples on this page that have a numeric filter. Interestingly, there is no such effect in the lower inputs.
So my questions are:
1. is this a defect?
2. is it possible to fix this behaviour without changing the version of the kendo-angular-grid package? I mean, maybe there is a possibility to intercept an input event in the filter input in an Angular component code.
0 answers
97 views
Hello, there is a conflict happen when I use seriesdefault to custom the colors of bars, the trendline dissapear, it exists but never show
0 answers
165 views
hi,
how to use drag and drop with keyboard? i can focus the dragable item with the tab-key - and then?
is it possible anyway?
how to use drag and drop with keyboard? i can focus the dragable item with the tab-key - and then?
is it possible anyway?
eugene
Top achievements
Rank 1
Rank 1
asked
on
28 Nov 2023
0 answers
133 views
I have master detail grid and when I filter its filtering only master grid but not detail. How I can acheive?
If I filter on displaySystemName I want to filter by schoolname which is in childContracts array
<kendo-grid [data]="gridData|| []" [filterable]="false" [resizable]="true" [pageSize]="state.take"
[sort]="state.sort" [sortable]="true" [skip]="state.skip" [filter]="state.filter" [pageable]="{
buttonCount: gridPagination.buttonCount,
info: gridPagination.info,
type: gridPagination.type,
pageSizes: gridPagination.pageSizes,
previousNext: gridPagination.previousNext
}" (filterChange)="filterChange($event)" (dataStateChange)="dataStateChange($event)" [loading]="loading" #gridContract style="width:100%">
<kendo-grid-column field="displaySystemName" title="System/School"></kendo-grid-column>
<kendo-grid-column field="programParticipation" title="Program"></kendo-grid-column>
<kendo-grid-column field="systemWFStatus" title="Status"></kendo-grid-column>
<ng-template kendoGridDetailTemplate let-dataItem [kendoGridDetailTemplateShowIf]="showOnlyChildContracts">
<kendo-grid [data]="dataItem.childContracts" id="grid-child" [hideHeader]="true">
<kendo-grid-column field="schoolName" title="School"> </kendo-grid-column>
<kendo-grid-column field="programParticipation" title="Program"> </kendo-grid-column>
<kendo-grid-column field="schoolWFStatus" title="Status"> </kendo-grid-column>
</kendo-grid>
</ng-template>
</kendo-grid>
1 answer
168 views
Hi! We added a Scheduler in our project but it seems the calendar parts are not localizing
We already set localId to the proper culture/language code
(this.intlService as CldrIntlService).localeId = this.localeConfig.settings.locale;
Other kendo components are working fine like the datepicker
Martin Bechev
Telerik team
answered
on
27 Nov 2023
1 answer
290 views
Hello,
I have a kendo UI Scheduler which is used to load events.
I have an issue that when I close an item and it reloads the data, the calendar scrolls up to the top, losing the focus.
Here's a snippet of code:
doubleClickInSingleClick(event: any, popupInstance: any) {
if (this.eventClickTime == 0) {
// set first click
this.eventClickTime = new Date().getTime();
} else {
// compare first click to this click and see if they occurred within double click threshold
if (new Date().getTime() - this.eventClickTime < 250) {
// double click occurred
this.productInstanceId = event.id;
this.popupInstanceRef = this.modalService.open(popupInstance, {
size: "xl",
});
this.popupInstanceRef.result.then(noop, () => {
this.calendarBehavior.loadCalendarData();
});
this.eventClickTime = 0;
} else {
// not a double click so set as a new first click
this.eventClickTime = new Date().getTime();
}
}
}
And here's the HTML
<div id="scheduler" style="overflow-x: auto; white-space: nowrap">
<kendo-scheduler
#schedulerComponent
[kendoSchedulerBinding]="(this.calendarBehavior.events | async)!"
style="overflow: none; min-width: 750px"
[loading]="(this.calendarBehavior.loading| async)!"
[selectedDate]="this.calendarBehavior.selectedDate"
[selectedViewIndex]="3"
(dateChange)="this.calendarBehavior.onDateChange($event)"
>
<kendo-scheduler-day-view>
<ng-template kendoSchedulerEventTemplate let-event="event">
<div (click)="doubleClickInSingleClick(event, instanceModal)">
<!-- Added this hidden label as calendar sorting bu the text inside the event, where can sort by alerts and can have un expected sortion -->
<label style="width: 1px; height: 1px; color: transparent"
>{{ event.dataItem.dataItem.instance.productSku }}
{{ event.dataItem.dataItem.instance.groupNumber }}
</label>
<span
*ngIf="
event.dataItem.instance.ticketCount <
event.dataItem.instance.bookedCount
"
class="ticket-alert-icon"
style="font-size: 10px"
>
<i class="fas fa-ticket-alt"></i>
<i class="fas fa-exclamation-circle text-warning bg-light"></i>
</span>
<span
*ngIf="event.dataItem.instance.tourOperatedByPartner"
class="partner-icon"
>
<i class="fas fa-handshake"></i>
</span>
<span *ngFor="let iconPath of event.description.split(';')"
><img
*ngIf="event.description.length > 0"
class="alert-icon"
src="{{ this.calendarBehavior.getImageUrl(iconPath) }}"
width="10"
/> </span
>
<span
[style.color]="event.dataItem.dataItem.titleColor"
[style.font-size.px]="'10'"
>
{{ event.title }} </span
>
</div>
</ng-template>
</kendo-scheduler-day-view>
<kendo-scheduler-week-view> </kendo-scheduler-week-view>
<kendo-scheduler-month-view>
<ng-template kendoSchedulerEventTemplate let-event="event">
<div (click)="doubleClickInSingleClick(event, instanceModal)">
<span
[style.color]="event.dataItem.dataItem.titleColor"
[style.font-size.px]="'10'"
>
{{ event.title }}</span
>
</div>
</ng-template>
</kendo-scheduler-month-view>
<kendo-scheduler-agenda-view>
<ng-template kendoSchedulerEventTemplate let-event="event">
<div (click)="doubleClickInSingleClick(event, instanceModal)">
<!-- Added this hidden label as calendar sorting bu the text inside the event, where can sort by alerts and can have un expected sortion -->
<label style="width: 1px; height: 1px; color: transparent"
>{{ event.dataItem.dataItem.instance.productSku }}
{{ event.dataItem.dataItem.instance.groupNumber }}</label
>
<span
*ngIf="
event.dataItem.instance.ticketsRequired &&
event.dataItem.instance.ticketCount <
event.dataItem.instance.bookedCount
"
class="ticket-alert-icon"
>
<i class="fas fa-ticket-alt"></i>
<i class="fas fa-exclamation-circle text-warning bg-light"></i>
</span>
<span *ngIf="event.dataItem.instance.tourOperatedByPartner" class="partner-icon">
<i class="fas fa-handshake"></i>
</span>
<span *ngFor="let iconPath of event.description.split(';')"
><img
*ngIf="event.description.length > 0"
class="alert-icon"
src="{{ this.calendarBehavior.getImageUrl(iconPath) }}"
width="24"
/> </span
>
<span [style.color]="event.dataItem.dataItem.titleColor">
{{event.dataItem.instance.tourOperatedByPartner ? event.dataItem.instance.companyName + " - " : ""}}{{ event.title }} </span
>
</div>
</ng-template>
</kendo-scheduler-agenda-view>
</kendo-scheduler>If I comment the this. calendar behavior.loadCalendarData(); the scroll position is maintained. is there a simple way I can tell the Scheduler to maintain the position?
On a really old version of Kendo UI components, it was not pushing to the top.
Any suggestion?
Thanks
Georgi
Telerik team
answered
on
24 Nov 2023
1 answer
337 views
I'm using the Kendo Angular editor in my application and am wondering if there is a way to customize the Insert Link directive that is used by default? The dialog is working fine but I need to enforce that users prefix the URL with (http:// or https://).
I have looked through all the documentation I can find and am unable to find a way to alter it for Angular.
Alternatively is there an event that can be hooked into once the dialog is closed to do the validation there?
Thanks in advance.
