czeckd / angular-dual-listbox Goto Github PK

Have you considered adding the project to NPM as a module? It would be easier to get up and running rather than having people copy a component into their project.

If I set the key and display parameters, the destination list does not show up in the ui. It seems to be around the the filter that finds the item is using a "this" property which is not in scope. If I modify it to pass in the property, moving items between lists does not work

Hello,

I was wonder is there a method or a property that would let me arrange the elements in confirmed (destination array of objects) list. For ex. If my confirmed list has MN, WA, IA and in the same list i want to drag MN from index one to 3. so the end result is confirmed list WA, IA , MN. Also thank you for help

Hi,
I'm using the dual list in a form and when I reset the form I want all the values in the confirmed box to be moved back over to the available box then clear out the confirmed box. I'm not entirely sure as to how to do that. I'm new to angular and coding

Thank you

Map files starts:
{"version":3,"sources":["../tmp/<file_name>.ts"],"names":[],"mappings":...

But those files are missing

Hi, actually I think this is not an issue per se, but it seems to be like GitHub records everything as "Issues", sorry in advance.

Here is my situation; I've been testing this component and it is reaaaally cool, now, I have just a minor problem. I want to share the same Source between list-boxes, let me try to be more specific.

Let's say the Source is a list of shoes(the difference is the color, then I have blue, red, green, black and white shoes in this list), and the Destination are clients whom can buy those shoes(ClientA, ClientB and ClientC); currently, when I try to set the 3 different clients to share the same source, I notice that after adding the blue shoes for ClientA, when I swap to ClientB or ClientC the Source still the same, it still have blue, red, green, black and white shoes for choosing, when actually, the blue ones should be not available.

Is this scenario already taken into account?, thank you, I'll be waiting for you reply.

I am getting this error when I try to load the page where dual ListBox is expected to show:

EXCEPTION: Uncaught (in promise): TypeError: Unable to get property 'DEFAULT_FORMAT' of undefined or null reference.

David,
Thanks for providing excellent component.

I need to modify the code to incorporate following.

1. Remove drag/drop (Is it possible with any property?)
2. Display each item as 3 line record
3. Move add remove to middle and remove buttons on the bottom.

Let me know any tips for completing those. I created project with just copying files under lib/src as a module and imported it and it is working as well. Now I can modify the source code for any changes needed. Appreciate your time on any high-level tips.

I was unable to get angular-dual-listbox to work in my application. I get the following webpack error:

WARNING in ./src/app/app.module.ts
52:12-29 "export 'DualListComponent' was not found in 'angular-dual-listbox'

following the installation instructions, I am getting the same error in a new project generated by angular cli.

Hello! I'm using the component in a project, but I'm having performance issues.

In an editing scenario, I have to initialize the destination list with the chosen elements in the register. I am having problems initializing, when the target list has more than 1500 elements. Pretty much my system stops working.

Any idea what might be causing this?

I mean I can do through CSS but are there any params which i can disable or something to hide these buttons

Hi,
Before all, Thank you to write this component... is very useful for me:).. now my question is you are thinking to write unit tests for your component?

Hello,

So I'm currently trying to use the angular-dual-listbox in my application, but I'm having a visual bug that I am not being able to fix. Here it is:

As you can see, everything is working as expected except the filter, which isn't showing up in the right place.

Here is the dual-listbox in my HTML file:

<dual-list [source]="allProducts" [(destination)]="catalog.products" key="id" display="name" [format]="dualListFormat"
              sort="true" filter="true" height="200px">
            </dual-list>

And my format definition:

dualListFormat = { add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: 'right-to-left', draggable: true, locale: undefined };

EDIT: added code syntax highlighting

we are trying to install this plugin while using angular 5 with $ npm i angular-dual-listbox --save command.
the files tools and rollup.config.js are not downloaded with the rest of the files.
does manually download them and inject them to the project is acceptable move?

we used the angular-dual-listbox in angular 4 version and it worked fine but everything changed when the version 5 "attacked" XD

thanks a head.

I am getting a empty destination box, but source is filled. I have confirmed both, selected and remaining, have data in them.

<dual-list [sort]="default" [filter]="default" 
    [source]="remaining" [key]="key" [display]="display" height="265px"
    [(destination)]="selected"></dual-list>

export class AdvancedCustomerConfigComponent {
    customerId: number;
    selected: Array<any>;
    remaining: Array<any>;
    key: string = "Id";
    display: string = "Description";
    default: boolean = true;
    

