We have a problem whereby the paging dropdown is displaying the number list dropdown on all views:

Does anyone have any suggestions as to what might be happening here? I assume the dropdown should only display on small screens, not on large.

I have multiple grids in a view and when the user drags on the scrollbar of one grid I want it to automatically scroll the other grids exactly the same amount up or down.

So in my ngAfterViewInit() method I have the following:

document.querySelector(".k-grid .k-grid-content").addEventListener("scroll", (e) => {

console.log('scroll event', e);

}

The idea is that I can then capture this event and pass it to the other grids so they can scroll too. However this isn't working as the event listener doesn't fire. Can you suggest a way to make this work?

cssClass not working in kendo-menu-item (cssStyle works)

HTML:

<kendo-menu>
  <kendo-menu-item text="1" cssClass="x">
    <kendo-menu-item text="1.1"></kendo-menu-item>
    <kendo-menu-item text="1.2"></kendo-menu-item>
  </kendo-menu-item>
</kendo-menu>
LESS:
.x {
  background-color: red;
}
Module:
import { MenusModule } from '@progress/kendo-angular-menu';

const telerikModules = [
  ...
MenusModule,
...
];

@NgModule({
imports: telerikModules,
exports: telerikModules,
})
export class TelerikModule {
}
 

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?