Telerik Forums
Kendo UI for Angular Forum
or
Ask question
All Questions
Unanswered
Answered
3,017 questions
1 answer
128 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
Yanmario
Telerik team
 answered on 21 Nov 2024
0 answers
358 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
Waseem
Top achievements
Rank 1
 asked on 19 Nov 2024
0 answers
133 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
Layth
Top achievements
Rank 1
Iron
 asked on 18 Nov 2024
1 answer
448 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
Martin Bechev
Telerik team
 answered on 15 Nov 2024
0 answers
158 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
Andreea
Top achievements
Rank 1
Iron
 updated question on 13 Nov 2024
2 answers
281 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-primary">...</table>

<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
David
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 13 Nov 2024
1 answer
94 views
[Solved] 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
Martin Bechev
Telerik team
 answered on 12 Nov 2024
1 answer
90 views
Change all the apparence of a KendoGrid on specific component

Hi, can we use directives or something similar to change the appearance of the Kendo-Grid like

<kendo-grid  NewApparenceDirective [kendoGridBinding]="data()">

I need to create a reusable, very lightweight grid.

Removing the background (set it transparent), removing some borders, changing text size, and so on.

What is the way to accomplish and reuse it on a lot of our components

 

Thanks

Grid
Martin Bechev
Telerik team
 answered on 08 Nov 2024
1 answer
105 views
how to change the click function of the ellipsis in kendo ui kendo-scheduler-month-view


how to change the click function of the ellipsis in kendo ui kendo-scheduler-month-view?

i need to change the click function of the ellipsis on the shown screenshot below:

 




<kendo-scheduler
    [resources]="[]"
    [kendoSchedulerBinding]="events"
    [(selectedViewIndex)]="schedulerView"
    [slotClass]="getSlotClass"
    [selectedDate]="selectedDate"
    [slotDivisions]="1"
    [selectable]="true"
    [isSlotSelected]="isSlotSelected"
    (slotDragStart)="onSlotDragStart($event)"
    (slotDrag)="onSlotDrag($event)">

    <kendo-scheduler-month-view [eventHeight]="18" [eventClass]="getEventClass">
      <ng-template kendoSchedulerEventTemplate let-event="event" let-resources="resources">
        <ng-template *ngTemplateOutlet="eventTemplate; context: { $implicit: event.dataItem }"></ng-template>
      </ng-template>
    </kendo-scheduler-month-view>

</kendo-scheduler>
<kendo-scheduler
    [resources]="[]"
    [kendoSchedulerBinding]="events"
    [(selectedViewIndex)]="schedulerView"
    [slotClass]="getSlotClass"
    [selectedDate]="selectedDate"
    [slotDivisions]="1"
    [selectable]="true"
    [isSlotSelected]="isSlotSelected"
    (slotDragStart)="onSlotDragStart($event)"
    (slotDrag)="onSlotDrag($event)">

    <kendo-scheduler-month-view [eventHeight]="18" [eventClass]="getEventClass">
      <ng-template kendoSchedulerEventTemplate let-event="event" let-resources="resources">
        <ng-template *ngTemplateOutlet="eventTemplate; context: { $implicit: event.dataItem }"></ng-template>
      </ng-template>
    </kendo-scheduler-month-view>

</kendo-scheduler>

Scheduler
Yanmario
Telerik team
 answered on 08 Nov 2024
1 answer
133 views
[Solved] Using a grid layout for k-form

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

Forms
Martin Bechev
Telerik team
 answered on 01 Nov 2024
Narrow your results
Done
Selected tags
Tags
General Discussions
Grid
Charts
Scheduler
TreeView
DropDownList
Editor
MultiSelect
Styling
DatePicker
PDF Export
Upload
TreeList
ComboBox
Filter
Dialog
Window
Excel Export
ToolBar
Tooltip
Button
Drawer
TextBox
Accessibility
TabStrip
DateTimePicker
Menu
NumericTextBox
Popup
Calendar
DateInput
Sortable
CheckBox
DateRange
Forms
Icon
Licensing
Pager
PanelBar
Gantt
AutoComplete
Drag and Drop
Conversational UI
DropDownTree
Data Query
MultiViewCalendar
Notification
ScrollView
TextArea
PDFViewer
Drawing
FileSelect
Localization
Label
ListView
MaskedTextBox
MultiColumnComboBox
Splitter
TileLayout
Stepper
GridLayout
ContextMenu
DropDownButton
Switch
Spreadsheet
SVGIcon
TimePicker
Loader
ListBox
ExpansionPanel
Gauges
ProgressBar
Map
PivotGrid
FormField
ButtonGroup
Slider
SplitButton
Timeline
Chip
RadioButton
Security
Popover
AppBar
Avatar
Card
ColorGradient
ColorPalette
ColorPicker
Date Math
FloatingLabel
Skeleton
Signature
Badge
BreadCrumb
ChipList
File Saver
RangeSlider
Ripple
BottomNavigation
ActionSheet
Typography
StackLayout
AIPrompt
ChunkProgressBar
FloatingActionButton
CircularGauge
Barcode
QRCode
CircularProgressBar
FlatColorPicker
VS Code Extension
Rating
ArcGauge
LinearGauge
RadialGauge
Page Templates / Building Blocks
Chart Wizard
OTP Input
Diagram
SpeechToTextButton
InlineAIPrompt
AI Coding Assistant
StockChart
Sankey
Sparkline
Agentic UI Generator
SmartPasteButton
PromptBox
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
17 18
19
20 21
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how