momentjs is a widely used date library which makes handling dates much more comfortable, and all Date components should support it

It would be nice to have access to a valueChange event in the autocomplete similar to the other dropdowns. This way when binding against arrays of complex objects, we could receive the whole object selected instead of the single value property out of it.

In the Kendo ComboBox, the selection part is not working with shadow dom.

1. Reproduction:

Please look at the below links,

With ShadowDOM:

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

Without ShadowDOM:

An example is provided in the below link under 'ENABLING SUGGESTION' section

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

Expected Result:

When user type 'C', the first word starts with C in the list 'Croatia' is suggested and 'roatia' is selected. But as soon as I type 'y' next to 'c', the combo box is suggesting 'Cyprus' and 'prus' should be selected

Actual Result:

As soon as I type the first word starts with C in the list is 'Croatia' is populated in the Combobox and 'roatia' is NOT selected. So the user cannot type ‘y’ in this case. But the user wants to select ‘CYPRUS’ but 'Croatia' is filled as the input and Cyprus is not suggested.

I have attached the video for the difference between with/without shadow dom.

Also, If you need any additional information, I have created a support ticket:

Allow defining buttons in ButtonGroup component using NgTemplateOutlet:

  <kendo-buttongroup>
    <ng-container *ngTemplateOutlet="buttonsList"></ng-container>
  </kendo-buttongroup>

  <ng-template #buttonsList>
    <button kendoButton size="small">Button 1</button>
    <button kendoButton size="small">Button 2</button>
    <button kendoButton size="small">Button 3</button>
  </ng-template>

So far, the ButtonGroup doesn't appear when using this markup.

Ran this on StackBlitz 

