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.

Is there a way to define slot height anyhow?
And I mean a simple height or ratio to would get applied to the whole scheduler.

This would be very helpful for when my custom event template always displays 2 lines :

Thanks!

I am using Kendo tile layout in my angular application. When I am trying to click on Edit and Delete button, It is not allowing me to click on those buttons as it is leaving the original position from top and left. Due to that the buttons are not clickable.

Similarly I want to add a widget dynamically in my application. For that I am using Kendo Tile Layout. The issue I am facing is when I am adding a new widget and specifying its row, col, col_span and row_span, It is overlapping with the previous saved widget. Ideally it should be added at the bottom/last as I am using array.push method. However it is getting overlapped with the previous tiles displayed on the page.

I followed this link where they are saying that remove the absolute/relative position and use margin padding instead. But In my project I am not even using the positions. But still I am facing this issue.

https://github.com/telerik/kendo-angular/issues/3492

I have attached the screenshot of the issue I am facing. If someone has the working solution for this issue then it will be a great help.

Tile Layout Version: 6.6.0