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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Selected values checkboxes should turn to checked on load

Thread ID:

Created:

Updated:

Platform:

Replies:

146916 Aug 26,2019 05:31 AM UTC Sep 5,2019 01:55 PM UTC Angular - EJ 2 4
loading
Tags: Schedule
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
 

amrutha
Replied On 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
 

Vinitha Devi Murugan [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon