Select- All' checkbox when there is only one option present in dropdown

[cipl 1177]

Add 'Select- All' checkbox when there is only one option present in  dropdown. how to achive and how to find user click select-all and unselect all. 

Hey Hi ,  I need  even one data came time i need select all  option i need how to achive that user want like like .

<div class="form-group"> 

    <ejs-multiselect 

    id="multiCheckbox" 

    [dataSource]="autoreactiveskillset" 

    [mode]="mode" 

    [showDropDownIcon]="true" 

    [filterType]="startsWidth"

    [allowFiltering]="true" 

    formControlName="skillname" 

    [enableSelectionOrder]="true" 

    name="skillname" 

                [showSelectAll]="true"

>

ejs-multiselect>  i have only one skill that time also i need select all option i want . Now how its behaviours more than one data came time only coming how to achive . then how to identify user is click select all and unselect all. User want even one data came time also select All option

[Priyanka Karthikeyan]

Hi cipl 1177,

Thank you for reaching out to us.

 

We would like to inform you that the 'Select All' option in the MultiSelect component is designed to be enabled only when the data source contains more than one item. If there's only one item in the dropdown, the 'Select All' option will not be displayed. This behavior is intentional and is part of the component's design.

 

If you have any further questions or need additional assistance, please feel free to reach out to us.

Regards,

Priyanka K

[cipl 1177]

But Client asking this feature how to implement  Select All Option  One data source came time also how to achieve this 'Select All'  and 'Unselect All' how to achieve . 

[Priyanka Karthikeyan]

Hi cipl 1177,

 

To ensure that the "Select All" option is always visible in the popup, even when there's only one item in the dropdown list, you can use the CSS style provided below. Please find the sample attached for your reference.

 

 

.e-multi-select-list-wrapper .e-selectall-parent { 

  display: block !important;

}

 

Sample: https://stackblitz.com/edit/angular-r22gxf-uyo1h5?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css

 

 

 

Regards,

Priyanka K

[cipl 1177]

Hey Hi its showing Select All fine . But how to identify user clicked select All option. I need to when ever user click Select All option I need to set That form values null. ​ Otherwise i need to send that value .

Example :

Select All Clicked => Country value set to Null.

Australia, India Selected time => I need to set Country :[1,2].

as of now am clicked Select All  Option . Country value is going to [1]. But user is click Select All option means i need to set  null. 

only one datasource available time user click australia means that time i need sent australia id only . if user is clicked select all option that time only i need to set Null. ​Otherwise i dont set null how to achive this.

if that is not possible how to we write customized Select All option in ejs-multiselect

[Priyanka Karthikeyan]

Hi cipl 1177,

 

If you need to detect when the Select All option is clicked and want to set the form value to null, you can achieve this by using the beforeSelectAll and selectedAll events. These events are triggered when the Select All option is selected. Below is a code snippet and a sample for your reference:

 

 

 <ejs-multiselect

        (beforeSelectAll)="beforeSelectAllHandler($event)"

        (selectedAll)="selectedAllHandler($event)"

      ></ejs-multiselect>

 public selectedAllHandler(args: SelectEventArgs) {

   // Perform action when selectAll is clicked

  } 

 

  public beforeSelectAllHandler(args: SelectEventArgs) {

      // Perform action before selectAll is triggered

  } 

 

Sample: https://stackblitz.com/edit/angular-r22gxf-pj6x71?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css

 

Documentation: https://ej2.syncfusion.com/angular/documentation/api/multi-select/#selectedall

https://ej2.syncfusion.com/angular/documentation/api/multi-select/#beforeselectall

 

Regards,

Priyanka K

[cipl 1177]

Thanks its working .. One more clarification only . so now i have three datasource user is clicked select All option. next they dont want 3rd item he is removed that time automatically uncheck select All option how to identfiy select All option is unchecked?

[Priyanka Karthikeyan]

Hi cipl 1177,

 

To detect when the Select All option is unchecked after manually unchecking an item, you can use the removed event. This event triggers whenever an item is removed or unchecked, at which point the Select All option will no longer be selected. Below is the code snippet and a sample for your reference:

 

 

 <ejs-multiselect

       ...

        (removed)="removedHandler($event)"

      ></ejs-multiselect>

 

public removedHandler(args: RemoveEventArgs) {

    alert("Select All Unchecked");

  } 

 

Sample: https://stackblitz.com/edit/angular-r22gxf-6pbj1e?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css

 

Documentation Reference: https://ej2.syncfusion.com/angular/documentation/api/multi-select/#removed

 

Regards,

Priyanka K

[cipl 1177]

Thank you Got it

[Kalpana Ganesan]

Hi Cipl 1177,

You're welcome! Glad that the provided solution was helpful. If you have any other questions, please reach out to us, we will be happy to help you.

Regards,

Kalpana.

[cipl 1177]

.e-multi-select-list-wrapper .e-selectall-parent { 

  display: block !important;

} i added this css now what happened means . i dont have datasource that time also this select All option is showing how to fix this issue

[Priyanka Karthikeyan]

Hi cipl 1177,

 

Thank you for the update! To achieve the behavior where the "Select All" option is only displayed when the list is available, and hidden otherwise, you can handle this through the cssClass property in the created event. By applying this method, you can dynamically control the visibility of the "Select All" option based on the availability of the list items.

 

