Questions on Kendo UI for Angular Forum

1 answer

34 views

Using content projection (<ng-content>) in Kendo Grid

I am attempting to standardize a lot of my grids for my application. They all follow the same general set up for filtering, sorting, etc. But each grid might have some specific customizations. Usually this is just customizing the command column to have different command (edit button, actions menu, etc), but this can also take the form of additional toolbar buttons and the like.

To do this, I am trying to make a component that uses Kendo Grid, has it set up the way I want to, but uses <ng-content> to project additional requirements.

However, it seems this is completely ignored by the grid, and nothing is ever rendered.

Example stackblitz which shows the issue: https://stackblitz.com/edit/angular-zc4drs?file=src%2Fapp%2Fapp.component.ts

The actual kendo grids that I'm working on are much more complicated, which is a large motivation for having a common component that I can use and inject additional stuff into as needed. Any help would be appreciated.

General Discussions

Grid

answered on 21 Nov 2024

1 answer

134 views

Kendo-Angular-Editor: Content projection for custom toolbar

I want to configure a custom button for the editor toolbar as described here https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/ However, the button should not always be there, depending on in which other component the editor is used. So, I wanted to approach the issue by using content projection with ng-content. I implemented the custom button and placed ng-content tag into the kendo-editor definition. However, when I try to project the custom button to the editor it does not work. The button is absent.

Below my editor implementation in an own component "my-editor".

<kendo-editor #editor
              [placeholder]="placeholder"
              [(ngModel)]="content"
              [iframe]="false"
>
  <kendo-toolbar>
    <kendo-toolbar-buttongroup>
      <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
    </kendo-toolbar-buttongroup>
    <ng-content></ng-content>             <!-- The place where the custom buttons should be inserted -->
  </kendo-toolbar>
</kendo-editor>

I inject the custom button like that

<my-editor>
  <custom-button></custom-button>
</my-editor>

Button

Editor

ToolBar

answered on 21 Nov 2024

0 answers

18 views

Problem applying theme or css in Kendo UI for Angular

Hi,

Can you please let me know the issue with my code using the css or theme? I have copied the code of building block of "Hero2" and I followed the below link to apply the theme

https://www.telerik.com/design-system/docs/themes/get-started/installation/#using-external-cdn-link

I have used the below code part in index.html.. the fonts and colors are not displaying the correct one and also there is no logo or image.

Please let me know the steps to proceed to use the building blocks in our portal

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TestKendoMenu1</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@9.0.0/dist/all.css" />
  <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-utils@9.0.0/dist/all.css" />
</head>
<body>
  <app-root></app-root>
</body>
</html>
 
 
 
 
 

Menu

Styling

asked on 21 Nov 2024

1 answer

18 views

Issue with kendodaterangestartinput and kendodaterangeendinput Attributes Not

I am experiencing an issue with the Kendo DateRange functionality in my Angular project. I am dynamically assigning the kendodaterangestartinput and kendodaterangeendinput attributes using a directive. While the attributes are correctly applied to the <kendo-dateinput> elements (verified in the DOM), the calendar is not showing when interacting with the input fields.

Here’s the directive I am using to dynamically assign the attributes

import { Directive, Input, Renderer2, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[dynamicDateRange]',
  standalone: true
})
export class DynamicDateRangeDirective implements OnInit {
  @Input() dynamicDateRange: 'start' | 'end' | null = null;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit(): void {
    if (this.dynamicDateRange === 'start') {
      this.renderer.setAttribute(this.el.nativeElement, 'kendodaterangestartinput', '');
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangeendinput');
    } else if (this.dynamicDateRange === 'end') {
      this.renderer.setAttribute(this.el.nativeElement, 'kendodaterangeendinput', '');
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangestartinput');
    } else {
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangestartinput');
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangeendinput');
    }
  }
}

Here’s how I wrote the story component

