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?

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