Hi All

I have old licence expired on Jul 24, 2021 . I will start new project with Angular 16 but my old licence is not matching with Angular CLI version. When i added my new project my licence its always showing invalid licence ... 

On my old project and version i can compatible with these version but not appropriate with Angular cli 16.1.8 

 "@progress/kendo-angular-barcodes": "^1.0.0",
    "@progress/kendo-angular-buttons": "^6.0.0",
    "@progress/kendo-angular-charts": "^5.4.0",
    "@progress/kendo-angular-common": "^2.0.0",
    "@progress/kendo-angular-conversational-ui": "^4.0.0",
    "@progress/kendo-angular-dateinputs": "^6.0.3",
    "@progress/kendo-angular-dialog": "^5.2.3",
    "@progress/kendo-angular-dropdowns": "^6.0.2",
    "@progress/kendo-angular-excel-export": "^4.0.4",
    "@progress/kendo-angular-filter": "^0.1.6",
    "@progress/kendo-angular-gauges": "^4.1.3",
    "@progress/kendo-angular-grid": "^6.1.3",
    "@progress/kendo-angular-icons": "^11.2.0",
    "@progress/kendo-angular-indicators": "^1.1.3",
    "@progress/kendo-angular-inputs": "^8.0.9",
    "@progress/kendo-angular-intl": "^3.1.3",
    "@progress/kendo-angular-l10n": "^3.0.4",
    "@progress/kendo-angular-label": "^3.1.3",
    "@progress/kendo-angular-layout": "^6.6.0",
    "@progress/kendo-angular-listview": "^2.0.3",
    "@progress/kendo-angular-messages": "^1.49.0",
    "@progress/kendo-angular-notification": "^3.0.5",
    "@progress/kendo-angular-pdf-export": "^3.0.4",
    "@progress/kendo-angular-popup": "^4.0.6",
    "@progress/kendo-angular-progressbar": "^2.0.4",
    "@progress/kendo-angular-treeview": "^6.0.2",
    "@progress/kendo-angular-upload": "^8.0.2",
    "@progress/kendo-data-query": "^1.5.6",
    "@progress/kendo-drawing": "^1.1.2",
    "@progress/kendo-file-saver": "^1.1.1",
    "@progress/kendo-licensing": "^1.0.0",
    "@progress/kendo-svg-icons": "^1.4.0",
    "@progress/kendo-theme-default": "^4.44.0",
    "@progress/kendo-theme-material": "^5.3.1",

Can you please suggest which version is compatible with my licence and angular cli 16.1.8

Thanks

I’m using Kendo PDFViewer ver 13.1.0, and this is what my codes look like:

As you can see I didn’t set any toolbar on it and by default it should show all the toolbar options that is included by the package, 

But the issue here is that if the user start to search using the ‘search’ from toolbar option, it is somehow broken as you can see in the picture. The detected key is not highlighted properly.

Can someone assist me with this concern?

Thanks!

We are trying to make certain field (title) read-only in the Gantt task editor. Below is the sample code

  private createFormGroup(dataItem: GanttTask): FormGroup {
    return new FormGroup({
      id: new FormControl(dataItem.id),
      start: new FormControl(dataItem.start),
      end: new FormControl(dataItem.end),
      completionRatio: new FormControl(dataItem.completionRatio),

      title: new FormControl({value:dataItem.title, disabled:true}),
     //title: new FormControl(dataItem.title),    });

  }

Basically this change makes the field not display at all. 

Hi 

I've used your jQuery version of the Scheduler in an MVC app where I utilised a feature where you can drag and drop from a list view to the scheduler to create events.

Is this functionality available in the Angular version of the component? If there is could you supply a link to a sample implementation.

Also is the a way to create bespoke views again similar to the feature in jQuery version of the scheduler component. e.g. I would like to create a rolling week view (where the view starts at today -1 and ends after a specified number of days) and a rolling work week which is similar but skips weekends)

Many Thanks

In the kendo grid there is a "size" property that can be set at runtime. We want to expose this option to the user. This means the value can change at runtime. This works as expected and changing the value at runtime to "small" makes the rows in the grid more compact.

The problem now arises when we enable virtual scrolling. When using this feature the property "rowHeight" has to be set in order for the virtual scrolling to work properly. Changing the "size" property obviously changes the row height. Therefore we tried to also update it at runtime. However this change does not seem to affect the grid. The virtual scrolling is still broken.

Is there a way to change the "rowHeight" property at runtime and get the changes applied to virtual scrolling?

I created a minimal StackBlitz based on your local virtual scrolling example. It changes the size and rowHeight in the ngAfterViewInit-method:
Kendo Grid dynamic row height - StackBlitz

In our application we are using angular 14 and the kendo control  tree-list , our requirement is to set the focus on the next node after we delete any node . Is there any possible method or way out to set focus.

For example If we delete "BW Input Template" then focus should be set on "Report Template" (there can be any number of node in BW Input Template folder ) and same for any node within the folder if deleted then focus should set to next node within the folder also I need the  focused node data.

The code sample and data is below

<kendo-treelist
  class="kendo-treelist"
  [kendoTreeListFlatBinding]="data"
  #directive="kendoTreeListFlatBinding"
  parentIdField="wrkdocParentoid"
  idField="wrkdocOid"
  kendoTreeListExpandable
  kendoTreeListSelectable
  [height]="1200"
  [rowReorderable]="true"
  (cellClick)="onCellClick($event)"
>
  <kendo-treelist-rowreorder-column
    [width]="25"
  >
  </kendo-treelist-rowreorder-column>
  <kendo-treelist-column 
    [expandable]="true" 
    title="Name" 
    [width]="250"
  >
    <ng-template 
      kendoTreeListCellTemplate let-dataItem let-rowIndex="rowIndex"
    >
      <span class="k-icon k-i-folder" *ngIf="isFolder(dataItem)"></span>
      <span> {{ getTemplateName(dataItem) }}</span>
    </ng-template>
  </kendo-treelist-column>
  <kendo-treelist-column
    field="wrkdocUdid"
    title="ID"
    [width]="140"
  ></kendo-treelist-column>
</kendo-treelist>

DATA set:

I am trying to create a custom component that wraps the Kendo Editor so I can display a label and validation messages all within the same component. The goal is to make it reuseable and self-contained. The majority of it is working except for clearing out the form. When reset is called on the parent form (and then the form control) the backing value is reset to null but the display value remains the same. 

The code for the custom component is below. I feel like either I'm missing something or the implementation is not correct. Thanks in advance.

rich-text.component.ts

import { Component, forwardRef, Injector, Input, OnDestroy, OnInit } from '@angular/core';
import { ControlValueAccessor, FormControl, FormControlDirective, FormControlName, FormGroupDirective, NgControl, NgModel, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator, Validators } from '@angular/forms';
import { PaletteSettings } from '@progress/kendo-angular-inputs';
import { ERROR_MESSAGES } from 'core/constants';
import { noWhitespaceValidator } from 'core/helpers/customValidators';
import { HTMLUtilities } from 'core/services/utility/html-utilities.service';
import { Subscription } from 'rxjs';

@Component({
    selector: 'rich-text',
    templateUrl: './rich-text.component.html',
    styleUrls: ['./rich-text.component.scss'],
    providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          multi: true,
          useExisting: forwardRef(() => RichTextComponent)
        },
        {
            provide: NG_VALIDATORS,
            useExisting: forwardRef(() => RichTextComponent),
            multi: true
          }      
      ]
  })
  
