Feature: Locked Items

[todd-givainc]

Per our discussion previously, I've renamed disabled to locked instead.

An example of the code/feature can be found here:
http://jsfiddle.net/5wCDM/

[ivaynberg]

will merge this when i have time to also update the docs with an example and the description. if you have time to do that in gh-pages branch would be great....

[aj7]

how would the lock work if i am loading my items dynamically, and not in javascript?

[kevin-brown]

For Ajax, in the results you would include a locked property for each value which would be either true or false.

[webRat]

Kevin is correct. The ajax would return { id: 1, text: 'blah', locked: true } and IF the user selected it, they won't be able to remove it ( fair warning! :D )

[aj7]

Sorry, my mistake. The javascript side is fine, but if I was rendering the
html, how do I specify a lock in html? Within my ? On Oct 28, 2012 9:27 PM, "Todd Rafferty" notifications@github.com wrote: Kevin is correct. The ajax would return { id: 1, text: 'blah', locked: true } and IF the user selected it, they won't be able to remove it ( fair warning! :D ) — Reply to this email directly or view it on GitHubhttps://github.com/ivaynberg/select2/pull/503#issuecomment-9850898.

[webRat]

Not sure, I believe this feature is only for multi: yes - I believe you can pass the disabled="disabled" on a regular single select. I believe select2 honors the disabled attribute of a single select drop down.

[kevin-brown]

Locked items don't work with <select multiple> at the moment, it only works with <input type="hidden">.

One option would be to turn this into a function, with parameters similar to formatResult or formatSelection, that allows the user to create their own function to determine what is locked. The current implementation would be kept as the default function in that case.

[webRat]

After re-reading documentation, select2 does support <select multiple> and Kevin is correct. I'll take a poke at my feature sometime and see if I can get it working with <select muliptle> with an attribute or something (example: <option value="whatever" locked>whatever</option> Not sure if that would be the best way to go about it though and Kevin's suggestion might be faster.

[aj7]

Thanks to both - just to add something here - I would think that the lock feature should apply mainly to a multiple select, as one would want to lock an item in a list (multiple select, and not a single select)....
my scenario is such that I want some items to appear by default at initialisation time/start time, and these items be locked, so they cannot be removed by the user i.e. there is always a default selection, and then if someone selects from the list, then the locked item gets deselected programmatically...

[dswitzer]

@aj7:

This was the was the reason the locked property was added--so that some defaults could be put in that can not be removed. I don't think it's particular useful for normal selections, just for selections you want to load as defaults.

@webRat:

I'd recommend using the attribute "data-locked" as the attribute to pass in the locked status via the element.

[windbridges]

Hi, guys. Is there any chance that "data-locked" attribute will be implemented? I need functionality like "locked: true", but statically, without scripting. My situation: user only can add new items to multiselect, but never can remove already added. So I must show which items are already added, but must not allow to remove it. All HTML with and is generated at server side.

[natorojr]

As far as I can tell from looking at the 3.4.0 source code, you can specify locked on an HTML option element as follows:

<option value="1" selected="selected" locked="locked">United States</option>

This works. However, it leads to invalid HTML5.

As suggested by @dswitzer and @windbridges, using a data-locked attribute would be more appropriate.

Line 776 of select2.js could be changed as follows:

--- docroot/vendor/select2/3.4.0/select2.js 2013-05-14 08:27:46.000000000 -0700
+++ docroot/vendor/select2/3.4.0.HACKED/select2.js  2013-06-23 16:52:28.636936609 -0700
@@ -773,7 +773,7 @@
                     element: element.get(),
                     css: element.attr("class"),
                     disabled: element.prop("disabled"),
-                    locked: equal(element.attr("locked"), "locked")
+                    locked: (equal(element.attr("locked"), "locked") || equal(element.attr("data-locked"), "true") || equal(element.data("locked"), true))
                 };
             } else if (element.is("optgroup")) {
                 return {

Then you could change the HTML option as follows:

<option value="1" selected="selected" data-locked="true">TOTAL US - XAOC</option>

I only performed limited testing, but it seemed to work nicely in Chrome and Firefox.

Could one of the devs on the project verify and merge?

Thanks