Questions on Kendo UI for Angular Forum

0 answers

24 views

How can I filter multiple date range in kendo grid

I have a date list which is binding in kendo grid. I what to filter multiple date range like 1st January 2025 to 31st January 2025 and 1st May 2025 - 31st May 2025. Can kendo grid support multi date range filter? If support, then how to implement it.

Calendar

Charts

Date Math

asked on 24 Apr 2025

0 answers

30 views

I want to filter dates quarterly in kendo gird.

How we can filter Dates same like excel. I want to filter dates quarterly in kendo gird. Can we achieve it using kendo search? If achieve then how.

asked on 24 Mar 2025

0 answers

85 views

No translation found for "6401309146619618412"

After update I've arrors in console:

./node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "444501037893190567" ("clear" - "kendo.timepicker.clearTitle").

./node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "5837182130353517790" ("clear" - "kendo.datetimepicker.clearTitle").

./node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "6401309146619618412" ("clear" - "kendo.datepicker.clearTitle").

./node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "6947941843239609210" ("clear" - "kendo.dateinput.clearTitle").

./node_modules/@progress/kendo-angular-layout/fesm2020/progress-kendo-angular-layout.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "3414996632637231223" ("next" - "kendo.timeline.next").

./node_modules/@progress/kendo-angular-layout/fesm2020/progress-kendo-angular-layout.mjs - Warning: Module Warning (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
(Emitted value instead of an instance of Error) No translation found for "5733397898153231659" ("previous" - "kendo.timeline.previous").

How to fix this issue?

DateInput

asked on 20 Dec 2024

1 answer

120 views

Cannot find how to work with Ids for Text box to get Selenium tests to correctly interact with them.

5:45 PM found this SO post: Selenium with Kendo UI

Is the 'hard way' of writing xpath in C# the way to do this, using Se Web Driver? The post is 6 years old ... there's not a better way?

Crossing my fingers, there's an easier way than running the test, letting it fail, mapping out x-path, rinse-lather-repeat, eventually get there? :)

==================== Above New info as of 5:45 20 Nov =====================

Looking over the docs, I find nothing helpful with learning how to make the kendo textbox interactive with Se Tests.

Here is what I'm facing, I'm inserting from some emails and a Stack O post.

It appears our .scss file is a major player here. There isn’t a clear input for the Se tests to see where to put what. I don’t know enough about SCSS SASS to be sure but finally tracked down the id being tacked on to the k-input-inner class. From this I sort of catch on to what’s zapping us with using the Se Web Driver and Se IDE tests.

Here is the Id noted: k-d6dd8b3b-9d55-45cb-927c-634d4f11473c. Note how it is prepended to the k-input-inner to render the text. This appears really super nested. I think the test can’t find where to put the text and just puts it an input at the first point in the hierarchy it finds.

See Screenshot_1.png

The green shows where I typed the text in the intended text location. Yellow shows where the test put it – in the validator indicator span, forgive any terminology error there. I’m not seeing the same inner text area as in the top screen shot.

My conclusion is the _inputs.scss file might be the issue. We’re having rendering given 2 different ways depending on whether we run the test or spin the page up in dotnet watch run.

I’m trying to find where in the _inputs.scss file is the starting point, to drill further into the issue. The closest I can find is on line 332:

.k-maskedtextbox {

height: 1.3rem;

input.k-input-inner {

font-size: 12px;

padding: 1px 3px 0px;

}

If this is right, in order to use Se IDE, Web Driver or Grid, we may have to rethink our SCSS strategy. I’d say that’s above my pay grade.

Still, can we take a look at this?

See Screenshot_2.png

My lead got back with me to clarify that while CSS can be used in design in our case it is not, and to look instead into the Kendo docs for how ids are generated and so on.

Well, looking in the docs I see how to set up a basic project and get basic code working. Can't find anything on how to do what I need -- how to make Se tests drive Kendo elements for doing tests.

DateInput

TextBox

answered on 21 Nov 2024

1 answer

57 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

77 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

0 answers

124 views

kendo-dateinput and tab-like directives

I had a customer who would like us to make 'Enter' work similar to Tab for moving across consecutive fields. For that I built a directive to tag onto various open fields where it was applicable (ie. inputs, textareas, kendo-dropdownlist, kendo-dateinput, just avoiding multicolumncombobox because that requires Enter as part of it's functioning).

What I've noticed is this will work for inputs, textareas, even kendo-dropdownlists, but it seems like for kendo-dateinput it will never 'tab' onto or out of those. Here's an example of both the directive and the fields I'm talking about living in the wild:

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
selector: '[tab13]'
})
export class Tab13Directive {

constructor(private el: ElementRef) { }

@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
if (event.key === 'Enter') {
event.preventDefault();
const nextElement = this.findNextFocusableElement();
if (nextElement) {
nextElement.focus();
}
}
}

private findNextFocusableElement(): HTMLElement | null {
const tab13Elements = document.querySelectorAll('[tab13]');
const currentIndex = Array.from(tab13Elements).indexOf(this.el.nativeElement);

for (let i = currentIndex + 1; i < tab13Elements.length; i++) {
if (this.isFocusable(tab13Elements[i] as HTMLElement)) {
return tab13Elements[i] as HTMLElement;
}
}

return null;
}

private isFocusable(element: HTMLElement): boolean {
return (
element.hasAttribute('tab13')
);
}
}

HTML example:

