Hi,

I am trying to make legend in chart look the same as in series (dotted). It's said I should use custom visuals. But example is missing at the link below https://www.telerik.com/kendo-angular-ui/components/charts/elements/legend/ :

Can you please update this?

Hello, 

I am facing one challenges, my requirement is to make datetimepicker as same as http://dojo.telerik.com/OrIrINir UI. I am using angular 9. I am unable to make datetimepicker UI as same as given in the link using angular 9. I gone through the documentation of Kendo UI with Angular but I found the different UI for datetimepicker. Kindly guide me. Thanks in advance.

Hello,

I'll ask about two things regards to Scheduler.

1. Possibility to have group resources with property parentValueId, which allows assigning items to the group. I found that feature for jQuery scheduler (jQuery page), but it still not available for Angular. Are you planing add same feature for Angular version?

2. It's doable to make integration between kendo Grid and Scheduler, that means dragging an item from grid and drop on scheduler (jQuery soultion)

Hello everyone, as the title says I'm trying to load my data asynchronously but I'm not sure I'm proceeding the right way, here's my code

TS:

gridData$!: Observable<I.Block[]>;

//this is a function that is called when the user submits a form
search(): void {
    this.gridData$ = this.httpService.getBlockList(variousParameters);
}

//the getBlockList function simply does a http post call
getBlockList(variousParameters): Observable<I.Block[]> {
    return this.http
      .post<I.Block[]>(someUrl, variousParameters)
}

HTML, version 1 who gave me error: Type 'Block[] | null' is not assignable to type 'any[]'

<kendo-grid
      *ngIf="searchBtnClicked"
      gdArea="results"
      [kendoGridBinding]="gridData$ | async"

      [pageable]="true"
      [pageSize]="100"

      [selectable]="{checkboxOnly: true}"

      (selectionChange)="kgOnSelectionChange($event)"
      (dataStateChange)="kgOnDataStateChange($event)"

      >
      <!-- HEADERS -->
      <kendo-grid-checkbox-column [width]="25" [showSelectAll]="true"></kendo-grid-checkbox-column>
      <!-- CHECKBOX -->

      <kendo-grid-column *ngFor="let col of columns" [field]="col.fieldname" [title]="col.displayedname" [width]="col.width" [hidden]="col.hidden">

      </kendo-grid-column>
    </kendo-grid>

So I tried this, which doesn't give me errors and seems to work, but I'm not sure it's the right way to proceed.
I don't think it's correct because, even with pageSize set to 100 and 16 columns (5 of which hidden), it takes up to 8 seconds to load a single page (on a total of only 800 results, with the total response size being only 31kb)
I read https://www.telerik.com/blogs/how-to-get-the-best-grid-performance but I can't really neither lower the number or columns or the results displayed per page.

HTML version 2, works but really slow

<ng-container *ngIf="gridData$ | async as gridData">
   <kendo-grid
      *ngIf="searchBtnClicked"
      gdArea="results"
      [kendoGridBinding]="gridData"

      [pageable]="true"
      [pageSize]="100"

      [selectable]="{checkboxOnly: true}"

      (selectionChange)="kgOnSelectionChange($event)"
      (dataStateChange)="kgOnDataStateChange($event)"

      >
      <!-- HEADERS -->
      <kendo-grid-checkbox-column [width]="25" [showSelectAll]="true"></kendo-grid-checkbox-column>
      <!-- CHECKBOX -->

      <kendo-grid-column *ngFor="let col of columns" [field]="col.fieldname" [title]="col.displayedname" [width]="col.width" [hidden]="col.hidden">

      </kendo-grid-column>
    </kendo-grid>
 </ng-container>

I have a Kendo date range setup as follows:

<kendo-daterange>
    <kendo-dateinput 
       formControlName="trDateTime"
       kendoDateRangeStartInput 
       autoCorrectOn="blur"
       (valueChange)='updateFormTime()'>
    </kendo-dateinput>
    <kendo-dateinput 
       formControlName="trTillDateTime"
       kendoDateRangeEndInput
       autoCorrectOn="blur"
       (valueChange)='updateFormTime()'>
    </kendo-dateinput>
  <kendo-daterange-popup (close)="onDateRangePopUpClosed()" #dateRangeModal></kendo-daterange-popup>
