Selected values checkboxes should turn to checked on load

[amrutha]

Hi Team,

I have an array and looping the checkbox , onchange event I am pushing the required value and saving. When the user goes into edit mode, the selected checkboxes need to be checked. Can you let me how to achieve this.

This is code: 

<div *ngFor = "let salom of salonSerivesData">

<div clas="e-textlabel"> {{salom.serviceGroupName}}</div>

<div *ngFor = "let services of salom.services">

<ejs-checkbox (change) = "onChangeq($event,services)"

label="{{services.serviceName}}" ></ejs-checkbox>

</div>

</div>

onChangeq(e, services) {

if (e.checked) {

this.checkedServices.push(services);

} else {

// this.checkedServices.i(services);

const index = this.checkedServices.indexOf(services);

this.checkedServices.splice(index, 1);

}

// console.log(this.checkedServices);

}

On load how to reteive the selected one.

[Vinoth Kumar Sundara Moorthy]

Hi Amrutha, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported requirement and we would like to let you know that it can be achievable in CheckBox by using checked property. Instead of maintaining the variable checkedServices to push the selected value, you can maintain the variable for checked property (two-way binding) in your salonSerivesData itself and bind it to checked property as like in the below code example. 

 

Code Example 

<div *ngFor="let services of services"> 

    <ejs-checkbox (change)="onChangeq($event,services)" 

                  label="{{services.serviceName}}" [checked]="services.isChecked"></ejs-checkbox> 

</div> 

 

services = [ 

    { "serviceName": "ASP.NET MVC", "isChecked": false }, // provide default checked value for checkbox based on your need 

    { "serviceName": "ASP.NET CORE ", "isChecked": false }, 

    { "serviceName": "ANGULAR", "isChecked": false } 

] 

 

For your convenience, we have prepared the sample based on our suggestion with dummy service data. Please find the link below. 

 

https://stackblitz.com/edit/angular-vb38kz?file=app.component.html 

 

Meanwhile, we would like to let you know the following details to check further. 

 

1. Confirm whether you have rendered the checkedbox in any modal? 

2. Explain in more details for this requirement “The user goes to edit mode; selected checkboxes need to be checked.”  

3. Specify your exact use case scenario. 

 

Could you please check the above details and get back to us with the requested details to proceed further? 

 

Regards, 

Vinoth Kumar S 

[amrutha]

Hi Amrutha, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported requirement and we would like to let you know that it can be achievable in CheckBox by using checked property. Instead of maintaining the variable checkedServices to push the selected value, you can maintain the variable for checked property (two-way binding) in your salonSerivesData itself and bind it to checked property as like in the below code example. 

 

Code Example 

<div *ngFor="let services of services"> 

    <ejs-checkbox (change)="onChangeq($event,services)" 

                  label="{{services.serviceName}}" [checked]="services.isChecked"></ejs-checkbox> 

</div> 

 

services = [ 

    { "serviceName": "ASP.NET MVC", "isChecked": false }, // provide default checked value for checkbox based on your need 

    { "serviceName": "ASP.NET CORE ", "isChecked": false }, 

    { "serviceName": "ANGULAR", "isChecked": false } 

] 

 

For your convenience, we have prepared the sample based on our suggestion with dummy service data. Please find the link below. 

 

https://stackblitz.com/edit/angular-vb38kz?file=app.component.html 

 

Meanwhile, we would like to let you know the following details to check further. 

 

1. Confirm whether you have rendered the checkedbox in any modal? 

2. Explain in more details for this requirement “The user goes to edit mode; selected checkboxes need to be checked.”  

3. Specify your exact use case scenario. 

 

Could you please check the above details and get back to us with the requested details to proceed further? 

 

Regards, 

Vinoth Kumar S 

Hi Vinoth,

Thankyou for your reply.

 

1. Confirm whether you have rendered the checkedbox in any modal? 

     The checbbox property should not be implemented as part of modal

2. Explain in more details for this requirement “The user goes to edit mode; selected checkboxes need to be checked.”  

          I have created a customized editor window, where user needs to select the services he needs for an appointment. After creating the appointment,

when he opens it, the selected one must be checked .

     

I have created a plunker for reference : https://stackblitz.com/edit/angular-vb38kz-obvjqn

I have used another variable and assigned the selected service,Is there any other way of setting the selected value. And also I do have so many variables bound to the appointment object 

Id: 1,

StartTime: new Date(2018, 3, 2, 10, 0),

EndTime: new Date(2018, 3, 2, 12, 30),

IsAllDay: false,

employeeId: 1,

clientId: 2,

clientName: 'Olivia',

appointmentId: 12,

service : {

serviceId: 1,

serviceName : 'Mens Hair Cut',

duration: 10,

price: 125

},

status: 'closed'

whereas in editor form only 4 fields are bound.

On editing all the appointement data values are lost and only the form Data comes. How to maintain this data also?

Regards,

Amurutha

 

[amrutha]

Thread ID:	Created:	Updated:	Platform:	Replies:
146916	Aug 26,2019 05:31 AM UTC	Aug 27,2019 08:14 AM UTC	Angular - EJ 2	2

Tags: CheckBox

amrutha

Asked On August 26, 2019 05:31 AM UTC

Hi Team,

