Custom count text in multiselect being reset when resizing screen

[Gabriel Alva]

I'm currently working on a project using Angular in combination with the EJS-MultiSelect component, specifically in CheckBox mode. We have managed to implement a custom "count text" in the input field by leveraging the component's change event. This feature works as intended under normal circumstances.

However, we've run into a problem: the custom count text resets to its default whenever the screen is resized. This issue persists whether the resizing occurs in a web browser or within the StackBlitz environment.

Is there an 'on resize' event or any other method within the component that could help us preserve the custom count text during screen size adjustments? Thank you for your help.

https://stackblitz.com/edit/intelica-base-angular14-ej2-20-3-50-dqyaex

[Yohapuja Selvakumaran]

Hi Gabriel Alva,

Thank you for reaching out us. After validating the reported issue, we would like to inform you that you can customize the selected item count template using the locale property. For a practical demonstration, please refer to the sample below for further reference.

Code Snippet:

[app.component.html]

 

      <ejs-multiselect

        id="multiselect-checkbox"

        #checkbox

        [dataSource]="countries"

        [placeholder]="checkWaterMark"

        [fields]="checkFields"

        [mode]="mode"

        [popupHeight]="popHeight"

        [showDropDownIcon]="true"

        showSelectAll="true"

        [filterBarPlaceholder]="filterPlaceholder"

        width="150px"

        locale="en"

      ></ejs-multiselect>

 

 

[app.component.ts]

 

 

ngOnInit(): void {

    L10n.load({

      en: {

        'multi-select': {

          overflowCountTemplate: '+${count} seleccionados',

          totalCountTemplate: '${count} seleccionados',

        },

      },

    });

  }

 

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

For more detailed information and reference, please consult the following documentation. These resources provide in-depth insights into customizing the selected item count template using the locale property in the MultiSelect component.

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

Documentation: https://ej2.syncfusion.com/angular/documentation/multi-select/localization

Regards,

Yohapuja S

[Gabriel Alva]

Hi. Your solution was helpful, thanks. But I want to apply the overflowCountTemplate directly after selecting the second item in the multiselect, without needing to resize it. Currently, if two small items can fit within the multiselect, both items are displayed—for example, 'France' and 'Finland' in your StackBlitz sample.

[Yohapuja Selvakumaran]

Hi Gabriel Alva,

Thank you for your feedback. We're glad to hear that the solution provided was helpful for you. Regarding your request to apply the overflowCountTemplate directly after selecting the second item in the multiselect, we understand your requirement.

To achieve this behavior, we have created a sample that displays the count in the multiselect input instead of the selected value when there are multiple selected items, regardless of the component width. You can find the sample provided in the link below for further reference:

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

Code snippet:

[app.component.ts]

 

public SelectedHandler(args): void {

    setTimeout(

      function () {

        this.count = this.count + 1;

        (document.getElementsByClassName('e-delim-view e-delim-values')[0] as any ).innerText = [this.count.toString() + '+ seleccionados'];

      }.bind(this), 0 );

  }

 

  public RemoveHandler(args): void {

    setTimeout(

      function () {

        this.count = this.count - 1;

        (

          document.getElementsByClassName( 'e-delim-view e-delim-values')[0] as any).innerText = [this.count.toString() + '+ seleccionados'];

      }.bind(this), 0);

  }

 

Please review the sample and let us know if it meets your expectations. If you have any further questions or need additional assistance, feel free to ask.

Regards,

Yohapuja S

[Gabriel Alva]

Hi Yohapuja,

Thank you for your response.

I've encountered a first issue with this case: when resizing the page, the input field resets the text and starts concatenating the values again. Is there a way to control this behavior using some sort of resize event for the component?

Regards, Gabriel

[Yohapuja Selvakumaran]

Hi Gabriel Alva,

We have logged this request “Introducing the 'ShowNumberOfCheckedItems' API in MultiSelect checkbox mode for Displaying Total Selected” as uncertain feature. We will implement this feature in any of our upcoming releases. We will prioritize the features every release based on the demands.

You can track the status of this report through the following feedback link,

Feedback link: https://www.syncfusion.com/feedback/50978/introducing-the-shownumberofcheckeditems-api-in-multiselect-checkbox-mode-for

  

If you have any more specification/suggestions for the feature request, you can add it as a comment in the portal and cast your vote to make it count.

Regards,

Yohapuja S