<kendo-formfield [showHints]="showHints" [showErrors]="showErrors" [orientation]="orientation">
  <kendo-label [text]="label" [for]="dateinput" [hidden]="!showLabel"></kendo-label>
  <kendo-dateinput
    #dateinput
    [formControl]="control"
    [allowCaretMode]="allowCaretMode!"
    [autoCorrectParts]="autoCorrectParts"
    [autoFill]="autoFill"
    [autoSwitchKeys]="autoSwitchKeys"
    [autoSwitchParts]="autoSwitchParts"
    [clearButton]="clearButton"
    [disabled]="disabled"
    [enableMouseWheel]="enableMouseWheel"
    [fillMode]="fillMode"
    [format]="format"
    [formatPlaceholder]="formatPlaceholder"
    [incompleteDateValidation]="incompleteDateValidation"
    [inputAttributes]="inputAttributes!"
    [max]="max"
    [min]="min"
    [placeholder]="placeholder"
    [rangeValidation]="rangeValidation"
    [readonly]="readonly"
    [rounded]="rounded"
    [size]="size"
    [steps]="steps"
    [tabindex]="tabindex"
    [dynamicDateRange]="dateRangeType"
    [title]="title"
    [twoDigitYearMax]="twoDigitYearMax"
    [value]="value"
    (blur)="blur.emit($event)"
    (valueChange)="valueChange.emit($event)"
    (focus)="focus.emit($event)">
  </kendo-dateinput>
  <kendo-formhint [align]="hintAlign">
    <ng-content select="[hint]"></ng-content>
  </kendo-formhint>
  <kendo-formerror [align]="errorAlign">
    <ng-content select="[error]"></ng-content>
  </kendo-formerror>
</kendo-formfield>

Here’s how I use it in the template:

<kendo-daterange id="feed-filter-date-range" class="k-mt-4 k-justify-content-between">
  <mnp-date-input 
    label="start" 
    [dynamicDateRange]="'start'" 
    [control]="fromDate">
  </mnp-date-input>
  <div>
    <kendo-formfield>
      <mnp-label text="End" class="k-d-flex k-flex-col"></mnp-label>
      <kendo-dateinput 
        formControlName="toDate" 
        kendodaterangeendinput>
      </kendo-dateinput>
    </kendo-formfield>
  </div>
</kendo-daterange>

Despite the attributes being added dynamically, the calendar does not appear when interacting with the kendodaterangestartinput or kendodaterangeendinput fields. However, when I used the <kendo-dateinput> directly the attributes directly in the template, the calendar works as expected.

<kendo-daterange>
  <kendo-dateinput 
    formControlName="fromDate" 
    kendodaterangestartinput>
  </kendo-dateinput>
  <kendo-dateinput 
    formControlName="toDate" 
    kendodaterangeendinput>
  </kendo-dateinput>
</kendo-daterange>

DateInput

DateRange

answered on 21 Nov 2024

0 answers

35 views

[Angular] Disable changing value of kendo elements using arrow up/down keys on numeric textbox and datetime input

Hello,

I am trying to implement a directive to prevent changing the values on the client side when an input is disabled. It works perfectly on a native HTML element, but not completely when used on a Kendo UI element such as datetime picker or numeric textbox.

  @HostListener('keydown', ['$event'])
  onKeydown(event: KeyboardEvent): void {
    if (this.appCustomDisabled) {
      // Prevent arrow keys (Up/Down) from changing the value
      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
        event.preventDefault();
        event.stopImmediatePropagation();
      }

      // Prevent any other key presses or changes
      event.preventDefault();
      event.stopImmediatePropagation();
    }
  }

  @HostListener('input', ['$event'])
  onInput(event: Event): void {
    if (this.appCustomDisabled) {
      event.preventDefault();  // Prevent any changes to the input
      event.stopImmediatePropagation();
    }
  }

  @HostListener('wheel', ['$event'])
  onWheel(event: WheelEvent): void {
    if (this.appCustomDisabled) {
      event.preventDefault();  // Prevent the mouse wheel action
      event.stopImmediatePropagation();
    }
  }