import { Component } from '@angular/core';
import {
  LegendLabelsContentArgs,
  SeriesClickEvent,
} from '@progress/kendo-angular-charts';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart
      (plotAreaClick)="onClick($event)"
      [transitions]="false"
      title="World Population by Broad Age Groups"
    >
      <kendo-chart-legend position="bottom"></kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="donut"
          [data]="pieData"
          field="value"
          categoryField="category"
          explodeField="exploded"
          [labels]="{ visible: true, content: labelContent }"
        >
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `,
})
export class AppComponent {
  public pieData: Array<{
    category: string;
    value: number;
    exploded: boolean;
  }> = [
    { category: '0-14', value: 0.2545, exploded: false },
    { category: '15-24', value: 0.1552, exploded: false },
    { category: '25-54', value: 0.4059, exploded: false },
    { category: '55-64', value: 0.0911, exploded: false },
    { category: '65+', value: 0.0933, exploded: false },
  ];

  constructor(private intl: IntlService) {
    this.labelContent = this.labelContent.bind(this);
  }

  public labelContent(args: LegendLabelsContentArgs): string {
    return `${args.dataItem.category} years old: ${this.intl.formatNumber(
      args.dataItem.value,
      'p2'
    )}`;
  }

  public onClick(event: any): void {
    console.log('Click');
  }
}

When the event is seriesClick, it works as expected, and if I change the type to bar, it works as expected, but when it's as shown as above, the onClick event isn't triggered. 

As I have donuts/pies that might not have data in it, I needed to use plotAreaClick (which I have done for the bar charts)

Thanks,

Please support out of the box support for modality. I know there is how to, but out of the box, for such basic feature seems reasonable.

Also suggested how to doesn't work for windows initialised through service.

This would also align Angular Window component with KendoUI Window component modality.

I would like to move dialog (because there is some content behind I need to see in order to fill form in dialog).

It would also be great if it could be resizable. If you have an input component inside dialog, you could set width to 100%.

Please provide row virtualization as addition to the current virtual scrolling functionality.

Current behavior
Virtual scrolling is currently tied to the pageSize. This is not always desirable as page size can be much higher than the visible area to optimise for network latency.

For example if the pageSize is 200 rows and the grid is only 10 rows high we'll be rendering 190 more rows than needed at initialization time.

Expected behavior
Virtual scrolling should include an option to render only the visible rows at any given time.

I am using below piece of code inside <kendo-grid>. Here, I am using a dropdown and kendo excel export button inside toolbar. dropdown is in left and button is right aligned. Earlier, it was working till Kendo 18. When I upgraded to kendo 19, it stopped working. 

Root Cause is kendo-dropdownlist contains an array button. When we click on button to expand dropdown, excel export button gets the focus and dropdown loses focus. When we click on dropdown button, 'k-focus' class is applied on 'excel-export'. Because of this, dropdown is not working. 

Code:

<ng-template kendoGridToolbarTemplate>

        <div class="toolbar-container" style="display: flex; align-items: center; gap: 16px; width: 100%;">

            <!-- Dropdown Wrapper -->

            <div style="flex-shrink: 0;">

                <kendo-dropdownlist [data]="data"

                    [(ngModel)]="someField" [valuePrimitive]="true" (valueChange)="perform()"

                    [popupSettings]="{ appendTo: 'component' }" style="width: 175px;">

                </kendo-dropdownlist>

            </div>

            <!-- Spacer to push button to right -->

            <div style="flex-grow: 1;"></div>

            <!-- Excel Export Button -->

            <div style="flex-shrink: 0;">

                <button type="button" kendoGridExcelCommand>Export</button>

            </div>

        </div>

    </ng-template>

I used this example to replace the built-in icons of the Kendo UI components. I was able to modify all the icons except the x icon in the Kendo UI Dialog and Window component. The x icon in the Kendo UI ComboBox was replaced as well.

The issue can be seen in this StackBlitz example.

./node_modules/@progress/kendo-angular-layout/fesm2022/progress-kendo-angular-layout.mjs:19:0-75 - Error: Module not found: Error: Can't resolve '@progress/kendo-angular-progressbar' in 'C:\LiveMRIProjects\MRI.AgoraInsightsAnywhere-Angular\node_modules\@progress\kendo-angular-layout\fesm2022'

./node_modules/@progress/kendo-angular-layout/fesm2022/progress-kendo-angular-layout.mjs:22:0-56 - Error: Module not found: Error: Can't resolve '@progress/kendo-angular-intl' in 'C:\LiveMRIProjects\MRI.AgoraInsightsAnywhere-Angular\node_modules\@progress\kendo-angular-layout\fesm2022'

this is the error is coming

when we add kendo thing into module.ts file

If the pane is scrolled, the dark highlight shown when grabbing the splitter is misaligned like this:

Stackblitz repro can be found here

Provide an option to focus programmatically a multiselect item, in order to prevent the popup list from scrolling when the last item is selected.

Here is an example:

https://stackblitz.com/edit/angular-qpbow1-awhxbr?file=app%2Fapp.component.ts

Hi,

https://stackblitz.com/edit/angular-dadm5ywe?file=src%2Fapp%2Fapp.component.ts

Please select the top-most button, then press TAB until the focus is on the button in the last grid cell.
Then press tab again => the focus moves to the last cell itself.
Press tab again => the focus moves back to the last button. 
=> here we got into an endless loop, you cannot navigate to the button below the grid.

Interestingly, you can leave the grid if you navigate backwards with shift+tab.

best regards,

Michael

Proposal

CellCloseEvent<T> should provide dataItem: T

Why

Currently the CellCloseEvent dataItem is typed as any. This could be the default, but adding a generic type here would allow strong typing in the event handler.

There appears to be a allowedExtensions (Whitelist) but not a disallowedExtensions(Blacklist) link to docs

  public uploadRestrictions: FileRestrictions = {
    allowedExtensions: ['.jpg', '.png'],
  };

is it possible to add aria-label to kendo-multiselect? ( and it should be multiselect responsibility to propagate it to internal input )

Hi Team,

Allow the ability to change the styling on the inner input of the component. This will allow developers easy access to change the placeholder styling based on condition or overall input element. Currently, a custom implementation like the following can be used:

https://stackblitz.com/edit/angular-pzv7zc?file=app/app.component.ts

or with a directive:

https://stackblitz.com/edit/angular-pzv7zc-v4te8u?file=app%2Fapp.component.ts

Thanks.