Multiselect placeholder?

[Kyle]

I have a multiselect with about 700+ items. It's quite possible that a user may want these items to be selected by default. Rather than displaying all of them, I would like to have a placeholder 'All' item that gets display in the case of nothing being selected. Any suggestions on how to go about doing this?

[Alexander Valchev]

Hi Kyle,

I am afraid that such functionality is not available out of the box. Actually selecting all 700 options at once will be a performance hit for your application which I why I would not recommend it.

As a workaround, I can suggest the following approach:

• use external button/checkbox to trigger a select all action
  

  <label><input type="checkbox" id="selectAll" />Select All</label>

• instead of selecting all the items, create a collection of their value fields
  

  all = $.map(multiselect.dataSource.data(), function(dataItem) {
      return dataItem.value;
  });

• set the 'all' array as value of a hidden input (so you can submit all the selected items to the server)
• clear the multiselect value (this will remove any currently selected items)
• change the placeholder and trigger the blur event of the input which will update the placeholder
• disable the widget
  

  $("#selected").val(all);
  
  multiselect.options.placeholder = "All selected!";
  multiselect.value([]);
  multiselect.input.blur();
  multiselect.enable(false);

For your convenience I prepared a small example: http://jsbin.com/okonav/2/edit

Regards,
Alexander Valchev
the Telerik team