Multiselect placeholder?

2 posts, 0 answers
  1. Kyle
    Kyle avatar
    16 posts
    Member since:
    Apr 2012

    Posted 16 Apr 2013 Link to this post

    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?
  2. Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 18 Apr 2013 Link to this post

    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(, 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
      multiselect.options.placeholder = "All selected!";

    For your convenience I prepared a small example:

    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top