1. Home
  2. Forum
  3. Angular - EJ 2
  4. Ability to change the text in the control based on selection

Ability to change the text in the control based on selection

Looking to change the text shown in the control based on the selection in "CheckBox" mode of MultiSelectDropdown. I have tried using "https://ej2.syncfusion.com/angular/documentation/api/multi-select/#valuetemplate" and it doesn't seem to work. Basically looking for "Custom Content" behavior of 

Ex: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/multi-select/checkbox In this example if more than one country is selected, control shows "<Country labels separated by comma that can fit> + {n} more ...". I would like to customize this to something like "Countries: United States" if one country is selected. If more than 1 but not all are selected then show "Countries: Multiple" or "Countries: {n} selected". If all options are selected then show something like "Countries: All".

Any help/insights on this matter is greatly appreciated. Thanks in advance.


7 Replies 1 reply marked as answer
BC Berly Christopher Syncfusion Team December 15, 2021 03:11 PM UTC

Hi Satya Kota, 
  
Greetings from Syncfusion support. 
  
We would like to inform you that, MultiSelect component with checkbox mode does not have value template feature. So, we need to manually modify the wrapper element value based on our application needs as mentioned in the below code example. 
  
 <ejs-multiselect 
        id="multiselect-checkbox" 
        #checkbox 
        [dataSource]="countries" 
        [placeholder]="checkWaterMark" 
        [fields]="checkFields" 
        [mode]="mode" 
        [changeOnBlur]="false" 
        [popupHeight]="popHeight" 
        [showDropDownIcon]="true" 
        showSelectAll="true" 
        (change)="onChange($event)" 
        [filterBarPlaceholder]="filterPlaceholder" 
      ></ejs-multiselect> 
 public onChange(args) { 
    if ( 
      args.e.target.classList.contains('e-selectall-parent') && 
      (this as any).mulObj.dataSource.length === args.value.length 
    ) { 
      args.element.querySelector('.e-delim-view.e-delim-values').innerText = 
        'Countries: All'; 
      (this as any).mulObj.dataBind(); 
    } 
    if ((this as any).mulObj.value.length === 1) { 
      args.element.querySelector('.e-delim-view.e-delim-values').innerText = 
        'Countries: ' + 
        args.element.querySelector('.e-delim-view.e-delim-values').innerText; 
      (this as any).mulObj.dataBind(); 
    } else if ( 
      (this as any).mulObj.value.length != 
      (this as any).mulObj.dataSource.length 
    ) { 
      args.element.querySelector('.e-delim-view.e-delim-values').innerText = 
        'Countries: Multiple'; 
      (this as any).mulObj.dataBind(); 
    } 
  } 
 
  
  
Regards, 
Berly B.C 


SK Satya Kota December 20, 2021 11:11 PM UTC

Hi Berly,


Appreciate the response. Your response seems to have worked in most of the scenarios. However, in case of single selection if country name is long (changed United States to United States of America) and control width is less (changed the width from 300px to 200px in app.component.css), I still see "Countries: 1 selected". I assume reason being that span with ".e-delim-view.e-delim-values" classes already has "1 selected" as the label by the time onChange method gets executed.

args.element.querySelector('.e-delim-view.e-delim-values').innerText =
'Countries: ' +
args.element.querySelector('.e-delim-view.e-delim-values').innerText;



I am able to overcome this issue as I can get the name of the label. Replaced the above line with the following

args.element.querySelector('.e-delim-view.e-delim-values').innerText =
'Countries: ' +
this._getLabelForSelectedValue(this.mulObj.value[0]);


private _getLabelForSelectedValue(selectedValue: any): string {
//Not perfect, but ok for this example
const option = this.countries?.find((i) => i.Code == selectedValue);
console.warn('_getLabelForSelectedValue', selectedValue, option);
return !!option ? option["Name"] as string : "";
}


With these changes styling is bit off. Meaning height of the control is increasing and arrow is going into next line. So question is how can I address this styling gracefully or there must be some type of content width calculation which is setting the span(with ".e-delim-view.e-delim-values" classes) to truncated text, and if my understanding is correct, is it possible to tap into that logic which allows me to pass truncated text. Please advise.

Updated Sample: https://stackblitz.com/edit/angular-pxay66-wbpmxk?file=app.component.ts


Update: Also resizing the screen is resetting the selected text to its default behavior. Please suggest a solution for this as well.

Thanks


BC Berly Christopher Syncfusion Team December 21, 2021 04:24 PM UTC

Hi Satya Kota, 
  
We have modified the sample based on the requested requirement and attached it below. 
  
  
Regards, 
Berly B.C 


Marked as answer
SK Satya Kota December 22, 2021 04:23 PM UTC

Thanks Berly,  I have adjusted the styling to the following so that selector content doesn't wrap into two lines. Merely mentioning it here so it can benefit others.

.e-multi-select-wrapper .e-delim-view.e-delim-values {
      overflow: hidden;
      text-overflow: ellipsis;
      float: left;
      display: block;
      max-width: calc(100% - 32px);
    }

BC Berly Christopher Syncfusion Team December 23, 2021 01:05 PM UTC

Hi Satya Kota, 
  
Thanks for sharing information to us. Please let us know if you need further assistance on this. 
  
Regards, 
Berly B.C 


AM Ashutosh Mehere November 22, 2023 05:11 AM UTC

Berly Christopher hi i want to set text for multiselect in asp.net core , on check box checked like 1 item selected , 2 item selected



YS Yohapuja Selvakumaran Syncfusion Team November 24, 2023 07:52 AM UTC

Hi Ashutosh Mehere,

We would like to inform you that the selected value will be displayed only if there is sufficient space available within the component. If the space is limited and cannot accommodate the selected value, then count will be displayed instead of the actual value (i, e. 1 selected 2 selected will be displayed). This is the intended behavior of the component.

If you prefer to show the selected count rather than displaying the complete selected value, we suggest reducing the component width accordingly. For further clarification, please refer to the attached sample.


Code Snippet:

            <ejs-multiselect placeholder="Business Partner"  dataSource="@Model?.EnquiringAboutSelectListItems" allowFiltering="true" mode="CheckBox" width="100px">

                <e-multiselect-fields text="Value" value="Id"></e-multiselect-fields>

            </ejs-multiselect>


And also, we have the option to customize the selected item count template using the locale property. For a practical demonstration, please refer to the attached sample for further reference.


Code Snippet:

            <ejs-multiselect id="BPdropdown" locale="en" placeholder="Business Partner" dataSource="@Model?.EnquiringAboutSelectListItems" allowFiltering="true" mode="CheckBox" width="150px">

                <e-multiselect-fields text="Value" value="Id"></e-multiselect-fields>

            </ejs-multiselect>

<script>

    ej.base.L10n.load({

        'en': {

            'multi-select': {

                "totalCountTemplate": "${count} item selected"

            }

        }

    });

</script>


image

API Documentation: https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.dropdowns.multiselect.html#Syncfusion_EJ2_DropDowns_MultiSelect_Locale


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



Regards,

Yohapuja S



Attachment: Multiselect_itemcount_11bf19f.zip

Loader.
Up arrow icon