Completed
Last Updated: 18 Apr 2022 13:36 by ADMIN
JT
Created on: 14 Sep 2017 16:34
Category: Kendo UI for Angular
Type: Feature Request
19
ListBox component
Add listbox component modeled from kendo ui jquery.

http://demos.telerik.com/kendo-ui/listbox/angular
7 comments
ADMIN
Martin Bechev
Posted on: 18 Apr 2022 13:36

Hi all,

I am glad to announce that the requested ListBox widget is now available as part of the built-in components of the suite. Please check it out:

https://www.telerik.com/kendo-angular-ui/components/listbox/

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

TESI
Posted on: 12 Mar 2021 10:02
Should be great to have an Angular ListBox component
ADMIN
Martin Bechev
Posted on: 06 Jan 2021 08:20

Hi Inian,

Currently, there is no Kendo UI for Angular ListBox component with the functionality of the jQuery widget as the Angular framework provides mechanisms that enable a relatively straightforward custom implementation of such functionality via templates and two-way data binding.

The closest currently available component is the Sortable component that allows for dragging items from a list and dropping them in another one, e.g.:

https://www.telerik.com/kendo-angular-ui/components/sortable/templates/

or to customize existing components via some custom implementation (for example, check out the following simple implementation of moving selected rows between two Grids):

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

Another option is to create a custom component consisting of two containers (DIVs within a DIV, UL with a list of LI elements, etc.), and several command buttons for the desired actions. Then each container can render its elements via *ngFor loop over a collection of items, and items can be moved between collections upon button clicks. Here is a simple example demonstrating this approach:

https://stackblitz.com/edit/angular-listbox?file=src/app/app.component.html

Last but not least, another alternative is to check out the following integration article on using Kendo UI for jQuery widgets in Angular components:

https://www.telerik.com/kendo-angular-ui/components/framework/kendo-jquery/

and decide whether using the jQuery ListBox in the Angular application will be the best solution for the specific scenario.

I hope this points you in the right direction.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Inian
Posted on: 31 Dec 2020 04:39

I see that you have recently added a new component: ListView to your Angular components. But this component is kind of static and works to show just read only list of items.

Is there any plan to add a component like ListBox? I believe this is one of the popular components used in various UIs. I am surprised to see that you do not have this component in your Angular components list.

But the ListBox is available in your other offerings (ASP.NET, JQuery, PHP). If there is a plan to add a similar component to Angular as well please let us know the timeline. This is one of the most used controls in our project and currently we are depending on PrimeNG ListBox (and we are planning to eliminate PrimeNG dependency completely).

Thank you.

Imported User
Posted on: 07 Nov 2018 19:50
For List Menu in Settings or Dialogs to Switch eg. Views
Imported User
Posted on: 07 Nov 2018 19:44
https://demos.telerik.com/kendo-ui/listbox/drag-and-drop

https://www.jqwidgets.com/angular/angular-listbox/#https://www.jqwidgets.com/angular/angular-listbox/angular-listbox-defaultfunctionality.htm

Rajeev
Posted on: 21 Jun 2018 15:19
Could you please provide this jquery component with angular 4? This works pretty well in Jquery but we can't use it with angular 4 project.