I'm trying to check if there are any changes in a form so that I can warn the user of changes, but when setting the model and binding a null value to the MaskedTextbox it changes it to an empty string and the user gets the message that something has changed. Is there a way to prevent the MaskedTextbox from doing that?

Hello,

I am using a TreeList with a custom cell editor defined in a kendoTreeListEditTemplate. In my code I'm switching between different editors for different scenarios, but here's a basic example with just one:

        <ng-template kendoTreeListEditTemplate
             let-column="column"
             let-formGroup="formGroup">
             <kendo-numerictextbox [formControl]="formGroup.get(column.field)" [spinners]="false"></kendo-numerictextbox>
        </ng-template>

I am using the TreeListComponent.editCell function to edit the cell. Right now, the text box is not being focused, so the user has to click an additional time in order to start entering data.
How would I get the TreeList to automatically focus the editor when editCell is called?

Hello,

I'm trying to write a custom ToolBar ToolComponent with unit tests - using Angular 15.2.1 with jasmine.

My simplified component code:

import { Component, ElementRef, forwardRef, Input, TemplateRef, ViewChild } from '@angular/core';
import { ToolBarComponent, ToolBarToolComponent } from '@progress/kendo-angular-toolbar';

@Component({
  template: `
    <ng-template #toolbarTemplate>
      <span #toolbarElement>
        <h4>{{ text }}</h4>
      </span>
    </ng-template>
  `,
  providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolbarTitleComponent) }]
})
export class ToolbarTitleComponent extends ToolBarComponent {
  @Input() text = '';
  @ViewChild('toolbarTemplate', { static: true })
  public toolbarTemplate!: TemplateRef<unknown>;
  @ViewChild('toolbarElement', { static: false })
  public toolbarElement!: ElementRef;
}

with corresponding .spec file

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { RefreshService, ToolBarModule } from '@progress/kendo-angular-toolbar';

import { ToolbarTitleComponent } from './toolbar-title.component';

describe('ToolbarTitleComponent', () => {
  let component: ToolbarTitleComponent;
  let fixture: ComponentFixture<ToolbarTitleComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ToolbarTitleComponent],
      providers: [
        { provide: LocalizationService, useValue: LocalizationService },
        { provide: RefreshService, useValue: RefreshService }
        // { provide: NavigationService, useValue: NavigationService } // <--- this doesn't work, even when trying to use a spy object
      ],
      imports: [ToolBarModule]
    }).compileComponents();

    fixture = TestBed.createComponent(ToolbarTitleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

When trying to run the test, I get the following error (which is expected, since I'm not providing the navigation service in the spec):

NullInjectorError: R3InjectorError(DynamicTestModule)[NavigationService -> NavigationService]: 
  NullInjectorError: No provider for NavigationService!

Unfortunately, the NavigationService does not seem to be exported from the package definition so I don't think there's an injection token being generated by Angular, and I cannot figure out how to properly provide the NavigationService to the TestBed so my test can run without bombing.

Is there a way to do this to enable me to test these types of components?

Hi, 

I am trying to implement specific feature using kendo ui grid and MultiSelect Tree as editor template.

I tried making example within stackblitz, but unfortunately problem is that I don't have adequate data structure to make an example.

My use case is following:
I have kendo grid with multiple columns. One of these columns can have multiple elements with appropriate quantities. 
For example, column name is Furniture, and user can select multiple types of furniture but also can provide quantity of selected furniture. 

I have made kendo multiselectTree as an editor template for this column, and at the same time I used kendoMultiselectTreeNodeTemplate to add textbox to the all items in the tree. When I open editor first time and select, for example, Chairs with textbox value 4, and Tables with textbox value 1, it is perfectly fine displayed in the list. This part works fine. (multiselect shows: Chairs 4, Tables 1)

But, if I refresh page, I have no way of retrieving reference and when I open list again, I can't bind back values from tags to the textboxes in the list. Chairs and Tables are checked, but textbox remains empty.

Each row in my table is object with structure like this:
{

id: number, 
orderId: string, 
date: date,
orderedItems: [ ],
orderStatus: number

}

For example:
{
id: 24021,
orderId: 'PC-322',
date: new Date(),
orderedItems: [{itemId: 22, description: "Chair", nr: 4}, {itemId: 14, description: "Table", nr: 1}],
orderStatus: 3
}

Can you please suggest approach.

Thank you very much

I'm struggling to access this kendo-switch ID (in this case it should be A1) being passed to the generateSubscriptionArray function it seems to return undefined no matter what variation of attempts to access it I try, it also doesn't seem to show up on the $event if I try to pass this to the function.

Any assistance regarding this would be really beneficial the switch is returning the relevant true/false boolean

HTML

 
<kendo-switch
    onLabel=" "
    offLabel=" "
    formControlName="A1"
    id="A1"
    (click)="generateSubscriptionArray(userPreferenceForm.controls.A1.value,
             formcontrol id as string in this case A1 should be passed here)"
    ></kendo-switch>

TypeScript:

exportclass UserPreferencesComponent implements OnInit {
    userPreferenceForm: FormGroup;
    email_address: FormControl;

    constructor() {}

    ngOnInit(): void {
        this.userPreferenceForm = new FormGroup({
            email_address: new FormControl('', Validators.required),
            A1: new FormControl(false),
        });
    }
generateSubscriptionArray = (subscription: boolean, alertID: string): void => {
        if (subscription === true) {
            console.log(subscription, alertID);
        } else {
            console.log(subscription, alertID);
        }
    };
 

I have upgraded my Angular version from 11 to 12 and corresponding to that I have upgraded the supported Kendo version for angular 12. I am facing issue with Kendo Context Menu. Previously it used to work fine, I have added the jQuery function to dynamically add the kendo context menu on the Grid rows which will trigger on Click of the row but after upgrading the version this jQuery function does not work. I tried adding directly kendo context menu on the UI that is working so that means there is no library issue. 

Please check the code and libraries and let me know what went wrong on this jQuery function or is there any change happened recently.

$('#menu').kendoContextMenu({
                  orientation: 'vertical',
                  target: this.jqGridSelector,
                  filter: //Added classes for filtering,
                  animation: {
                    open: { effects: 'fadeIn' }
                  },
                  showOn: 'click',
                  closeOnClick: true,
                  open: (e: any) => {
                   //Adding list on context menu and showing it when click is triggered.
                  },
                  select: (e: any) => {
                   //select Function
                  },
                  close: (e: any) => {
                   //Close function
                  }
                });

I have added this above code under kendo.data.DataSource and the open function was getting triggered on row item click but after upgrade it is not happening.

Package.json

Hi,

  I am trying the code for persist columns on my computer.  I got the code from this URL:

    https://www.telerik.com/kendo-angular-ui/components/knowledge-base/persist-columns-order/

  I received the error below when I tried to run the code:

Error: src/app/app.component.ts:52:16 - error TS7053: Element implicitly has an 'any' type because expression of type '"field"' can't be used to index type 'ColumnBase'.
  Property 'field' does not exist on type 'ColumnBase'.

52         field: col["field"],
                  ~~~~~~~~~~~~

  The corresponding code is this:

//the restructured columns containing only the needed properties that will be persisted
    const restructuredColumns: ColumnFooType[] = orderedColumns.map(col => {
      const column: ColumnFooType = {
        field: col["field"],
        title: col["title"]
      };
      return column;
    });

  It looks like there is no "field" property in ColumnBase.  Does anyone know how to fix the error?

Thanks,

Taichi