Displaying "All" when All items are selected

[Jon Kacprowicz]

I see the settings to change the text of the selectAllText and unselectAllText, but when all items are selected, the display shows something like "Canada +15 more". I also notice that when None are selected a slightly grey "(None)" is displayed.

Is there a built-in, or easy, way to change the text when all items are selected? And a bonus, change the text of "(None)" when none are selected.

[Jon Kacprowicz]

Not sure why I missed this, but the "(None)" is the "placeholder" property, so that is not a problem.

Still would like to know how to set the text with all items are selected.

[UdhayaKumar Duraisamy]

Hi Jon,

To display custom text in the input field, we suggest you modify the span element text as “All Selected” in the selectAll event which will be triggered during check or uncheck of “Select All” text. To ensure whether the items are checked, use e.isChecked inside this event and change the text of span element. Kindly refer to the following code snippet.

  onSelectAll(e) {

    if (e.isChecked == true) {

      setTimeout(() => {

        document.getElementsByClassName(

          'e-delim-view e-delim-values'

        )[0].textContent = 'All Selected';

      }, 0);

    }

  }

  render() {

    return (

      <div id="multichecbox" className="control-pane">

        <div className="control-section col-lg-8">

          <div id="multigroup" className="control-styles">

            <h4>CheckBox</h4>

            <MultiSelectComponent

              id="checkbox"

              selectedAll={this.onSelectAll.bind(this)}

              ref={(scope) => {

                this.mulObj = scope;

              }}

              dataSource={this.countries}

              fields={this.checkFields}

              placeholder="Select countries"

              mode="CheckBox"

              showSelectAll={true}

              showDropDownIcon={true}

              filterBarPlaceholder="Search countries"

              popupHeight="350px"

            >

              <Inject services={[CheckBoxSelection]} />

            </MultiSelectComponent>

          </div>

        </div>

 

We have attached the sample for your reference, please find the sample at the following link: https://stackblitz.com/edit/react-vnraqh?file=index.js

Please let us know if you need any further assistance on this.

Regards,

Udhaya Kumar D.