We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Selected values checkboxes should turn to checked on load

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.

4 Replies

VK Vinoth Kumar Sundara Moorthy Syncfusion Team 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. 
 
 
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 



AM amrutha replied to Vinoth Kumar Sundara Moorthy 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. 
 
 
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
 


AM amrutha August 27, 2019 08:16 AM UTC


Thread ID:

Created:

Updated:

Platform:

Replies:

146916Aug 26,2019 05:31 AM UTCAug 27,2019 08:14 AM UTCAngular - EJ 22
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.

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. 
 
 
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
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. 
 
 
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
 


VD Vinitha Devi Murugan Syncfusion Team September 5, 2019 01:55 PM UTC

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. 
 
 
Regards, 
M.Vinitha devi 


Loader.
Live Chat Icon For mobile
Up arrow icon