How to customize value to Select All option in multiselect?

web
mobile

Topic: How to customize value to "Select All" option in multiselect?

Juric pro asked a year ago

Dear support,

If we we click on "select all" and then checking values with

let values = $(“#idMDmultiselect”).val() ;
console.log(values);

we have: ['value1', 'value2', 'value3', .....]

But sometimes we need insted of getting a very long array of values, just value="ALL"

How is that possible? I think, it should be the way to extend/rewrite the corresponding function

Best regards


Sebastian Kaczmarek staff pro premium answered a year ago

In order to change the current behavior, you need to modify the MaterialSelect._onToggleAllClick() method which you can find in the material-select.js file located in your MDB Pro package and then recompile and re-minify the bundle.


Juric pro answered a year ago

Hi, thanks for the tip. But the function you have mention has a very complex structure. Can you tell me more exactly, what I should change?


Juric pro answered a year ago

ANothe Problem with Multiselect. It looks like the search functionality doesn't work in IE11.

I know, you don't support IE, but we need it. Do you have an idea, where we chozld search for the solution (what function etc.)?

Probably you could provide the solution for that


Juric pro answered a year ago

Please, why my question ist not answered?


Sebastian Kaczmarek staff pro premium answered a year ago

But sometimes we need insted of getting a very long array of values, just value="ALL"

You can simply add one line of code at the bottom of the mentioned function, like this:

  this.$nativeSelect.data('stop-refresh', true);
  this.$nativeSelect.get(0).value = 'all'; // <----- this one
  this._triggerChangeOnNativeSelect();
  this.$nativeSelect.removeData('stop-refresh');

But keep in mind that this way, you will need to access this value like this:

const value = $('#select').get(0).value;

because jQuery.val() function always returns an array in this case and it cannot be changed.

It looks like the search functionality doesn't work in IE11.

It's hard to say without any error messages. Do you have any console errors?

Please, why my question ist not answered?

I am really sorry for inconveniences. We have so much work to do that I have overlooked the notification about your answers


Juric pro answered a year ago

Hi, thanks for replay. I will try your solution and will give a feedback, if it is working

For your question abour IE11: yes, I have an error in theconsole log, which appears on every character entering in search field: SCRIPT438: Das Objekt unterstützt die Eigenschaft oder Methode "includes" nicht mdb.min.js (1,268823)


Sebastian Kaczmarek staff pro premium commented a year ago

It seems like a problem with the compilation to the ES5. The includes() method shouldn't be there as it isn't supported by all browsers. To fix it, try to find the usages of this method in the mdb.js file and replace it with .indexOf(). Then, you need to recompile and re-minify the bundle.


Juric pro answered a year ago

Hello,

unforunatelly your solution (for select all value) doesn't work. I changed mdb.js like you said and added linethis.$nativeSelect.get(0).value = 'ALL'; // <----- this one

and call the test function onclick on the button

function doTest() {
        let value = $('#idSelect').get(0).value;
        console.log(value);
    }

In console (after selecting all) I see: empty line

This solution is actualy not good anyway even if it would work. Cause I don't know if the user will select one, many or all values. And it is not good, that I need different functions to read value depends on what user has selected.I think, the better was would be to provide more convinient way to do so. I suggest that you change your multiselect template to be able understand, that to do, if user selects all options. It is possible to add extra attribute into tag, e.g.

<select allOptionsValue="ALL" class="mdb-select md-form colorful-select dropdown-primary" multiple  searchable="Search here..">

Please take my suggestion as change request for the next release, if possible.Thanks


Juric pro answered a year ago

IE 11 issues:

it doesnt help to change

//  to fix problem with IE11
 // if (liValue.includes(searchValue.toLowerCase())) {
      if (liValue.indexOf(searchValue.toLowerCase())) {
...

I still have search not working (even now without errors in the console if I enter the characters) and on every click on any option I have error:

   Das Objekt unterstützt diese Aktion nicht.
 mdb.min.js (1,264499)

Juric pro answered a year ago

Hi,

another issue with your suggestion to change includes -> indexOf

after I did it, search functionality in multiselect is not working


Sebastian Kaczmarek staff pro premium answered a year ago

About the suggestion to add an extra attribute to the multiselect. I don't like to say that, but most likely we will not add such a feature because it's a corner case. Current behavior allows you to achieve a similar behavior without adding an extra attribute. You can just compare the number of all <option>s in the select: $('#my-select').find('option').length, with the number of all selected options: $('#my-select').find('option:selected').length. If those are equal, you can set your variable to the desired value: var value = 'ALL';. So there is no need for adding an extra attribute to the select.

About the IE problem. I'm surprised that IE 11 does not support .indexOf() (which returns an index or -1 so you should compare against -1 to determine if there is such a value or not btw). AFAIK only IE <9 does not support it. Anyway, try to replace it with jQuery.inArray(), like so:

if ($.inArray(searchValue.toLowerCase(), liValue.split('')) !== -1) {}

Juric pro answered a year ago

Hi,

about selection=all: yes, your idea (just to compare number of selected options with number of available options) sounds reasonable for me, thanks. I will do that.

About IE11 problem, this method throws no errors, but searching is still not working.

I know, that you officially don't support IE11, but you probably should mention, that many corporate users still have IE11 as a standard browser. Probably it would be also good for you, if you would support full functionality for IE11.

Thanks, hope you will try to find a solution for IE11


Juric pro answered a year ago

Hi, cause you already answered about main question in the topic. I would suggest, that I create IE 11 multiselect compability problems as a new topic and close this one. Regards


Sebastian Kaczmarek staff pro premium commented a year ago

Sure, thanks. Regards


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.6.1
  • Device: Desktop
  • Browser: IE 11, Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No