<div style="width: 100%; display: flex; flex-wrap: wrap; white-space: nowrap;">
<input tab13 id="{{ '0-qs-code' }}" tabindex="{{'120007'}}" />
<input tab13 id="{{ '0-qs-email' }}" tabindex="{{'120008'}}" />
<kendo-dateinput tab13 id="{{ '0-qs-rfqsent' }}" tabindex="{{'120009'}}" format="M/d/yy" placeholder="M/d/yy"></kendo-dateinput>
<kendo-dateinput tab13 id="{{ '0-qs-rfqrec' }}" tabindex="{{'120010'}}" format="M/d/yy" placeholder="M/d/yy"></kendo-dateinput>
<input tab13 id="{{ '0-qs-quoteno' }}" tabindex="{{'120011'}}" />
</div>

The tab works across all of these but for reasons I'm unfamiliar with the tab13 selector fails at 0-qs-email when the next input is a kendo-dateinput and it fails in 0-qs-rfqsent but it will work from 0-qs-rfqrec because the next selector is an input rather than a kendo-dateinput.

I'm hoping to up my product knowledge a bit and get a better grasp of what the kendo-dateinput is doing under the hood that might explain this behavior and what workarounds might be available for improving the directive.

DateInput

asked on 15 Mar 2024

1 answer

126 views

Need Source code Below Format Kendo UI Chart with in the Angular UI

Need sample source code in Angular 14 UI like below format Kendo Chart.

Present is in jQuery, but instead of jQuery using angular 14 UI support source code.

https://docs.telerik.com/kendo-ui/knowledge-base/display-time-on-value-axis#solution

answered on 07 Feb 2023

1 answer

247 views

Value issues when wrapping DateRange in custom component

Hey everyone!

I'm currently trying to wrap a DateRange component inside of a custom component in my application so that I can add boilerplate configuration in a single place. Everything was going well until I tried to set the value from a parent component. When I attempt to set the value writeValue inside the component is called properly and sets the value HOWEVER the value is then immediately overwritten and a "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'Thu Feb 02 2023 10:56:57 GMT-0600 (Central Standard Time)'. Current value: 'null'" error is written to the console. If I look at the stacktrace it is pointing to the start date input in the component template.

Is there something in the component lifecycle that could be causing this issue? I have verified that nothing else attempts to set the value of the component.

Thanks in advance for any help or insight.

component.html

<kendo-daterange>
  <kendo-floatinglabel text="{{label}}">
    <kendo-dateinput kendoDateRangeStartInput [min]="selectRange.startDate" [max]="selectRange.endDate" [(value)]="startDate" fillMode="outline"></kendo-dateinput>
  </kendo-floatinglabel>
  <kendo-floatinglabel text="">
    <kendo-dateinput kendoDateRangeEndInput [min]="selectRange.startDate" [max]="selectRange.endDate" [(value)]="endDate" fillMode="outline"></kendo-dateinput>
  </kendo-floatinglabel>
  <kendo-daterange-popup (close)="onClose()"></kendo-daterange-popup>
</kendo-daterange>

component.ts

import {Component, forwardRef, Input, OnInit, ViewEncapsulation} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { TICKET_DATE_FORMAT, DATE_CONSTS } from 'core/constants';
import { DateRange } from 'core/models/date-range';

@Component({
    selector: 'lm-date-range',
    templateUrl: './lm-date-range.component.html',
    styleUrls: ['./lm-date-range.component.scss'],
    providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          multi:true,
          useExisting: LMDateRangeComponent
        }
      ]
  })
  
export class LMDateRangeComponent implements ControlValueAccessor, OnInit {

    protected selectRange: DateRange = {startDate: DATE_CONSTS.MIN_DATE, endDate: DATE_CONSTS.MAX_DATE};
    protected dateFormat = TICKET_DATE_FORMAT;

    onChange = (value: DateRange) => {};
    onTouched = () => {};
    touched = false;
    disabled = false;

    @Input() label: string;
    startDate: Date = null;
    endDate: Date = null;
    value: DateRange = null;

    constructor() {
        var x = 5;
    }

    ngOnInit(): void {
        var x = 5;
    }

    writeValue(selected: DateRange) {
        this.onChange(selected);
        if (selected) {
            this.value = {
                startDate: typeof selected.startDate === 'string' ? new Date(selected.startDate) : selected.startDate,
                endDate: typeof selected.endDate === 'string' ? new Date(selected.endDate) : selected.endDate,
            };    
            this.startDate = this.value.startDate;
            this.endDate = this.value.endDate;
        }
        else {
            this.value = null;
            this.startDate = null;
            this.endDate = null;
        }
    }

    registerOnChange(onChange: any) {
        this.onChange = onChange;
    }

    registerOnTouched(onTouched: any) {
        this.onTouched = onTouched;
    }

    markAsTouched() {
        if (!this.touched) {
            this.onTouched();
            this.touched = true;
        }
    }

    setDisabledState(disabled: boolean) {
        this.disabled = disabled;
    }

    onClose() {
        this.markAsTouched();
        this.value = { startDate: this.startDate, endDate: this.endDate };
        this.onChange(this.value);
    }
}

parentcomponent.html (just the component definition)

<lm-date-range formControlName="issueDateRange" label="Issue Date/Timeframe" class="range-input"></lm-date-range>

parentcomponent.ts

(the ticket variable is passed as an input to this component)

ngOnInit() {
    if (this.ticket) {
      this.f.issueDateRange.setValue({startDate: this.ticket.startDate, endDate: this.ticket.endDate});
    }
    else {
      this.f.issueDateRange.setValue({startDate: newDate(), endDate: newDate()})
    }
}

DateInput

DateRange

answered on 06 Feb 2023

1 answer

311 views

Unable to load package information from registry

I am new at Kendo UI. Already I add the date module normally as a quick cli setup. But when I want to add another module this trough an error.

Example:

Unable to load package information from the registry: Response timeout while trying to fetch https://registry.npmjs.org/@progress%2fkendo-angular-inputs (over 300000ms)

DateInput

Forms

answered on 25 Jan 2023