Hi Telerik,

It would be great if we can add Select All functionality as a built-in feature of the MultiSelect component. It is especially useful when working with checkboxes, e.g., https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates/#toc-rendering-item-checkboxes.

Hi I want to change the order of the selected items in a multiselecte. I know we have sortable to drag and drop, but can we do that inside a multiselect?

When we choose several items from the dropdown in a multiselecte component, the order of the tags is the same with how we choose from the dropdown and we can not change the order. Is there a way to change the display order by drag and drop?

Currently the kengoMultiSelectSummaryTag only supports a number as its input, which enables switching to summary mode if the number of selected items is greater than the specified value.

It would be nice to add an option for dynamic mode which will be based on the available space for the control and will automatically switch to summary mode if there is not enough  space for displaying all the items.

See the screenshots to illustrate how it might look like.

Thanks,

Shai.

I would like to request sortability and drag/drop reordering for the MultiSelect component. 

The drag n drop action should be initiated from clicking and dragging an icon on the left on the left side of every tag template. Dragging the tag text itself should not start the drag n drop action. Attached is a screenshot of the appearance of our tokens; want the user to be able to click on the icon on the left to initiate a drag event.

Currently keyboard navigation in Multiselect is a bit limited in comparison to the same functionality in Multiselect in Kendo UI for jQuery. 

It would be great if the shortcuts in Multiselect in Kendo for Angular matched shortcuts in Multiselect in Kendo UI for jQuery.

Add maxSelectedItems property to the Multiselect. 

Disable individual choices from deletion on multi-select in case there is a value that must always be selected.

Currently, when the data of the MultiSelect is grouped, checkboxes are disabled.

You can still use MultiSelectTree instead, however, it doesn't look the same (mainly because its hierarchical and doesn't have group headers).

Please provide option to set maximum selected items in multi-select.

Same as maxSelectedItems in jQuery version.

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

Currently, the MultiSelect component indicates an item is selected with a dedicated CSS class - k-selected. This CSS class styles the item so that the whole row in the MultiSelect popup appears selected.

However, if checkbox selection is enabled, the k-selected class no longer appears - the only indication that an item is selected, remains the checkbox.

This request calls for an option to have both types of indication available and independently configurable.

Providing data for an item's selected state for use in a custom template is also desirable.

Hi,

When "popupSettings.appendTo" is set to 'component' then the value binding is broken and the "valueChange" event is not triggered.  It is not possible to select an item and the underlaying model is not updated.

Issue can be reproduced in this StackBlitz: https://stackblitz.com/edit/angular-f76kqf?file=src/app/app.component.ts

Regards

Holger

Hi, 

Optimize the internal selection mechanism to enhance overall performance and prevent browser hangs when a large number of items are selected. This enhancement will significantly improve the user experience and ensure smooth functionality within the application.

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

In certain scenario, Popup of the Multiselect component is not quite opened on the correct position. I did not check but this issue is probably reproducible for other dropdown components  (such as Combobox, DropdownList, etc) as well.

It seems to me this happens when:

1. A width greater than the widht of the input is set
2. AND input is too close to the bottom-right edge of the window and as a result popup cannot be shown below the input element but above it instead
   

THEN in the very first render, the popup is not position quite right and moves a bit in the next render.

Precise steps to reproduce problem:

1. Make sure to use minimal reproducible example attached below.
2. Click and hold left button of a mouse inside the MultiSelect Component.
3. The popup should open up and be positioned above the input but not being quite aligned right with the window nor the input.
4. Release the left button of a mouse.
5. The popup recalculates its position.
6. Problem: The popup should have been positioned correctly when opened (NOT after releasing mouse button).

Minimal reproducible example:

import { Component, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  KENDO_DROPDOWNS,
  PopupSettings,
} from '@progress/kendo-angular-dropdowns';
import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
import { KENDO_LABELS } from '@progress/kendo-angular-label';

@Component({
  selector: 'my-app',
  imports: [FormsModule, KENDO_DROPDOWNS, KENDO_LABELS, KENDO_INPUTS],
  styles: [
    `
      .app-layout {
        padding: 1rem;
        height: 800px;
        display: grid;
        grid-template-columns: 1fr 230px;
      }

      .sidebar {
        height: 100%;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .unrelated-sidebar-content {
        height: 200px;
      }

      .box {
        border: 1px solid grey;
      }
    `,
  ],
  template: `
    <div class="app-layout">
      <main class="box"> Main Content </main>
      <aside class="box sidebar">
        <div class="box unrelated-sidebar-content">Imagine some other content here</div>
        <kendo-formfield showHints="always">
          <kendo-label text="Favorite sport:">
            <kendo-multiselect
              [data]="listItems"
              [(ngModel)]="value"
              [popupSettings]="popupSettings"
            ></kendo-multiselect>
          </kendo-label>
          <kendo-formhint
            >Add your favourite sport, if it is not in the
            list.</kendo-formhint
          >
        </kendo-formfield>
      </aside>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  public listItems: Array<string> = [
    'Width Must Be Greater Than Width Of The Multiselect Component Because We Have Super Long Text',
    'When List Is Open, It Moves Slightly To The Right',
    'It Is Not Possible To Align Popup With The Right Edge',
    'It Is Not Possible To Set "anchorAlign" and "popupAlign"',
  ];
  public value: any = [];
  // @see https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning
  public popupSettings: PopupSettings = { width: 500 };
}

Alignment to the right

I believe, this could be simply solved if we were able to configure "anchorAlign" and "popupAlign" as described here: https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning  .

In addition, it would be a nice feature in general, to be able to align popup with the element's right edge. Currently, this is pretty much hard coded:

        const horizontalAlign = this.direction === "rtl" ? "right" : "left";
        const anchorPosition = <Align>{ horizontal: horizontalAlign, vertical: "bottom" };
        const popupPosition = <Align>{ horizontal: horizontalAlign, vertical: "top" };
        const appendToComponent = typeof this.popupSettings.appendTo === 'string' && this.popupSettings.appendTo === 'component';

        this.popupRef = this.popupService.open({
            anchor: this.wrapper,
            anchorAlign: anchorPosition,
            animate: this.popupSettings.animate,
            appendTo: this.appendTo,
            content: this.popupTemplate,
            popupAlign: popupPosition,
            popupClass: this.listContainerClasses,
            positionMode: appendToComponent ? 'fixed' : 'absolute'
        });

From the code above, it is clear that the "horizontalAlign" cannot be really configured. In simple terms, you could use "left" alignment as a default intead of it being hard-coded like that; and prefer alignment specified in the "popupSettings".

Please, let me know if something needs to be further clarified.

I know this can be done with the change event but that is just a workaround. Would use this from UI for angular.

We need single tagmode option for multiselect dropdown property in Angualr 2