Tuesday, 25 November 2014

Select2 maximumSelectionSize

In this blog post I describe the basic use of the property maximumSelectionSize which can easily be added to a Select2 field.
Select2 allows the developer to limit the number of items that can be selected in a multi-select control, for example a List Box. In the example below only 3 or less items can be selected.
If this number is less than 1 selection is not limited.
Once the number of selected items reaches the maximum specified the contents of the dropdown will be populated by the formatSelectionTooBig function.
The formatSelectionTooBig function returns a String containing "You can only select (maximumSelectionSize value) items" message or Function used to render the message.


The property maximumSelectionSize can not be added as an attribute to a List Box.

<xp:this.attrs>
<xp:attr name="maximumSelectionSize"value="3">
</xp:attr>

Just like the property minimumInputLength, the property maximumSelectionSize is also NOT available in the Select2 Picker for Combo / List Box from the OpenNTF Bootstrap4XPages plugin.


The property maximumSelectionSize has to be added as an Select2 option.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
  $(document).ready(
    function() {
      x$( "#{id:listBox1}" ).select2({
      placeholder: "Select a software category",
      minimumInputLength : 2,
      maximumSelectionSize : 3
      });
               }
           );
  ]]></xp:this.value>
</xp:scriptBlock>

Result



Sample Code Custom Control

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:bx="http://www.openntf.org/xsp/bootstrap">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script
src="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.min.js"
clientSide="true">
</xp:script>
<xp:styleSheet
href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2.css">
</xp:styleSheet>
<xp:styleSheet
href="/.ibmxspres/domino/xsp/.ibmxspres/.extlib/bootstrap/select2/select2-bootstrap.css">
</xp:styleSheet>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
  $(document).ready(
    function() { 
      x$( "#{id:comboBox1}" ).select2({
      placeholder: "Select a category",
      allowClear: true,
      minimumInputLength : 2          
      });
               }
           );
  ]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
  $(document).ready(
    function() { 
      x$( "#{id:listBox1}" ).select2({
      placeholder: "Select a software category", 
      minimumInputLength : 2,
      maximumSelectionSize : 3
      });
               }
           );
  ]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div class="page-header">
<h1>
Select2
<xp:span style="color:rgb(255,255,255)">.</xp:span>
<small>Combo Box / List Box</small>
</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1"
value="#{document1.Categories}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");      
var res = @DbLookup("", "byKeyWord", "Category", 2);  
var list = arr.concat(res);
return list; }]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Select2 - List Box
<xp:listBox id="listBox1"
value="#{document1.Categories}" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:@Text("");
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
</div>
</xp:panel>
</xp:view>

No comments:

Post a Comment