The directive `kendoGridColumnChooserTool` does not work correctly when having columns which are grouped. See this example: https://stackblitz.com/edit/angular-r9duqpcn?file=src%2Fapp%2Fapp.component.ts

1. It shows that 0 items are selected ("0 Selected items") - This is incorrect because all columns are selected by default. In the example above, I would expect it shows that 4 items are selected.
2. When unselecting an item in the list (popup), it does not actually hide any column.
3. When using directive `kendoGridToolbarTemplate` with `kendo-grid-column-chooser` component, it works as expected. I would expect that `kendoGridColumnChooserTool` directive would work (behave) exactly the same way.

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  KENDO_GRID,
  KENDO_GRID_EXCEL_EXPORT,
  KENDO_GRID_PDF_EXPORT,
} from '@progress/kendo-angular-grid';
import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
import { KENDO_LABELS } from '@progress/kendo-angular-label';
import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
import { Product } from './model';
import { products } from './products';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [
    FormsModule,
    KENDO_GRID_EXCEL_EXPORT,
    KENDO_GRID_PDF_EXPORT,
    KENDO_GRID,
    KENDO_BUTTONS,
    KENDO_TOOLBAR,
    KENDO_LABELS,
    KENDO_INPUTS,
  ],
  template: `
    <kendo-grid
      [kendoGridBinding]="products"
      [pageSize]="5"
      [pageable]="true"
      [sortable]="{ mode: 'multiple' }"
      [style.width.%]="gridWidth"
    >
      <ng-template kendoGridToolbarTemplate position="bottom">
        <kendo-grid-column-chooser></kendo-grid-column-chooser>
      </ng-template>

      <kendo-toolbar overflow="scroll">
        <kendo-toolbar-button kendoGridColumnChooserTool></kendo-toolbar-button>
      </kendo-toolbar>

      <kendo-grid-column-group title="TestA">
      <kendo-grid-column
        field="ProductName"
        title="Product Name"
      ></kendo-grid-column>
      </kendo-grid-column-group>

      <kendo-grid-column-group title="TestB">
      <kendo-grid-column
        field="UnitPrice"
        filter="numeric"
        title="Price"
      ></kendo-grid-column>
      <kendo-grid-column
        field="Discontinued"
        filter="boolean"
        title="Discontinued"
      ></kendo-grid-column>
      <kendo-grid-column
        field="UnitsInStock"
        filter="numeric"
        title="Units In Stock"
      ></kendo-grid-column>
      </kendo-grid-column-group>
    </kendo-grid>
  `,
  styles: [
    `
      .example-info {
        background: rgba(83, 146, 228, 0.1);
        border-radius: 2px;
        margin: 10px auto 10px auto;
        padding: 15px;
        border-left: 4px solid #5392e4;
        font-size: 14px;
      }
    `,
  ],
})
export class AppComponent {
  public gridWidth: number = 100;
  public products: Product[] = products;
}

Should be useful to decide where to align every single button of the toolbar center/left/right (or at least every button in the toolbar left or right).

This feature should be granted combined with the overflow option, in order to have a responsive behavior.

Hi, 

Please provide a feature like the following: https://demos.telerik.com/aspnet-ajax/scheduler/examples/creatingappointmentswithdraganddrop/defaultcs.aspx

Thanks and regards 

Anto

If you expand a tree node with 1000 items in it, and that tree has an ng-template the performance is very poor. It takes 7 seconds on my machine, see here https://www.telerik.com/forums/slow-treeview-with-large-datasets

Please add virtualisation to the TreeView so that not so many DOM elements (and therefore ng-templates) need to be created.

It might be a formatting issue on my end

First of all, thank you for providing the state management feature. For me it's one of the most important features of a grid component.

But unfortunately it fails to restore the columns state. This is because each time a grid component and it's columns are instantiated, new IDs are created for the columns. When loading state the columns are identified by their IDs.

When a column is persisted with e.g. id 'k-grid-column-1' and the grid will be destroyed and re-created, then the new column ID is not identical with the old one. Thus restoring the column's state will fail.

Please have a look to this StackBlitz example: https://stackblitz.com/edit/angular-vauqyshn?file=src%2Fapp%2Fapp.component.ts

A possible workaround is to save also the column's field property and later use it to re-map the saved id to the new id.

A better solution may be to extend the GridColumnComponent with something like a "PersistenceKey" property, which will be used for identifying a column. A directive may also work. Otherwise generating non transient unique ids for the grid columns will also work.

Best regards,
Holger

Hello,

I tried to implement this new feature : https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual#controlling-the-expanded-state-of-all-root-level-groups

You can see in the demo that if you remove all grouping, the content is now limited to 50 lines instead of displaying the whole 1000.

I found a workaround by expanding all before removing the grouping but it is not very user friendly.

If you can patch it ASAP that would be great. 

And thank you to finally have pushed this long awaited feature !

When setting the Checkbox component to disabled while the form is marked as touched, the k-invalid class is applied to the checkbox control.

That's because of the implementation of the isControlInvalid property:

public get isControlInvalid(): boolean {
    return this.control && this.control.touched && !this.control.valid;
}

According to the Angular source code:

    /**
     * A control is `valid` when its `status` is `VALID`.
     *
     * @see {@link AbstractControl.status}
     *
     * @returns True if the control has passed all of its validation tests,
     * false otherwise.
     */
    get valid(): boolean;

So valid() returns false when `status` is DISABLED.

The `isControlInvalid`property should better implemented like this:

public get isControlInvalid(): boolean {
    return this.control && this.control.touched && this.control.invalid;
}

Please check this Stackblitz: https://stackblitz.com/edit/angular-dznoe1xj?file=src%2Fapp%2Fapp.component.ts

Currently, the arrow keys can be used for navigating through the ComboBox items and making a selection.

However, since the group headers cannot be selected with the arrow keys (unlike the list items), the user cannot reach the first group header when going back up with the arrow keys in cases when the headers are not sticky: 

It would be great if the first group header can be scrolled into view when navigating back up with the arrow keys.

Please provide a template for customizing the value appearance of the DropDownList control types in the toolbar of the Editor, similar to the one available for the default DropDownList component:

• https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/templates/#toc-value-template 

At present, the only approach that can be used for configuring a value template is by implementing a custom DropDownList tool in the toolbar of the Editor:

• https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/ 

Add functionality to the Java Spring Boot sample application to support server-side data operations, such as sorting, filtering, and pagination. Currently, the demo uses the process method to do the operations on the client.

https://github.com/telerik/kendo-angular/tree/master/examples-standalone/kendoangular-java-integration

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:

Hello,

we have the need, to implement custom timeline views for the scheduler which shows a month and quarter timeline view.

This is currently not possible because the TimelineViewModule is not exporting the TimelineMultiDayViewComponent.

We request, to add this component to the exports and provide an updated dev version of the scheduler published to npm so that we can continue soon.

Thank you!

Best regards

Julian Hochstetter