Hello,

                  I'm trying to add filters to the pivot grid as below. Please help me to implement filter option as below by using Kendo UI Angular.

This is the code I'm using for pivot grid and don't know where to add the property to enable the filter.

How do you pass the false to the animation of the skeleton?

I try

animation=false

animation="false"

animation='false'

always got error:   is not a valid kendo-skeleton animation. Valid values are: 'pulse' | 'wave' | false

I try in the Skeleton demo StackBlitz without success.

Thanks.

Hi 

I am trying to add my own SVG to be rendered but I get erros at vsCode 

Can you please tell me how to add a custom SVG?

Many thanks

Please have a look:

I have added the kendo default theme to angular application in angular.json. The compilation time takes more than 3 minutes whenever I make change the stylesheet in the root folder. The compilation time is more faster ,when I commented the kendo default theme from angular.json.

I tried to import the kendo theme as per the documentation in the style.scss file in root folder, but again the the compilation time is taking more than  3 minutes. Due to this the development time is taking more than usual.

How to override this problem.

Hi.

I am having issue with upload component when uploading a single file. I am using @progress/kendo-angular-upload version 9.0.3. Angluar version 14.

When I select a file, upload it and get non-successful HTTP status code back from back-end (e.g. CSV file header validation didn't pass), then I get retry and remove buttons. When I click retry button, it retries to upload same file with POST request with all correct HTTP headers.

However, if I modify the file externally (e.g. by fixing CSV file header), save it and then try clicking retry button, upload component issues incorrect HTTP request to the back-end, various HTTP request headers are missing (e.g. it no longer specifies that it is a POST request). After inspecting 'good' failing POST request with 'bad' request, other than obviously missing HTTP headers I can see that the actual file which is being uploaded has incorrect modified date and size. Looks like that when I click retry button after modifying the file externally, upload component no longer works correctly.

Is this intended behavior due to browser nuances and how it works with files, or is this a bug? Or maybe I am doing something wrong...

Hi,

I have bind dynamic kendo grid with multiple rows in footer. But, here horizontal scroll display with content. How Do I display Horizontal scroll bar under  footer in kendo grid?

Please anyone give me suggestion....

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

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()})
    }
}