or
1 answer
93 views
Is there a built-in Kendo form class for a grid-type layout? I know that the GridLayout component is available, was hoping that there was something built-in already that would be more straightforward to implement.
Thanks
Martin Bechev
Telerik team
answered
on
01 Nov 2024
0 answers
71 views
Hello,
I'm working on a project where we have about 100 columns and rows can exceed 1000 rows.
The users want to enable CTL and shift selection but it doesn't work and I have 2 behaviors:
1- If I click quickly and simultaneously CTL and Select row it's works.
2 - If I start holding the CTL button and try to select row nothing happen and it takes long time to be selected.
can you tell me what the problem is exactly and if there is a bypass for it
Best regards
aziz
Top achievements
Rank 1
Iron
Rank 1
Iron
asked
on
01 Nov 2024
1 answer
101 views
How can I display the timeline component in reverse order? I can't find any parameter from the guide that could reverse it. https://www.telerik.com/kendo-angular-ui/components/layout/api/timelinecomponent#selector
1 answer
72 views
Does the kendoDragHandle have to be a direct child of the kendoDragTarget or can it be a grandchild, grand-grandchild, ect. of the kendoDragTarget?
Martin Bechev
Telerik team
answered
on
29 Oct 2024
0 answers
74 views
This login Page code , once the kendo loader is shown and hidden it resets the password textbox type to text.
Can i get a solution to it.
As i need the kendoTextBoxPrefixTemplate and cant use the kendoTextBox API inside <input/> to use a [type] variable and
control the textBox type
Can i get a solution to it.
As i need the kendoTextBoxPrefixTemplate and cant use the kendoTextBox API inside <input/> to use a [type] variable and
control the textBox type
import { Component, AfterViewInit, OnInit, ViewChild } from'@angular/core';
import {
LoaderType,
LoaderThemeColor,
LoaderSize,
} from '@progress/kendo-angular-indicators';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { TextBoxComponent } from '@progress/kendo-angular-inputs';
@Component({
selector: 'my-app',
template: `
<div class="login-page--main-container">
<kendo-card class="login-page--kendo-card" *ngIf="!showLoader">
<div class="login-page--form-container">
<form [formGroup]="loginForm" class="login-page--login-form" (ngSubmit)="onSubmit()">
<div class="login-page--formfield">
<div class="login-page--formfield-user">
<kendo-formfield>
<kendo-textbox
class="login-page--textbox"
formControlName="username"
#username
required
placeholder="Username">
<ng-template kendoTextBoxPrefixTemplate>
<img src="assets/content/images/login-images/profile.svg" alt="new" class="login-page--user-img" />
</ng-template>
</kendo-textbox>
<kendo-formerror class="login-page-kendo-form-error">
Username is required
</kendo-formerror>
</kendo-formfield>
</div>
<kendo-formfield>
<kendo-textbox
#textbox
placeholder="Password"
[clearButton]="true"
class="login-page--textbox"
formControlName="password">
<ng-template kendoTextBoxSuffixTemplate>
<button kendoButton look="clear" (click)="togglePasswordVisibility()"> Eye </button>
</ng-template>
<ng-template kendoTextBoxPrefixTemplate>
<img src="assets/content/images/login-images/password.svg" alt="new" class="login-page--profile-img" />
</ng-template>
</kendo-textbox>
<kendo-formerror class="login-page-kendo-form-error">
Password is required
</kendo-formerror>
</kendo-formfield>
<div class="login-page--forgot-div">
<!-- Optional forgot password link -->
</div>
</div>
<div>
<button kendoButton class="login-page--signin-button" [disabled]="loginForm.invalid">
Sign In
</button>
</div>
</form>
</div>
</kendo-card>
<div class="app-screen--loader" *ngIf="showLoader">
<div class="example-item" *ngFor="let loader of loaders">
<div class="example-item-title">{{ loader.type | titlecase }}</div>
<div class="k-block">
<kendo-loader
[type]="loader.type"
[themeColor]="loader.themeColor"
[size]="loader.size"
>
</kendo-loader>
</div>
</div>
<div>Signing in....</div>
</div>
</div>
`,
})
export class AppComponent implements AfterViewInit {
public loginForm: FormGroup;
public showLoader = false;
public loaders = [
{
type: <LoaderType>'pulsing',
themeColor: <LoaderThemeColor>'primary',
size: <LoaderSize>'medium',
},
{
type: <LoaderType>'infinite-spinner',
themeColor: <LoaderThemeColor>'secondary',
size: <LoaderSize>'medium',
},
{
type: <LoaderType>'converging-spinner',
themeColor: <LoaderThemeColor>'info',
size: <LoaderSize>'medium',
},
];
@ViewChild('textbox') public textbox!: TextBoxComponent;
constructor() {
this.loginForm = new FormGroup({
username: new FormControl('', Validators.required),
password: new FormControl('', Validators.required),
});
}
public ngAfterViewInit(): void {
this.textbox.input.nativeElement.type = 'password';
}
public togglePasswordVisibility(): void {
const inputEl = this.textbox.input.nativeElement;
inputEl.type = inputEl.type === 'password' ? 'text' : 'password';
}
public async onSubmit() {
if (this.loginForm.valid) {
this.showLoader = true;
await new Promise((resolve) => setTimeout(resolve, 1000));
this.showLoader = false;
}
}
}
1 answer
62 views
Tried to use format property of labels but there can't customize it Also tried using visual but it gives error with kendo drawing library
So I want simple way to format 1000 to 1K etc example of formatter for kendo-chart-value-axis-item using kendo UI angular without kendo drawing visual property
So I want simple way to format 1000 to 1K etc example of formatter for kendo-chart-value-axis-item using kendo UI angular without kendo drawing visual property
Zornitsa
Telerik team
answered
on
28 Oct 2024
1 answer
83 views
Is it possible to bind the kendo angular date controls directly against a luxon date object?
I tried the following:
A direct binding results in a compile error:
<kendo-label text="Luxon Date">
<kendo-datepicker [value]="luxonDate"
placeholder="Choose a date ..."
></kendo-datepicker>
</kendo-label>
Error in src/app/app.component.ts (28:37)
Type 'DateTime' is missing the following properties from type 'Date': toDateString, toTimeString, toLocaleDateString, toLocaleTimeString, and 36 more.
A binding against a Javascript date, on the other hand, works
<kendo-label text="JSDate">
<kendo-datepicker [value]="date"
placeholder="Choose a date ..."
></kendo-datepicker>
</kendo-label>
Is there also a special adapter for the Kendo DatePicker like for Angular Material Date Components (@angular/material-luxon-adapter)?
Zornitsa
Telerik team
answered
on
23 Oct 2024
0 answers
60 views
I need to search and then select value. Trying to use autocomplete component. The issue is there are 2 values: one is a query and the other is a selected value. Unable to combine them.
Need a guideline.
Need a guideline.
Akib
Top achievements
Rank 1
Rank 1
asked
on
23 Oct 2024
1 answer
92 views
Hi team,
I'm very sorry to bother you again. I tried all the methods you provided, but the error still exists. I will now describe the error to you in more detail.
The following is a picture of unit test error information.
I tried to understand the error message, and it seems to be related to the language setting initialization of the datepicker component.
In the datepicker component, I have implemented the language switching function. Here is the relevant code for the language switching.
In the app.config.ts file, I globally set and imported the corresponding language pack.
I tried to introduce CldrIntlService in the unittest file, but it still gave the same error.
Thank you for your help!
Zornitsa
Telerik team
answered
on
22 Oct 2024
1 answer
113 views
I need to create a dropdown menu on the Appbar. how can I do that? I used <kendo-menu-item>, but it doesn't align with other items in the appbar-section
Zornitsa
Telerik team
answered
on
22 Oct 2024
