Telerik Forums
Kendo UI for Angular Forum
1 answer
80 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
Martin Bechev
Telerik team
 answered on 31 Oct 2024
1 answer
65 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
68 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



import { ComponentAfterViewInitOnInitViewChild } from'@angular/core';

import {
  LoaderType,
  LoaderThemeColor,
  LoaderSize,
from '@progress/kendo-angular-indicators';
import { FormControlFormGroupValidators } 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 loginFormFormGroup;
  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(resolve1000));
      this.showLoader = false;
    }
  }
}
Vinay
Top achievements
Rank 1
 asked on 29 Oct 2024
1 answer
48 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 
Zornitsa
Telerik team
 answered on 28 Oct 2024
1 answer
71 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
57 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.
Akib
Top achievements
Rank 1
 asked on 23 Oct 2024
1 answer
84 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
94 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
2 answers
173 views

Hi,

I have a kendo-splitter with two horizontal panes with large content. After page loading, when I resize the browser (half the width), the behaviour is as expected: each pane gets its own horizontal scrollbar.
However, if once resized by the splitter bar, the pane width is not longer adjusted after browser resize events. Instead, the page shows a single scrollbar for the whole splitter.

I understood from a similar JQuery thread (https://docs.telerik.com/kendo-ui/knowledge-base/keep-pane-size-in-percentages), that this is expected and that I have to rearrange the pane sizes programatically.

Is there more recent angular sample code for this approach, our could someone kindly layout the most effective way (avoid flickering etc.)?

As an additional question : How do I achieve separate vertical scrollbars for the panes? The pane contents have different size. When changing the height of the browser window, I get one vertical scrollbar for the whole splitter. However I would prefer separate vertical scrollbars for the panes.

My sample component code is placed below, toghether with two screenshots of wanted / unwanted rendering.

Thank you!



import {Component} from '@angular/core';
import {SplitterComponent, SplitterPaneComponent} from '@progress/kendo-angular-layout';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SplitterComponent, SplitterPaneComponent],
  template:
    `
      <div class="container" kendoWindowContainer>
        <main>
          <kendo-splitter style="height: 100%">
            <kendo-splitter-pane [collapsible]="true">
              <div class="pane-content" style="height: 500px">
                <h3>Inner splitter / left pane</h3>
                <p>Resizable and collapsible.</p>
              </div>
            </kendo-splitter-pane>

            <kendo-splitter-pane>
              <div class="pane-content" style="height: 700px">
                <h3>Inner splitter / center pane</h3>
                <p>Resizable only.</p>
              </div>
            </kendo-splitter-pane>

          </kendo-splitter>
        </main>
      </div>
    `,
  styles: `
    .pane-content {
      padding: 0 10px;
      border: black 1px solid;
      width: 600px;
    }

    h3 {
      font-size: 1.2em;
      margin: 10px 0;
      padding: 0;
    }

    p {
      margin: 0;
      padding: 0;
    }
  `
})
export class AppComponent {
  title = 'test-kendo-splitter';
}


Zornitsa
Telerik team
 answered on 21 Oct 2024
0 answers
126 views

hi, I want the scroll bar to always be visible. It appears when I start scrolling, but I want it to always be visible.
so   #scheduler .k-scheduler-content {
    overflow-y: scroll;
    } this isn't  working

please give some exaple on schedule timeline view

ikram
Top achievements
Rank 1
Iron
 updated question on 20 Oct 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?