Dear forum/support,

I'm trying to figure out how to deselect the last item that was selected in my filtered autocomplete list.

To more easily explain the situation I'm facing I edited the example Stackblitz and captured a small video of the issue.

Stackblitz: https://stackblitz.com/edit/angular-9eoskl?file=app%2Fapp.component.ts

You can find the video attached as a ZIP as I couldn't upload the mp4.

The video shows how I auto-select "Volleyball" from the autocomplete values after typing 'volley'. When I type 'ball' I need to have the internal state which item was selected last to be reset inbetween so that I can hit 'Enter' to select 'Baseball'. But instead 'Volleyball' is still selected and pressing 'Enter' will deselect it.

I was hoping that the new focusItemAt method would allow me to do such a thing by calling focusItemAt(null) in an event handler that listens on the autocomplete's 'closed' event. However the focusItemAt method does not really do what I was expecting (still don't know what it really does).

Best regards

Philip

Hi, we use Tailwind themes in our project.

Does someone use Tailwind and SCSS from Kendo to apply theme correctly?

Hi Team,

As far as I can see, the ability to use custom templates in headers is applicable to Day, Week, WorkWeek, and Timeline view: https://www.telerik.com/kendo-angular-ui/components/scheduler/api/DateHeaderTemplateDirective/

Is there a similar possibility for a Month view?

Thanks,

Rita

I tried to use the datepicker component and are having issues/errors

at first it asked me to add the angular localize package, which I did and solved the first issue.

But the it started throwing another error being'

core.js:6486 ERROR NullInjectorError: R3InjectorError(AppModule)[PopupService -> PopupService -> PopupService]: 
  NullInjectorError: No provider for PopupService!
    at NullInjector.get (core.js:11108)
    at R3Injector.get (core.js:11275)
    at R3Injector.get (core.js:11275)
    at R3Injector.get (core.js:11275)
    at NgModuleRef$1.get (core.js:25340)
    at Object.get (core.js:25054)
    at lookupTokenUsingModuleInjector (core.js:3342)
    at getOrCreateInjectable (core.js:3454)
    at Module.ɵɵdirectiveInject (core.js:14744)
    at NodeInjectorFactory.DatePickerComponent_Factory [as factory] (index.js:6790)

Do I need to make my own popupservice ? I was under the assumption that the kendo installs added all dependencies.

Hi

I have problem with your sample in Angular12

 error NG8002: Can't bind to 'allowCustom' since it isn't a known property of 'kendo-combobox'

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/custom-values/

Could you help me

Thanks

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.