</kendo-daterange>

And we're trying to handle the date input using the following function

export function updateFormTime(formGroup: FormGroup) {
  const formControls = formGroup.controls;

  const trDate = new Date(formControls['trDateTime'].value);
  const trTillDate = new Date(formControls['trTillDateTime'].value);
  
  let startTime: Date;
  let endTime: Date;

  startTime = DateHelper.timeToDate(formControls['fcfsFrom'].value, trDate);
  endTime = DateHelper.timeToDate(formControls['fcfsTo'].value, trDate);

  if (startTime == null) {
    startTime = new Date(0, 0, 0, 0, 0, 0, 0);
  }

  if (endTime == null) {
    endTime = new Date(0, 0, 0, 0, 0, 0, 0);
  }

  const trDateTime = new Date(trDate.getFullYear(), trDate.getMonth(), trDate.getDate(), startTime.getHours(), startTime.getMinutes(), startTime.getSeconds());
  const trTillDateTime = new Date(trTillDate.getFullYear(), trTillDate.getMonth(), trTillDate.getDate(), endTime.getHours(), endTime.getMinutes(), endTime.getSeconds());

  formGroup.patchValue({
    trDateTime: trDateTime,
    trTillDateTime: trTillDateTime,
  });
}

The problem is that when the user goes to select a start date that's later than the end date, it only updates the end date when it should update the start date. The autoCorrectOn directive handles that, and it does if I disable the updateFormTime function but we need that function and it doesn't work if I leave it in there. Not having much luck finding the precedence between the blur that the autoCorrectOn directive follows and valueChange.  

The problem is that we need to modify the date values to include times from other controls.  It appears that the patchValue call is firing the valueChange on the date inputs when I do this and it messes up the autoCorrecOn function.

Thanks in advance.

Hello

starting with

I am having trouble dynamically loading kendo-datepicker-messages onto a projected kendo-datepicker. My current approach is to 

get a references to the ng-content and ng-template that will hold the kendo-datepicker like 

Hello. In chart series item tooltip. I had create Scatter chart. When I hover on point I can show tooltip only with xField, yField with format property or from tooltip template with let-value. But I have big array with other fields. which I would like to show. Also I would like to have index or let-index in tooltip template. 

Thank you.

Hi,

Is it possible to add a row at a specified index in the grid?

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-template-forms/#toc-adding-records

In the documentation, the add row only inserts a row at the top of the grid.

I would like to achieve something similar:

If I click on the custom add button the new row editor appears at a predefined index in the grid.

Thanks,

Balazs

HI, I try to add Kendo Angular on my Angular13 project. 

last time I do that was in a erlier version of Kendo, but now everyting is different.

On my home page I just add some Kendo test component Button, ComboBox, DropDown.

First I add dependency manually

npm install --save @progress/kendo-angular-dropdowns @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-angular-treeview @progress/kendo-angular-inputs @progress/kendo-angular-intl @progress/kendo-drawing @progress/kendo-angular-common @progress/kendo-licensing

then I add the  default theme

# Default theme
npm install --save @progress/kendo-theme-default

 then I add my licence and activated it

npx kendo-ui-license activate

Now In my home module I add these import:

import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

then Add the componement

<button kendoButton>Browse</button>
               
<div class="example-wrapper">
     <p>T-shirt size:</p>
     <kendo-dropdownlist [data]="listItems"> </kendo-dropdownlist>
     <p>Test</p>
     <kendo-combobox [data]="listItems" [allowCustom]="allowCustom"></kendo-combobox>
</div>       

No errors, but something is missing the component do not draw itself correctly. 

For example, the drop-down list appears on the upper left screen and all visual aspect are missing. (no border, no arrow, etc.)

We use actively Tailwind in this application. CSS conflict from Kendo Vs Tailwind?

Any idea?