I have an array and looping the checkbox , onchange event I am pushing the required value and saving. When the user goes into edit mode, the selected checkboxes need to be checked. Can you let me how to achieve this.

This is code: 

<div *ngFor = "let salom of salonSerivesData">

<div clas="e-textlabel"> {{salom.serviceGroupName}}</div>

<div *ngFor = "let services of salom.services">

<ejs-checkbox (change) = "onChangeq($event,services)"

label="{{services.serviceName}}" ></ejs-checkbox>

</div>

</div>

onChangeq(e, services) {

if (e.checked) {

this.checkedServices.push(services);

} else {

// this.checkedServices.i(services);

const index = this.checkedServices.indexOf(services);

this.checkedServices.splice(index, 1);

}

// console.log(this.checkedServices);

}

On load how to reteive the selected one.

Reply   |   Reply with quote

Vinoth Kumar Sundara Moorthy [Syncfusion]

Replied On August 27, 2019 06:58 AM UTC

Hi Amrutha, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported requirement and we would like to let you know that it can be achievable in CheckBox by using checked property. Instead of maintaining the variable checkedServices to push the selected value, you can maintain the variable for checked property (two-way binding) in your salonSerivesData itself and bind it to checked property as like in the below code example. 

 

Code Example 

<div *ngFor="let services of services"> 

    <ejs-checkbox (change)="onChangeq($event,services)" 

                  label="{{services.serviceName}}"[checked]="services.isChecked"></ejs-checkbox> 

</div> 

 

services = [ 

    { "serviceName": "ASP.NET MVC", "isChecked": false }, // provide default checked value for checkbox based on your need 

    { "serviceName": "ASP.NET CORE ", "isChecked": false }, 

    { "serviceName": "ANGULAR", "isChecked": false } 

] 

 

For your convenience, we have prepared the sample based on our suggestion with dummy service data. Please find the link below. 

 

https://stackblitz.com/edit/angular-vb38kz?file=app.component.html 

 

Meanwhile, we would like to let you know the following details to check further. 

 

1. Confirm whether you have rendered the checkedbox in any modal? 

2. Explain in more details for this requirement “The user goes to edit mode; selected checkboxes need to be checked.”  

3. Specify your exact use case scenario. 

 

Could you please check the above details and get back to us with the requested details to proceed further? 

 

Regards, 

Vinoth Kumar S 

Reply   |   Reply with quote

amrutha

Replied On August 27, 2019 08:14 AM UTC

Hi Amrutha, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported requirement and we would like to let you know that it can be achievable in CheckBox by using checked property. Instead of maintaining the variable checkedServices to push the selected value, you can maintain the variable for checked property (two-way binding) in your salonSerivesData itself and bind it to checked property as like in the below code example. 

 

Code Example 

<div *ngFor="let services of services"> 

    <ejs-checkbox (change)="onChangeq($event,services)" 

                  label="{{services.serviceName}}" [checked]="services.isChecked"></ejs-checkbox> 

</div> 

 

services = [ 

    { "serviceName": "ASP.NET MVC", "isChecked": false }, // provide default checked value for checkbox based on your need 

    { "serviceName": "ASP.NET CORE ", "isChecked": false }, 

    { "serviceName": "ANGULAR", "isChecked": false } 

] 

 

For your convenience, we have prepared the sample based on our suggestion with dummy service data. Please find the link below. 

 

https://stackblitz.com/edit/angular-vb38kz?file=app.component.html 

 

Meanwhile, we would like to let you know the following details to check further. 

 

1. Confirm whether you have rendered the checkedbox in any modal? 

2. Explain in more details for this requirement “The user goes to edit mode; selected checkboxes need to be checked.”  

3. Specify your exact use case scenario. 

 

Could you please check the above details and get back to us with the requested details to proceed further? 

 

Regards, 

Vinoth Kumar S 

Hi Vinoth,

Thankyou for your reply.

 

1. Confirm whether you have rendered the checkedbox in any modal? 

     The checbbox property should not be implemented as part of modal

2. Explain in more details for this requirement “The user goes to edit mode; selected checkboxes need to be checked.”  

          I have created a customized editor window, where user needs to select the services he needs for an appointment. After creating the appointment,

when he opens it, the selected one must be checked .

     

I have created a plunker for reference : https://stackblitz.com/edit/angular-vb38kz-obvjqn

I have used another variable and assigned the selected service,Is there any other way of setting the selected value. And also I do have so many variables bound to the appointment object 

Id: 1,

StartTime: new Date(2018, 3, 2, 10, 0),

EndTime: new Date(2018, 3, 2, 12, 30),

IsAllDay: false,

employeeId: 1,

clientId: 2,

clientName: 'Olivia',

appointmentId: 12,

service : {

serviceId: 1,

serviceName : 'Mens Hair Cut',

duration: 10,

price: 125

},

status: 'closed'

whereas in editor form only 4 fields are bound.

On editing all the appointement data values are lost and only the form Data comes. How to maintain this data also?

Regards,

Amurutha

 

[Vinitha Devi Murugan]

Hi Amrutha, 

 

Thanks for your patience.  

Based on your shared requirement, we have modified your shared sample to show the selected checkbox values on event click. Please refer the below sample. 

 

https://stackblitz.com/edit/angular-vb38kz-jgafdh?file=app.component.ts  

 

Regards, 

M.Vinitha devi