Group Header has to checked if any one of the Child checkbox is checked and How to Customize C-badge

[LaRis742]

Hi CuppaLabs,

I am really happy when I found "angular2-multiselect-dropdown" packages and it helped a lot for my development. Could you please help me to enhance the below new features based on my requirement. Much appreciated in advance for your help on this.

1. Please find below screen that we have selected Petrol under Car Group, so the requirement is that "Car has to select if we select any one of the Child check box selected" that means, Group header check box has to checked if any one of the child checkbox has selected.
   

2. Please find below screen that we have "Petrol, Diesel & Electricity" items and we have selected Petrol under "Bus & Car" but we need to display only one Badge for Petrol even though we selected two Petrol items in different Group. Could you please help to do this enhancement

Please let me know if you need any more details.

Thanks.
LaRis.

[LaRis742]

@CuppaLabs , Could you please someone from your team help me on the above requirements.

Thanks,
LaRis.

[LaRis742]

@CuppaLabs, Could you please someone from your team help me on the above requirements.

Thanks,
LaRis.

[CuppaLabs]

@LaRis742 Will be fixed shortly.

[LaRis742]

@CuppaLabs , Thanks for working on this. Could you please let me know once it is fixed so that I will verify and will confirm to you.

[LaRis742]

@CuppaLabs , Could you please save my life and I am waiting for this changes since 10 days.

Please find below Dataset for your reference to do Unit test on your change once you have done the changes.

Component:

this.settings = {
singleSelection: false,
text: "Select Fields",
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
enableCheckAll: true,
searchPlaceholderText: 'Search Fields',
enableSearchFilter: true,
badgeShowLimit: 5,
groupBy: "category",
};

this.itemList = [
  { "id": 1, "itemName": "Diesel", "category": "Bus" },
  { "id": 2, "itemName": "Petrol", "category": "Bus" },
  { "id": 3, "itemName": "Diesel", "category": "Car" },
  { "id": 4, "itemName": "Petrol", "category": "Car" },
  { "id": 5, "itemName": "Electricity", "category": "Car" },
  { "id": 6, "itemName": "Petrol", "category": "Bick" }
];

this.selectedItems = [
  { "id": 1, "itemName": "Desiel" },
  { "id": 2, "itemName": "Petrol" },
  { "id": 4, "itemName": "Petrol" }

];

Template

    <angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" [settings]="settings">
    </angular2-multiselect>

[LaRis742]

@CuppaLabs , Could you please help on this to get it fixed.

[Tweniee]

I believe the two points you raised have some merit, but I find both of them to be invalid.

1. The header checkbox shouldn't be checkable [X] if only one child is selected. It should only be checked when all of the children are selected.

2. If there are two different groups with the same child, data binding should handle this situation. The child should not be selected twice but displayed only once.