mouse wheel and key inputs are successfully prevented, but arrow up/down keys are still changing the value. How do I prevent them from changing the value?

My main goal is to prevent the user as much as possible from modifying the value of a disabled input because the disabled=true approach can be easily bypassed from the devtools.

DateTimePicker

NumericTextBox

asked on 19 Nov 2024

0 answers

21 views

Custom DateInput Component Issue: Calendar Not Displaying in when using date range

I am experiencing an issue with the Kendo DateRange functionality in my Angular project. I am dynamically assigning the kendodaterangestartinput and kendodaterangeendinput attributes using a directive. While the attributes are correctly applied to the <kendo-dateinput> elements (verified in the DOM), the calendar is not showing when interacting with the input fields.

Here’s the directive I am using to dynamically assign the attributes

import { Directive, Input, Renderer2, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[dynamicDateRange]',
  standalone: true
})
export class DynamicDateRangeDirective implements OnInit {
  @Input() dynamicDateRange: 'start' | 'end' | null = null;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit(): void {
    if (this.dynamicDateRange === 'start') {
      this.renderer.setAttribute(this.el.nativeElement, 'kendodaterangestartinput', '');
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangeendinput');
    } else if (this.dynamicDateRange === 'end') {
      this.renderer.setAttribute(this.el.nativeElement, 'kendodaterangeendinput', '');
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangestartinput');
    } else {
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangestartinput');
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangeendinput');
    }
  }
}

Here’s how I wrote the story component

<kendo-formfield [showHints]="showHints" [showErrors]="showErrors" [orientation]="orientation">
  <kendo-label [text]="label" [for]="dateinput" [hidden]="!showLabel"></kendo-label>
  <kendo-dateinput
    #dateinput
    [formControl]="control"
    [allowCaretMode]="allowCaretMode!"
    [autoCorrectParts]="autoCorrectParts"
    [autoFill]="autoFill"
    [autoSwitchKeys]="autoSwitchKeys"
    [autoSwitchParts]="autoSwitchParts"
    [clearButton]="clearButton"
    [disabled]="disabled"
    [enableMouseWheel]="enableMouseWheel"
    [fillMode]="fillMode"
    [format]="format"
    [formatPlaceholder]="formatPlaceholder"
    [incompleteDateValidation]="incompleteDateValidation"
    [inputAttributes]="inputAttributes!"
    [max]="max"
    [min]="min"
    [placeholder]="placeholder"
    [rangeValidation]="rangeValidation"
    [readonly]="readonly"
    [rounded]="rounded"
    [size]="size"
    [steps]="steps"
    [tabindex]="tabindex"
    [dynamicDateRange]="dateRangeType"
    [title]="title"
    [twoDigitYearMax]="twoDigitYearMax"
    [value]="value"
    (blur)="blur.emit($event)"
    (valueChange)="valueChange.emit($event)"
    (focus)="focus.emit($event)">
  </kendo-dateinput>
  <kendo-formhint [align]="hintAlign">
    <ng-content select="[hint]"></ng-content>
  </kendo-formhint>
  <kendo-formerror [align]="errorAlign">
    <ng-content select="[error]"></ng-content>
  </kendo-formerror>
</kendo-formfield>

Here’s how I use it in the template:

<kendo-daterange id="feed-filter-date-range" class="k-mt-4 k-justify-content-between">
  <mnp-date-input 
    label="start" 
    [dynamicDateRange]="'start'" 
    [control]="fromDate">
  </mnp-date-input>
  <div>
    <kendo-formfield>
      <mnp-label text="End" class="k-d-flex k-flex-col"></mnp-label>
      <kendo-dateinput 
        formControlName="toDate" 
        kendodaterangeendinput>
      </kendo-dateinput>
    </kendo-formfield>
  </div>
</kendo-daterange>

Despite the attributes being added dynamically, the calendar does not appear when interacting with the kendodaterangestartinput or kendodaterangeendinput fields. However, when I used the <kendo-dateinput> directly the attributes directly in the template, the calendar works as expected.