Below is a code snippet and sample for your reference:

 

 

app.component.html

 <ejs-multiselect

       .....

        (created)="oncreated()"

      ></ejs-multiselect>

app.component.ts

public oncreated() {

    if ((this.mulObj as any).dataSource.length > 0) {

      this.mulObj.cssClass = "e-custom"

      }

  }

app.component.css

.e-custom.e-multi-select-list-wrapper .e-selectall-parent {

  display: block !important;

}

 

Sample: https://stackblitz.com/edit/angular-r22gxf-kj76un?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css

 

Regards,

Priyanka K

[cipl 1177]

Hi Priyanka,

This changes blocking  

 Select All Option  One data source came time also how to achieve this 'Select All'  and 'Unselect All' how to achieve . 

[Vidyalakshmi Mani]

Hi cipl 1177,

 

Thank you for your update! To achieve the desired behavior where the "Select All" option is displayed only when the list length is greater than zero and hidden otherwise, you can handle this dynamically using the cssClass property within the open event of the MultiSelect component. This approach allows you to control the visibility of the "Select All" option based on the availability of list items.

 

For your convenience, below is a code snippet that demonstrates how to implement this functionality:

 

 

app.component.html

 <ejs-multiselect

       .....

        (open)="onOpen($event)"

      ></ejs-multiselect>

app.component.ts

public oncreated() {

     if ( args.popup.element.getElementsByTagName("li").length == 1) {

        this.mulObj.cssClass = "e-custom"

      }

      else {

        this.mulObj.cssClass = ""

      }

  }

app.component.css

.e-custom.e-multi-select-list-wrapper .e-selectall-parent {

  display: block !important;

}

 

Sample: Lkhj41 (forked) - StackBlitz

 

If you are still encountering the issue on your end, we kindly request you to share a video illustration of the problem. This will help us gain a clearer understanding of the situation and provide more accurate assistance.

 

We appreciate your cooperation and look forward to resolving this for you. Thank you again for your understanding and support.

 

Regards,

Priyanka K

 

[cipl 1177]

Hi 

More than one multi select dropdown coming time this is not working . Second drop down only one data source came time Not showing select all option 

Here i attached Stackblitz lin

[Priyanka Karthikeyan]

Hi cipl 1177,

 

Thank you for the update. We have created a sample using multiple MultiSelect components, and the Select All feature is working as expected on our end. Please ensure that you are using different custom CSS classes for each MultiSelect component by utilizing the cssClass property.

 

Below is the modified code snippet:

 

app.component.html

<ejs-multiselect

        id="multiselect-checkbox"

        #checkbox

        [dataSource]= "countries"

        [placeholder]="checkWaterMark"

        [fields]="checkFields"

        [mode]="mode"

        [popupHeight]="popHeight"

        [filterBarPlaceholder]="filterPlaceholder"

        [showDropDownIcon]="true"

        (open)="onOpenFirst($event)"

        [showSelectAll]="true"

        [allowFiltering]="false"

      ></ejs-multiselect>

      <ejs-multiselect

        id="multiselect-checkbox1"

        #checkbox1

        [dataSource]= "countries1"

        [placeholder]="checkWaterMark"

        [fields]="checkFields"

        [mode]="mode"

        [popupHeight]="popHeight"

        [filterBarPlaceholder]="filterPlaceholder"

        [showDropDownIcon]="true"

        (open)="onOpenSecond($event)"

        [showSelectAll]="true"

        [allowFiltering]="false"

      ></ejs-multiselect>

      <ejs-multiselect

        id="multiselect-checkbox2"

        #checkbox2

        [dataSource]= "countries2"

        [placeholder]="checkWaterMark"

        [fields]="checkFields"

        [mode]="mode"

        [popupHeight]="popHeight"

        [filterBarPlaceholder]="filterPlaceholder"

        [showDropDownIcon]="true"

        (open)="onOpenThird($event)"

        [showSelectAll]="true"

        [allowFiltering]="false"

      ></ejs-multiselect>

 

app.component.html

 

// Generic method to handle cssClass assignment based on number of items

  public onOpen(args: any, component: MultiSelectComponent, cssClass: string) {

    console.log(args);

    if (args.popup.element.getElementsByTagName('li').length == 1) {

      component.cssClass = cssClass;

    } else {

      component.cssClass = '';

    }

  }

 

  public onOpenFirst(args: any) {

    this.onOpen(args, this.mulObj, 'e-custom');

  }

 

  public onOpenSecond(args: any) {

    this.onOpen(args, this.mulObj1, 'e-custom1');

  }

 

  public onOpenThird(args: any) {

    this.onOpen(args, this.mulObj2, 'e-custom2');

  }

 

 

app.component.css

 

.e-custom.e-multi-select-list-wrapper .e-selectall-parent,

.e-custom1.e-multi-select-list-wrapper .e-selectall-parent,

.e-custom2.e-multi-select-list-wrapper .e-selectall-parent {

  display: block !important;

}

 

Sample: Lkhj41 (forked) - StackBlitz

 

If you are still encountering the issue, please feel free to share a sample application and video illustration, and we will be happy to assist further.

 

Regards,

Priyanka K