singleSelection & groupBy

[codafish-gmbh]

Hi there,

thanks for fixing #401 . Unfortunately, I still have this selector without any data as described in my first post. Could you give me a hint what I'm doing wrong?

I've updated to: "angular2-multiselect-dropdown": "^4.6.2".

My configuration: SINGLE_CATEGORY_TOP: { text: 'Please select', singleSelection: true, enableSearchFilter: true, groupBy: 'category', position: 'top', },

Cheers!

[CuppaLabs]

@timoberlin Please replicate the issue at https://stackblitz.com/edit/angular2-multiselect-dropdown-q868lj. I have updated the example with your configuration.

[codafish-gmbh]

Thanks a lot for your fast reply. Maybe it is related to to Angular version I am using? "@angular/core": "^6.1.10",

CONFIG: { text: 'Please select', singleSelection: true, enableSearchFilter: true, searchBy: ['itemName'], groupBy: 'category', position: 'top', }

I get the following error:

ERROR TypeError: Cannot read property 'id' of undefined at AngularMultiSelect.trackByFn (angular2-multiselect-dropdown.js:2411) at DefaultIterableDiffer.check (core.js:5664) at DefaultIterableDiffer.diff (core.js:5644) at NgForOf.ngDoCheck (common.js:3157) at checkAndUpdateDirectiveInline (core.js:9246) at checkAndUpdateNodeInline (core.js:10507) at checkAndUpdateNode (core.js:10469) at debugCheckAndUpdateNode (core.js:11102) at debugCheckDirectivesFn (core.js:11062) at Object.eval [as updateDirectives] (AngularMultiSelect.html:7)

[codafish-gmbh]

I was wondering if you've had the chance to check this issue? We would be very, very, happy if you could check a relationship between Angular 6 and the error on the grouping-functionality on singleSelect-items. :)

[pedrobacchini]

I am having this same error when the: selectedItems = []; start empty if it starts with something selected right, but in my use case the list of selected items at the beginning is empty

I used this same example you passed: https://stackblitz.com/edit/angular2-multiselect-dropdown-q868lj and commented lines 22 and 23 from app.component.ts and gave the same error.

[codafish-gmbh]

Is there any chance that @CuppaLabs could check this issue again? It would help a lot if we could work this great functionality :)

[ytaborda17]

I'm having the same trouble, maybe I can bypass @pedrobacchini bug with an event function to validate the dummy field and erase it afterViewInit or something like that, but like @timoberlin says, it would be really nice if this get fixed.

Thank you in advance

[ytaborda17]

It's not a final fix, but in the meanwhile, I was able to solve the problems I had:

If you work with ngModel, change the selectedItems for this.selectedItems = [{itemName: 'Select an option'}];

Aditionally if you're control is a required input, in the submit you need to check the value from the select control:

if (!myControl[0].id) {
    console.log('Required');
}

If you're working with reactive forms:

ngOnInit() {
    this.form = this.formBuilder.group({
        myControl: [[{itemName: 'Select an option'}], [Validators.required, this.validateEmpty]],
        ...
    });
}

validateEmpty(control: AbstractControl) {
    if (!control.value[0].id) {
        return { empty: true };
    }
    return null;
}

Regarding the settings:

this.singleSelectSettings = {
    singleSelection: true,
    enableSearchFilter: true,
    enableCheckAll: false, 
    groupBy: 'category',
    selectGroup: false
};

If you add lazyLoading, breaks!

[adhityaraina1]

In case you guy's still finding a solution for singleSelection: true and gives you error like

ERROR TypeError: Cannot read property 'id' of undefined
at AngularMultiSelect.trackByFn (angular2-multiselect-dropdown.js:2411)
at DefaultIterableDiffer.check (core.js:5664)
at DefaultIterableDiffer.diff (core.js:5644)
at NgForOf.ngDoCheck (common.js:3157)
at checkAndUpdateDirectiveInline (core.js:9246)
at checkAndUpdateNodeInline (core.js:10507)
at checkAndUpdateNode (core.js:10469)
at debugCheckAndUpdateNode (core.js:11102)
at debugCheckDirectivesFn (core.js:11062)
at Object.eval [as updateDirectives] (AngularMultiSelect.html:7)

just try to pass the settings like this

this.dropdownSettings = {
     groupBy: "group",
     text: "Select Sensors and Kpis",
};

and after that declare the selectedItem : []

and just after that change the settings and make singleSelection: true

    this.dropdownSettings = {
        enableSearchFilter: true,
        groupBy: "group",
        maxHeight: '250',
        text: "Select Any",
        selectAllText: 'Select All',
        singleSelection: true,
        unSelectAllText: 'UnSelect All',
    };
}, 1);