Questions on Kendo UI for Angular Forum

1 answer

53 views

Kendo Loader Issue - Loader Impacting Textbox used for Password does not work as intended

Once Kendo loader is shown and hidden, it resets the textbox type from password 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

Here is the sample code:

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

Loader

TextBox

answered on 12 Nov 2024

0 answers

68 views

Kendo Loader Angular

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 { 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;

}

}

}

Loader

TextBox

asked on 29 Oct 2024

1 answer

149 views

The Loader ThemeColor of secondary does not work for the material theme

A loader component with a theme color of secondary is always gray regardless of the theme settings. You can see this on your demo page.

Loader

answered on 30 Aug 2023

1 answer

331 views

Error installing Indicators

I have been trying to install the indicators

When installing I get the following: NPM install @progress/kendo-angular-indicators

While resolving: kendo-angular-app@0.0.0
Found: @progress/kendo-angular-common@2.0.3
node_modules/@progress/kendo-angular-common
  @progress/kendo-angular-common@"^2.0.3" from the root project

Could not resolve dependency:
peer @progress/kendo-angular-common@"^3.0.0" from @progress/kendo-angular-indicators@2.0.0
node_modules/@progress/kendo-angular-indicators
  @progress/kendo-angular-indicators@"^2.0.0" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Below is my package.json

{
  "name": "kendo-angular-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ssl --ssl-key c:\\certificates\\localhost.key  --ssl-cert c:\\certificates\\localhost.crt",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.1.3",
    "@angular/cdk": "^13.3.9",
    "@angular/common": "^13.1.3",
    "@angular/compiler": "^13.1.3",
    "@angular/core": "^13.1.3",
    "@angular/forms": "^13.1.3",
    "@angular/localize": "^13.3.11",
    "@angular/material": "^13.3.9",
    "@angular/platform-browser": "^13.1.3",
    "@angular/platform-browser-dynamic": "^13.1.3",
    "@angular/router": "^13.1.3",
    "@progress/kendo-angular-buttons": "^7.0.6",
    "@progress/kendo-angular-common": "^2.0.3",
    "@progress/kendo-angular-dateinputs": "^6.0.3",
    "@progress/kendo-angular-dialog": "^6.0.2",
    "@progress/kendo-angular-dropdowns": "^6.0.2",
    "@progress/kendo-angular-excel-export": "^4.0.4",
    "@progress/kendo-angular-filter": "^1.0.0",
    "@progress/kendo-angular-grid": "^6.1.3",
    "@progress/kendo-angular-icons": "^2.0.1",
    "@progress/kendo-angular-indicators": "^2.0.0",
    "@progress/kendo-angular-inputs": "^8.0.9",
    "@progress/kendo-angular-intl": "^3.1.3",
    "@progress/kendo-angular-l10n": "^3.0.4",
    "@progress/kendo-angular-label": "^3.1.3",
    "@progress/kendo-angular-menu": "^4.0.2",
    "@progress/kendo-angular-notification": "^3.0.5",
    "@progress/kendo-angular-pdf-export": "^3.0.4",
    "@progress/kendo-angular-popup": "^4.0.6",
    "@progress/kendo-angular-tooltip": "^4.0.3",
    "@progress/kendo-angular-treeview": "^6.0.2",
    "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.1",
    "@progress/kendo-licensing": "^1.2.2",
    "@progress/kendo-theme-default": "^5.8.1",
    "@progress/kendo-theme-material": "^5.8.1",
    "bootstrap": "^5.2.1",
    "lodash": "^4.17.21",
    "rxjs": "~7.4.0",
    "tslib": "^2.4.0",
    "zone.js": "^0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.1.4",
    "@angular/cli": "^13.1.4",
    "@angular/compiler-cli": "^13.1.3",
    "@types/jasmine": "^3.10.6",
    "@types/lodash": "^4.14.185",
    "@types/node": "^12.20.55",
    "jasmine-core": "~3.10.0",
    "karma": "^6.3.20",
    "karma-chrome-launcher": "^3.1.1",
    "karma-coverage": "^2.1.1",
    "karma-jasmine": "^4.0.2",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "^4.6.2"
  }
}

Loader

answered on 11 Jan 2023

0 answers

117 views

Loader do not appears.

adding the loader in my projet

<kendo-loader type="infinite-spinner" themeColor="primary" size="medium"></kendo-loader>

No compilation or runtime error, but nothing on the page appears.

Any idea?

Loader

asked on 29 Apr 2022

1 answer

122 views

Angular Component has become slow when multiple kendo-grid's are there

I'm having six tabs and in all six tabs, I'm having a kendo-grid table. when I load the component it's becoming too slow(40 seconds) when working with 500 records. and I'm loading data from API(Backend) and data comes from the backend very quickly(1 second) and pagination is enabled.

I have even implemented virtual scrolling but didn't help me.

<kendo-grid [data]="gridDataOpen" [loading]="loaderVisible" [filterable]="true" [filter]="state.filter" 
                 scrollable="virtual" [rowHeight]="35" [sortable]="true" [sort]="state.sort" [pageSize]="state.take"    
[skip]="state.skip"[height]="700"(dataStateChange)="dataStateChange($event)"(pageChange)="pageChange($event)">
pageChange(e) {
    this.loaderVisible = true;
    this.state.skip = e.skip;
    this.loadItems(e);
}
public pageSize = 100;
  loadItems(state): void {
    this.gridDataOpen = {
      data: this.tableDataOpen.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataOpen.length,
    };
    this.gridDataAccepted = {
      data: this.tableDataAccepted.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataAccepted.length,
    };
    this.gridDataSubmitted = {
      data: this.tableDataSubmitted.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataSubmitted.length,
    };
    this.gridDataSubmissionAccepted = {
      data: this.tableDataSubmissionAccepted.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataSubmissionAccepted.length,
    };
    this.gridDataRejected = {
      data: this.tableDataRejected.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataRejected.length,
    };
    this.gridDataCancelled = {
      data: this.tableDataCancelled.slice(this.state.skip, this.state.skip + this.pageSize),
      total: this.tableDataCancelled.length,
    };
    this.loaderVisible = false;
  }
 

answered on 19 Nov 2021