    ngOnInit() {
        if (this.customerId != null) {
            this.getTestUsers();
        }
    }

    getTestUsers() {
        this._customersService.getCustomerConfigOptions(this.customerId)
            .subscribe(
                data => {
                    this.selected = data.Result.SelectedOptions;
                    this.remaining = data.Result.RemainingOptions;
                }
            )
    }

export class ConfigurationOption {
    Id: number;
    Name: string;
    Description: string;
}

After updating several npm modules to latest version, I get the following error during "ng build":

ERROR in ..\angular-dual-listbox\angular-dual-listbox.ts(8,5): Error during template compile of 'DualListComponent'
  Reference to a local (non-exported) symbols are not supported in decorators but '___moduleName' was referenced
    Consider exporting '___moduleName'.

Hi, I'm having a hard time integrating this to my angular 4 app which use google firestore as the back-end.
Can you provide a sample on how to load items to both "source" and "confirmed" arrays. Even though I could load items to "confirmed" array, I cannot see them in the UI.

I tried this plugin. The only issue which I see is that when we move the items from source to destination list, the confirmed array(in demo-app.component.ts) is always empty.

Here is my revised demo-app.component.ts to test this:

import { Component } from '@angular/core';

import { DualListComponent } from './dual-list.component';

@Component({
    selector: 'demo-app',
    template: `
<div class="container-fluid">
    <button (click)="testBtn()">Test</button>
    <p></p>
    <dual-list [sort]="keepSorted" [source]="stations" [(destination)]="confirmed" height="265px"></dual-list>
</div>
`
})

export class DemoAppComponent {

    private keepSorted:boolean = true;

    private stations:Array<any> = [ 
        { _id: 1, _name: 'Antonito' },
        { _id: 2, _name: 'Big Horn' },
        { _id: 3, _name: 'Sublette' },
        { _id: 4, _name: 'Toltec' },
        { _id: 5, _name: 'Osier' },
        { _id: 6, _name: 'Chama' },
        { _id: 7, _name: 'Monero' },
        { _id: 8, _name: 'Lumberton' },
        { _id: 9, _name: 'Duice' },
        { _id: 10, _name: 'Navajo' },
        { _id: 11, _name: 'Juanita' },
        { _id: 12, _name: 'Pagosa Jct' },
        { _id: 13, _name: 'Carracha' },
        { _id: 14, _name: 'Arboles' },
        { _id: 15, _name: 'Allison' },
        { _id: 16, _name: 'Tiffany' },
        { _id: 17, _name: 'La Boca' },
        { _id: 18, _name: 'Ignacio' },
        { _id: 19, _name: 'Oxford' },
        { _id: 20, _name: 'Florida' },
        { _id: 21, _name: 'Bocea' },
        { _id: 22, _name: 'Carbon Jct' },
        { _id: 23, _name: 'Durango' },
        { _id: 24, _name: 'Home Ranch' },
        { _id: 25, _name: 'Trimble' },
        { _id: 26, _name: 'Hermosa' },
        { _id: 27, _name: 'Rockwood' },
        { _id: 28, _name: 'Tacoma' },
        { _id: 29, _name: 'Needleton' },
        { _id: 30, _name: 'Elk Park' },
        { _id: 31, _name: 'Silverton' },
        { _id: 32, _name: 'Eureka' }
     ];

    private confirmed:Array<any> = [];

    testBtn(){
        console.log("This.confirmed: " + JSON.stringify(this.confirmed));
    }
}

So am I doing it wrong somewhere? Or what is the way to get the selected elements in confirmed array?

First of all thanks for your great component.

I am using this component for many project and it works as charm.

I would like to implement inline edit feature to this component. Could you please extend function for click event of list item?
Or is there any specific way to hook this?

component.ts

 permissions: Array<Permissions> = [];

 ngOnInit() {
   this.ps.getAllPermission().subscribe(
      permissions => {
        console.log(permissions)
        this.permissions = permissions.map((permission) => {
          return new Permissions(permission);
        });
      }
    );}

component.html

