Multiselect with empty array

[vin]

What i observed is, when the selected values are empty [], then the all multiselect items in JSON are showing not selected

 <e-column headerText='Pod Assignment' textAlign='Left'

                                                                width=90>

                                                                <ng-template #template let-data>

                                                                    <div>

                                                                        <ejs-multiselect #multiselectCheckbox

                                                                            name="multiselectCheckbox"

                                                                            id="multiselectCheckbox"

                                                                            [dataSource]='aPods'

                                                                            [placeholder]='checkWaterMark'

                                                                            [fields]='podFields' [mode]='mode'

                                                                            [popupHeight]='popHeight'

                                                                            [showDropDownIcon]='true'

                                                                            showSelectAll='true'

                                                                            [filterBarPlaceholder]='filterPlaceholder'

                                                                            cssClass="custom-{{data.itemId}}"

                                                                            [(ngModel)]="data.podSelValue"  [value]="data.podSelValue" 

                                                                            (change)="changevalue($event, data)"

                                                                           >

                                                                        </ejs-multiselect>

                                                                        <!--    target.classList.contains('e-dropdownbase') -->

                                                                        <div *ngIf="data.isError"

                                                                            class="alert alert-danger">                                                                           

                                                                                Cannot select group items with individual items.                                                                            

                                                                        </div>

                                                                    </div>

                                                                </ng-template>

                                                            </e-column>

[{"projectDetailId":20041,"itemId":30398,"name":"E1Feature03","podsAssociatedWith":[{"itemPodId":10171,"name":"Pod A","projectPodId":10016},{"itemPodId":10172,"name":"Pod B","projectPodId":10017}],"podSelValue":[10016,10017],"newPodAssignments":[],"isError":false},{"projectDetailId":20041,"itemId":30399,"name":"E2Feature01","podsAssociatedWith":[{"itemPodId":10171,"name":"Pod A","projectPodId":10016},{"itemPodId":10172,"name":"Pod B","projectPodId":10017}],"podSelValue":[10016,10017],"newPodAssignments":[],"isError":false},{"projectDetailId":20041,"itemId":30400,"name":"E2Feature02","podsAssociatedWith":[{"itemPodId":10171,"name":"Pod A","projectPodId":10016},{"itemPodId":10172,"name":"Pod B","projectPodId":10017}],"podSelValue":[10016,10017],"newPodAssignments":[],"isError":false},{"projectDetailId":20041,"itemId":30401,"name":"E2Feature03","podsAssociatedWith":[{"itemPodId":10171,"name":"Pod A","projectPodId":10016},{"itemPodId":10172,"name":"Pod B","projectPodId":10017}],"podSelValue":[],"newPodAssignments":[],"isError":false},{"projectDetailId":20041,"itemId":30402,"name":"E2Feature04","podsAssociatedWith":[{"itemPodId":10171,"name":"Pod A","projectPodId":10016},{"itemPodId":10172,"name":"Pod B","projectPodId":10017}],"podSelValue":[],"newPodAssignments":[],"isError":false},{"projectDetailId":20041,"itemId":30403,"name":"E2Feature05","podsAssociatedWith":[{"itemPodId":10171,"name":"Pod A","projectPodId":10016},{"itemPodId":10172,"name":"Pod B","projectPodId":10017}],"podSelValue":[],"newPodAssignments":[],"isError":false},{"projectDetailId":20041,"itemId":30404,"name":"E3Feature01","podsAssociatedWith":[{"itemPodId":10171,"name":"Pod A","projectPodId":10016},{"itemPodId":10172,"name":"Pod B","projectPodId":10017}],"podSelValue":[],"newPodAssignments":[],"isError":false} ]

[Ponmani Murugaiyan]

Hi vin, 

Thanks for contacting Syncfusion support. 

We suspect that you are providing the pre-selected values as empty []. If so then while open the Multiselect popup items will not be selected as per intended behaviour. If we misunderstood the query, please revert us with the more information along with replication procedure, which helps us to check and provide you the solution at earliest. 

Regards, 

Ponmani M 

[vin]

Sorry, i dint understand your response

"podSelValue":[10016,10017]   ==> is this empty? why is it not showing up?

If "podSelValue":[] ==> then it shd not show selected == agreed

WHen i have different rows with either of   "podSelValue":[] or "podSelValue":[10016,10017]   ===> it is show all rows empty!!

[Ponmani Murugaiyan]

Hi vin, 

Thanks for the update. 

Query: "When i have different rows with either of   "podSelValue":[] or "podSelValue":[10016,10017]   ===> it is show all rows empty!! 

 

Based on your provided information, we suspect that you are providing the same variable name ‘podSelValue’ for value property of all Multiselect Dropdownlist. So that it causes all the Multiselect with empty value. Hence, we suggest you to update the unique variable name for value property to update the preselect value as per your requirement. 

<ejs-multiselect id="multiselect-checkbox1" #checkbox [dataSource]="countries" [fields]="checkFields" [mode]="mode" [(value)]="podSelValue1"></ejs-multiselect> 

 

<ejs-multiselect id="multiselect-checkbox2" #checkbox [dataSource]="countries" [fields]="checkFields" [mode]="mode" [(value)]="podSelValue2"></ejs-multiselect> 

 

<ejs-multiselect id="multiselect-checkbox3" #checkbox [dataSource]="countries" [fields]="checkFields" [mode]="mode" [(value)]="podSelValue3"></ejs-multiselect> 

 

<ejs-multiselect id="multiselect-checkbox4" #checkbox [dataSource]="countries" [fields]="checkFields" [mode]="mode" [(value)]="podSelValue4"></ejs-multiselect> 

 

<ejs-multiselect id="multiselect-checkbox5" #checkbox [dataSource]="countries" [fields]="checkFields" [mode]="mode" [(value)]="podSelValue5"></ejs-multiselect> 

public podSelValue2: string[] = ['10016', '10017']; 

public podSelValue3: string[] = []; 

ngOnInit(): void { 

  this.mode = 'CheckBox'; 

  this.filterPlaceholder = 'Search countries'; 

} 

Output: 

 

Sample: https://stackblitz.com/edit/angular-z7souk-o1btls?file=app.component.html 

Regards, 

Ponmani M