<kendo-daterange>
  <kendo-dateinput 
    formControlName="fromDate" 
    kendodaterangestartinput>
  </kendo-dateinput>
  <kendo-dateinput 
    formControlName="toDate" 
    kendodaterangeendinput>
  </kendo-dateinput>
</kendo-daterange>

DateInput

DateRange

asked on 18 Nov 2024

1 answer

31 views

Kendo Grid Column fixed width

There is a kendo grid with 8 columns. The width param is set to all columns.
I would like to have one column always be mentioned value. and never receive distributed portion.

More Details:

From Official documentation at https://www.telerik.com/kendo-angular-ui/components/grid/columns/width we know that

When all column widths are explicitly set and the cumulative column width is less than the available Grid width, the remaining width is distributed evenly between all columns

At my use case, in about 50 grids, there are same "Date" columns (YYYY-MM-DD formatted). So when it will be "perfect" that the columns be always same value and do not become "wider" for case when cumulative column width is less than the available Grid width.

Is it possible?

General Discussions

Grid

answered on 15 Nov 2024

0 answers

17 views

KendoGrid removing an item

I use a kendo-grid component that has a dynamic list,. When I press Add it adds a new row and each row can be removed from the list. My problem is when I remove an item, it always removes the last row from UI. I saw that the values are correct, only the UI is the problem because it removes the last element from the list and it keeps visible the one I selected to remove.

After some debugging, I saw that it is because of the filteredPermission list that updates at every changes but I do not know how to fix th problem.

Thank you!

  <kendo-grid [data]="rowsPermissionsArray.controls">
        <kendo-grid-column field="id" title="{{ resourceCodes.permissions | translate }}">
          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <kendo-formfield>
              <app-crm-single-dropdown
                class="dl-with-remove-btn"
                [data]="filteredPermissions"
                [formControl]="dataItem.get('id')"></app-crm-single-dropdown>
            </kendo-formfield>
            <ng-container
              *ngFor="let error of form.get('rowsPermissions')?.get(rowIndex.toString())?.get('id')?.errors | keyvalue">
              <kendo-formerror
                *ngIf="
                  error.key === 'required' || error.key === 'duplicatePermission'
                    ? form.get('rowsPermissions')?.get(rowIndex.toString())?.get('id')?.touched
                    : true
                "
                >{{ error.value }}</kendo-formerror
              >
            </ng-container>
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column [width]="130" title="{{ resourceCodes.actions | translate }}" class="column-action-buttons">
          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <button class="button-grid-action" (click)="showDeleteConfirmationPermissionModal(rowIndex)">
              <icon-delete class="icon"></icon-delete>
            </button>
          </ng-template>
</kendo-grid-column>
 get rowsPermissionsArray() {
    return this.form.get('rowsPermissions') as FormArray;
  }
 
  confirmPermissionDeletion = (): void => {
    this.rowsPermissionsArray.removeAt(this.selectedPermissionId);
    this.showConfirmationPermissionModal = false;
  };
  showDeleteConfirmationPermissionModal(id: number) {
    this.selectedPermissionId = id;
    this.showConfirmationPermissionModal = true;
  }
  onCloseConfirmationPermissionModal(): void {
    this.showConfirmationPermissionModal = false;
  }
 
  setupPermissions() {
    this.form.get('rowsPermissions')?.valueChanges.subscribe((selectedValues: any[]) => {
      this.filteredPermissions = this.platformPermissions.filter(
        permission => !selectedValues.some(selected => selected.id === permission.id)
      );
    });
  }
</kendo-grid>

Grid

GridLayout

updated question on 13 Nov 2024

2 answers

43 views

how to apply bootstrap table style to grid component

hi,

can you please tell me how to apply bootstrap table style,i.e table-primary,table-secondary...,please see the below：

<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>
 
the grid i am using  is descripted as below web page:
https://www.telerik.com/kendo-angular-ui/components/grid
 
thank you.
david

Grid

answered on 13 Nov 2024

1 answer

22 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