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

Hello Folks,

we use Telerik for ASP.NET in our company. Never used Angular before.

in order for us to use Telerik Kendo UI for Angular what all components are needed to set up environment.

Thanks

Paul

Hi All,

I have a drawer component set up as my application's side bar navigation.  I am using a kendoDrawerItemTemplate to allow some customisation of the menu items' appearances.

If I don't use kendoDrawerItemTemplate and just leave the default styling, when an item has children I get the collapse arrow to expand and contract the level.  When using the kendoDrawerItemTemplate I would obviously need to include this, I can't find anything in the docs about how to pull this bit in.

I have something like this:

<ng-template kendoDrawerItemTemplate let-item let-level="level">
        <div
          style="
            display: flex;
            align-items: center;
            padding-bottom: 3px;
            padding-top: 3px;
          "
        >
          <span
            [ngClass]="'k-icon ' + item.icon"
            [themeColor]="primary"
            size="medium"
          ></span>
          <span class="k-item-text">{{ item.text }}</span>
          <span
            *ngIf="item.children"
            class="k-icon k-panelbar-expand k-i-arrow-60-down"
          ></span>
        </div>
      </ng-template>

The span with the *ngIf children I know is wrong but it is there that I want to pull in the component / code for the arrow if possible.

Does anyone know the answer as to how I achieve this?

Many Thanks,

Hi,

I have 2 queries on multiselect using drag selection.

1. When 'Multiple' option is set to 'false' in SelectableSettings of Treelist, auto scrolling happens when we reach the end of treelist visible in viewport.

When 'Multiple' option is set to 'true' in SelectableSettings of Treelist and multiple rows are selected using drag selection, auto scrolling not working. we need to use the mouse wheel to scroll through the treelist. Is there a way to make auto scrolling work while selecting multiple rows?

can be replicated in below example too.

https://www.telerik.com/kendo-angular-ui/components/treelist/selection/

in this example, disable 'Multiple'. Do a drag selection, auto scroll works as we move down

Enable 'Multiple' option, auto scroll does not work as we move down.

2. When selecting multiple rows using mouse drag selection and scroll(using mouse wheel), the marquee selection also moves along with that, but when the drag selection is released all the rows(even which are not in the viewport) are selected. Do we have any fixes planned for this?

https://www.telerik.com/kendo-angular-ui/components/treelist/selection/

here when we enable 'Multiple' option and do a drag selection while scrolling using mouse wheel, Marquee rectangle moves and covers only the rows displayed in viewport. after releasing drag selection, we could see that all rows which are not visible in view port are also selected.