Selected values checkboxes should turn to checked on load

4 Replies
3 Participants

Created by
AM amrutha

Platform
Angular - EJ 2

Platform
Angular - EJ 2

Control
Schedule

Created On
Aug 26, 2019 05:31 AM UTC

Last Activity On
Sep 5, 2019 01:55 PM UTC

Want to subscribe?
SIGN IN

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

<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

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.

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

AM amrutha August 27, 2019 08:16 AM UTC

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,

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

<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

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.

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

Regards,

M.Vinitha devi

Need More Help?

Get personalized assistance from our support team.

Contact Support