 <div class="container-fluid">
  <dual-list [sort]="permissions" [key]="permissions" [(display)]="display"  [source]="permissions" [(destination)]="target"></dual-list>
  </div>

Hi,

Thank you so much for such a wonderful component.
i have a scenario to customize the filter functionality like as below,
e.g: "Search This Text" : search as to be based on 3 keywords.

Is this possible to do with current existing functionality, please let me know.

Thanks

Hey my friend, first i want to thank you about this amazing component, so i'm using this component in my project and i need to know if you can help me with disable the drag and drop feature or how to get the reference of end of the object drop for condicioning one button. I want to show the button only when the user drop the object out. I already make this two functions to make this happen in the add button and the remove button, look this functions below:

$('[name = "addBtn"]').on('click', function () {
  _component.change();
});`


$('[name = "removeBtn"]').on('click', function () {
  _component.change();
});`

Where these methods call the method change() and the method change(), change a boolean to true to show the button to save the confirmed list in the MySQL.

Any ideas to change the boolean to true when the user drop the object?

Thank you so much for your time!

Best Regards,
Pedro Farbo - VetorWeb

hi,
I must get value from API to fill confirm and source array. I can do it and both array is filled well. in dual box source side ,array is shown but confirmed side doesn't show anything. what can i do to solve this problem?

hey, this is nice, very nice and will be the back bone of a channel organizer im about to make, would LOVE to see some multi tabs and or some filtering here but great for a starting block

This may be an easy one, but we'll see.

I'd like to had the dual listbox on a form and bind the confirmed values to the form's angular model.
Ex:
<dual-list [key]="key" [display]="display" [(destination)]="model.categories" name="categories" #categories="ngModel" [(ngModel)]="model.categories" height="265px">

Is that feasible? If not, any recommendations on how to bind the confirm list to a model?

Thanks!
Jason

Hi,
I tried run the next command: "npm run start" and this is failling saying: "[email protected] dist: tools/mkdist"... I can see that the issue is with the command "npm run dist"...... do you know what is the reason?

Please let me know how to add horizontal scroll bar rather than increasing width of the control. Vertical scroll bar is populated by default when I have more items, needed same horizontal scroll bar for wider items. Thank you.

Hi there,

I have been using this dual-listbox for a while and it works and looks great, good job!
Is it possible to somehow get notified when an item is added or removed from the target/destination box?

For example in case I want to run a function every time the user adds/remove an item.

Thanks in advance!

I have list object like this
userlstadd: Array = [];
confirmed: Array = [];

export class DualistDepartmentUserObject {
ma: number;
hoTen: string;
tenDangNhap: string;
tongso: number;
}

// Function get data
GetUserToAdd(id: number) {
this.service.DepartmentGetUserToAdd(id).subscribe(data => {
this.userlstadd = data.gridDepartmentUser;
$("#modal-adduser").modal('show');
}, error => {
alert(error)
})
}

//View
<dual-list [source]="userlstadd" [key]="ma" [(display)]="hoTen" [(destination)]="confirmed" [format]="format">

format = {
add: 'Chọn', remove: 'Bỏ chọn', all: 'Tích tất cả', none: 'Bỏ tích tất cả',
};

The Dual List not show my data

Hi ,

I would like to use this component. I have tried the demo and its looks good.
I have a scenario where I would like to keep the initial parent data towards the left asis , we should not remove anything from it or add anything to it.
only the right hand side list we can get data from the parent list(add) and when deleting we should remove from right list .

Can that be handled here with some changes?

Is possible to move the all and none buttons to be in between the add button and the search bar?

There are some output that i can use to detect when the value changed?

I loved this module!

Is there a way to fire a custom even when adding or removing items from the destination list? e.g. I have a service call I would like to make after items are add/removed from the destination list.

Hi,

I am using Turkish alphabet. My dual-list have some texts like MİHRİCAN. I am writing "mi" to filter input. But it doesn't find anything.

Any solution for this problem?

Hi,

Thanks for your work on this. I have an issue i would like some help with at your convenience.

I have tried to implement a ajax search to the listbox that allows the user to search and update the source with the results.
However whenever i make a new ajax search this causes the destination to duplicate and i can't seem to figure out why.

Any pointers would be helpful.
Thanks

I am trying to set the destination of the component from the parent and it is not updating properly. Basically I want to be able to "reset" the destination if the user does not save (for instance hitting close at the top). What I am seeing is the this.confirmed object is not being updated because it is populated only from the component itself. Is there an easy way to reset the destination ad-hoc?

Get following error after migrating to angular 4.

ERROR TypeError: this._trackByFn is not a function
    at DefaultIterableDiffer.check (core.es5.js:7083)
    at DefaultIterableDiffer.diff (core.es5.js:7056)
    at DualListComponent.webpackJsonp.383.DualListComponent.ngDoCheck (dual-list.component.ts:88)
    at checkAndUpdateDirectiveInline (core.es5.js:10714)
    at checkAndUpdateNodeInline (core.es5.js:12090)
    at checkAndUpdateNode (core.es5.js:12058)
    at debugCheckAndUpdateNode (core.es5.js:12687)
    at debugCheckDirectivesFn (core.es5.js:12628)
    at Object.eval [as updateDirectives] (ViewLayoutColumnComponent.html:23)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12613)
    at checkAndUpdateView (core.es5.js:12025)
    at callWithDebugContext (core.es5.js:13013)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:12553)
    at ViewRef_.detectChanges (core.es5.js:10122)
    at core.es5.js:5052

app.html

<div class="container">
    <h4>Select or Drag Questions to create Set and Upload :</h4>
    <dual-list [sort]="true" [key]="id" [(display)]="name"  [source]="source" [(destination)]="confirmed"></dual-list>
</div>

app.ts

import { Component, OnInit } from '@angular/core';
import {uploadQuestionSetService} from './upload-question-set.service'



interface Sources {
  id: number;
  name: string;
}


@Component({
  selector: 'app-upload-question-set',
  templateUrl: './upload-question-set.component.html',
  styleUrls: ['./upload-question-set.component.css']
})


export class UploadQuestionSetComponent implements OnInit {
 source: Sources[];
 confirmed = [];
 target = [];
 
  constructor(private uploadQuestionSetService : uploadQuestionSetService) { }

  ngOnInit() {
    //this.source = ["bhagvat","kailas","rakesh"];
    this.source = [{
      id:1,
      name:"bhagvat"
    },{
      id:2,
      name:"rakesh"
    }]
    console.log(this.source)

  }
 }

here above i am trying to bind json array but it will not showing / not binding data to ui, can you please reply here ASAP. thanks

Using this below superb component. In this i need to show some default items in Destination LustBox.

https://czeckd.github.io/angular-dual-listbox/demo/

Hi,

I followed every steps mentioned, but after npm start,

I am getting this:
zone.js:2933 GET http://localhost:3000/angular-dual-listbox 404 (Not Found)

Please help

Hello,

I am using your dual list and have gotten it working. I have a simple question about datasets that are already defined. ( ie: the 'confirmed' array already has elements).
What do I pass as the source and destination/confirmed?
Say my 'universe' of all available items are the numbers 1 - 10
[1,2,3,4,5,6,7,8,9,10]
But I want to pre-initialize the destination with the numbers 1-3
[1,2,3]
I assume I would take this into account when passing the arrays as follows:
source: [4,5,6,7,8,9,10]
destination: [1,2,3]

Is this correct? ( It doesn't appear to be working is why I am asking)

Used https://czeckd.github.io/angular-dual-listbox/demo/ version in my app.

As it stands, projects that contain this library cannot be upgraded to Angular 6. I would be willing to help, if need be.

Open the demo in IE11 and try to drag an item between list boxes:
https://czeckd.github.io/angular-dual-listbox/demo/

Nothing happens for me.

HI when i try to console the above event, it only gives me the items that are added to destination array. It doesn't say anything about the event type (to know if its add/remove). How do i know the type of event?

I am trying to load countries from a web service and assigning to dual-listbox . at the first time of calling service both source and destination items are loading correctly,

but when calling service for second time, destination items are cloning,
if called service 3 times, destination items are cloning into 3 copies of each.

i tried clearing destination varible before assign values but its didnt worked, please help

Using Angular 4.0.2 I dropped the component in my project and am getting this TypeError when no options are supplied to the dual-list element. It should handle the error more gracefully.

TypeError: Cannot read property 'diff' of undefined
at DualListComponent.Array.concat.DualListComponent.buildAvailable (dual-list.component.ts:173)
at DualListComponent.Array.concat.DualListComponent.ngDoCheck (dual-list.component.ts:164)

Hi,

I'm getting the following warning:

WARNING in ./src/app/admin/sources/sources.component.ts
38:87-104 "export 'DualListComponent' was not found in 'angular-dual-listbox'

This is when I do the following import in my component:
import { DualListComponent } from 'angular-dual-listbox';
@ViewChild('dualcomp') dualcomp: DualListComponent;

I am able to access this.dualcomp, so I don't see any errors/difficulties in doing what I want, but I still get this annoying warning. Do you have any idea why or how to resolve this?