export class RichTextComponent implements OnInit, OnDestroy, ControlValueAccessor, Validator {

    @Input() label: string = 'Please supply label';
    @Input() placeholder: string = 'Please provide a value';

    public paletteSettings: PaletteSettings = {
        palette: 'basic'
    }

    formControl = new FormControl('', [Validators.required, noWhitespaceValidator]);
    subs: Subscription[] = [];
    _htmlUtilities: HTMLUtilities;
    onChange: any = () => {};
    onTouch: any = () => {};

    constructor(htmlUtilities: HTMLUtilities) {
        this._htmlUtilities = htmlUtilities;
    }

    ngOnInit(): void {

    }

    ngOnDestroy(): void {
        this.subs.forEach((s) => s.unsubscribe());
    }

    writeValue(value: string): void {
        if (value) {
            this.formControl.setValue(value);
        }

        if (value === null) {
            this.formControl.reset();
            this.formControl.setValue('');
        }
    }

    registerOnChange(fn: any): void {
        this.subs.push(
            this.formControl.valueChanges.subscribe(fn)
          );
    }

    registerOnTouched(fn: any): void {
        this.onTouch = fn;
    }

    validate(_: FormControl) {
        return this.formControl.valid ? null : this.formControl.errors;
    }

    getErrorMessage() {
        if (this.formControl.errors['required']) {
            return ERROR_MESSAGES.REQUIRED;
        }
        if (this.formControl.errors['whitespace']) {
            return ERROR_MESSAGES.WHITESPACE;
        }
    }
}

rich-text.component.html

<div>
  <kendo-label [text]="label" class="rich-text-label"></kendo-label>
    <kendo-editor [formControl]="formControl" (blur)="onTouch()"
      [placeholder]="placeholder" [pasteCleanupSettings]="_htmlUtilities.pasteCleanupSettings">
        <kendo-toolbar>
          <kendo-toolbar-buttongroup>
            <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
          </kendo-toolbar-buttongroup>
          <kendo-toolbar-colorpicker
            kendoEditorForeColor
            [paletteSettings]="paletteSettings"
          ></kendo-toolbar-colorpicker>
          <kendo-toolbar-colorpicker
            kendoEditorBackColor
            [paletteSettings]="paletteSettings"
          ></kendo-toolbar-colorpicker>
          <kendo-toolbar-buttongroup>
            <kendo-toolbar-button
              kendoEditorInsertUnorderedListButton
            ></kendo-toolbar-button>
            <kendo-toolbar-button
              kendoEditorInsertOrderedListButton
            ></kendo-toolbar-button>
          </kendo-toolbar-buttongroup>
          <kendo-toolbar-buttongroup>
            <kendo-toolbar-button
              kendoEditorCreateLinkButton
            ></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>
          </kendo-toolbar-buttongroup>
        </kendo-toolbar>
      </kendo-editor>
  <mat-error *ngIf="formControl.invalid">
    {{getErrorMessage(formControl) | translate}}
  </mat-error>
</div>

The drawer is working fine when I click to select items, but there are cases where I want to select an item programmatically instead of a mouse click.

My drawer's items come from an array of DrawerItem objects:

[items]="drawerItems"

In the .ts file, I've tried both of these ways to change the selected item:

drawerItems[index].selected = true;

drawer.items[index].selected = true;

I can see from console.log statements that both are adding a "selected = true" property to the correct DrawerItem, but it has no effect in the template.  Is there a better way to achieve this?