DrobdownList depends on Checkbox

Question

Hello! Try make dynamic dropdownList depends on Checkbox

but

<ejs-dropdownlist [dataSource]="data" [value]="selectedAccountId" [fields]="fields" placeholder="Nothing for select"></ejs-dropdownlist>

private updateSelectionList() {
        let res: SelectItem<AccountInfo>[] = [];
        if (this.selectBing && this._bingAccounts.length > 0) {
            res = [...res, ...this.transformAccounts(this._bingAccounts, 'Bing', res.length)];
        }
        if (this.selectGoogle && this._googleAccounts.length > 0) {
            res = [...res, ...this.transformAccounts(this._googleAccounts, 'Google', res.length)];
        }
        if (res.length > 0) {
            const selectAll = new SelectItemAll<AccountInfo>();
            selectAll.text = `All accounts (${res.length})`;
            selectAll.id = -1;
            res = [selectAll, ...res];
            this.selectedAccountId = selectAll.id;
        } else {
            this.selectedAccountId = null;
        }
        this.data = res;
    }

Please help !

Ilakkiya Baskar · Answer

Hi Ali Kholmatov, Thanks for contacting Syncfusion Support. Based on the checkbox status, the dataSource of the DropDownList component gets changed. We suggest you to use change event of the CheckBox Component. Please refer to the code block below, @Component({ selector: 'my-app', template: `

`, }) export class AppComponent { name = 'Angular 6'; // defined the array of data public data: { [key: string]: Object }[] = [ { Id: 'game1', Game:'Badminton' }, { Id: 'game2', Game: 'Football' }, { Id: 'game3', Game:'Tennis' }]; public data1: { [key: string]: Object }[] = [ { Id: 'game4', Game:'Cricket' }, { Id: 'game5', Game: 'Soccer' }, { Id: 'game6', Game:'Golf' }]; // maps the appropriate column to fields property public fields: Object = { text: 'Game', value: 'Id' }; //set the placeholder to DropDownList input public text: string = "Select a game"; @ViewChild('samples') public dropDownListObject: DropDownListComponent; @ViewChild('chkbox1') public chkbox1Obj: CheckBoxComponent; @ViewChild('chkbox2') public chkbox2Obj: CheckBoxComponent; onChange(args: ChangeEventArgs){ let data3: any= this.data.concat(this.data1); debugger if(args.checked) { if(this.chkbox2Obj.checked) this.dropDownListObject.dataSource=data3; // datasource append based on the checkbox status else this.dropDownListObject.dataSource=this.data; } else { if(this.chkbox2Obj.checked) this.dropDownListObject.dataSource=this.data1; else this.dropDownListObject.dataSource=[]; } } onChange1(args: ChangeEventArgs){ let data3: any= this.data.concat(this.data1); debugger if(args.checked) { if(this.chkbox1Obj.checked) this.dropDownListObject.dataSource=data3; else this.dropDownListObject.dataSource=this.data1; } else { if(this.chkbox1Obj.checked) this.dropDownListObject.dataSource=this.data; else this.dropDownListObject.dataSource=[]; } } } If your requirement is not meet, Kindly send us the scenario of the error Kindly send us the error details Kindly send the screenshot of the error Please refer to the below sample, https://stackblitz.com/edit/angular-6c6vfw Regards, Ilakkiya B

Ali Kholmatov · Answer

Thank you! but what about this part

Becouse of you answer have also my trouble! I want have ( like all accounts (sum all data) ) See please more detail my screen When I added two checkbox my selectValue must be have All accounts(2) also

if (res.length > 0) {

            const selectAll = new SelectItemAll<AccountInfo>();

            selectAll.text = `All accounts (${res.length})`;

            selectAll.id = -1;

            res = [selectAll, ...res];

            this.selectedAccountId = selectAll.id;

        } else {

            this.selectedAccountId = null;

}

Ali Kholmatov · Answer

Hi Ali Kholmatov, Thanks for contacting Syncfusion Support. Based on the checkbox status, the dataSource of the DropDownList component gets changed. We suggest you to use change event of the CheckBox Component. Please refer to the code block below, @Component({ selector: 'my-app', template: `

`, }) export class AppComponent { name = 'Angular 6'; // defined the array of data public data: { [key: string]: Object }[] = [ { Id: 'game1', Game:'Badminton' }, { Id: 'game2', Game: 'Football' }, { Id: 'game3', Game:'Tennis' }]; public data1: { [key: string]: Object }[] = [ { Id: 'game4', Game:'Cricket' }, { Id: 'game5', Game: 'Soccer' }, { Id: 'game6', Game:'Golf' }]; // maps the appropriate column to fields property public fields: Object = { text: 'Game', value: 'Id' }; //set the placeholder to DropDownList input public text: string = "Select a game"; @ViewChild('samples') public dropDownListObject: DropDownListComponent; @ViewChild('chkbox1') public chkbox1Obj: CheckBoxComponent; @ViewChild('chkbox2') public chkbox2Obj: CheckBoxComponent; onChange(args: ChangeEventArgs){ let data3: any= this.data.concat(this.data1); debugger if(args.checked) { if(this.chkbox2Obj.checked) this.dropDownListObject.dataSource=data3; // datasource append based on the checkbox status else this.dropDownListObject.dataSource=this.data; } else { if(this.chkbox2Obj.checked) this.dropDownListObject.dataSource=this.data1; else this.dropDownListObject.dataSource=[]; } } onChange1(args: ChangeEventArgs){ let data3: any= this.data.concat(this.data1); debugger if(args.checked) { if(this.chkbox1Obj.checked) this.dropDownListObject.dataSource=data3; else this.dropDownListObject.dataSource=this.data1; } else { if(this.chkbox1Obj.checked) this.dropDownListObject.dataSource=this.data; else this.dropDownListObject.dataSource=[]; } } } If your requirement is not meet, Kindly send us the scenario of the error Kindly send us the error details Kindly send the screenshot of the error Please refer to the below sample, https://stackblitz.com/edit/angular-6c6vfw Regards, Ilakkiya B ???

Keerthana Rajendran · Answer

Hi Ali Kholmatov, ,

We have assigned a value for DropDownList in previous sample and the value is maintained during checkbox change. Please refer to the below given sample

https://stackblitz.com/edit/angular-ebmigy

Based on the provided code, we suspect that the value is not selected after change in checkbox because the value is set through “selectedAccountId” before dataSource is updated in updateSelectionList() method. Please check the below given code.

private updateSelectionList() {

let res: SelectItem<AccountInfo>[] = [];

if (this.selectBing && this._bingAccounts.length > 0) {

res = [...res, ...this.transformAccounts(this._bingAccounts, 'Bing', res.length)];

}

if (this.selectGoogle && this._googleAccounts.length > 0) {

res = [...res, ...this.transformAccounts(this._googleAccounts, 'Google', res.length)];

}

if (res.length > 0) {

const selectAll = new SelectItemAll<AccountInfo>();

selectAll.text = `All accounts (${res.length})`;

selectAll.id = -1;

res = [selectAll, ...res];

this.data = res; // assign dataSource before setting value

this.selectedAccountId = selectAll.id;

} else {

this.selectedAccountId = null;

}

During property change , value will be set based on the dataSource. So, we suggest you to assign new dataSource before setting value for DropDownList. If the issue persists, kindly modify the provided sample to reproduce the issue in our end so that we can proceed further.

Regards,

Keerthana.