‘select all’ functionality for multiple select, which'll select all items

Hi all,

One DCT is having a multiple select box. And the requirement is to implement ‘select all’ functionality for multiple select box, which'll select all items at once.

For this I am using a checkbox. As formAPI does not have any method for selecting the options in multiple select box so I not getting the idea how to proceed further.

For clarity find the attached code.
In this 'item_name' is multiple select box and 'selectall_cb' is check box.
on changing the checkbox 'selectall' function is called.

DCT code :
---------------------------------
Find attached 'multiselectDCT.txt' for DCT code, as the code was not appearing in preview.

----------------------------------
multiselect.js:

----------------------------------

function init()
{
IWEventRegistry.addItemHandler("/selectall_cb", "onItemChange", selectall);
}
function selectall(itemObject)
{

var itemValue = itemObject.getValue(); // checkbox Item
var nameItem = IWDatacapture.getItem("/item_name"); //Capturing multiselect object
var myOptions = nameItem.getOptions();

alert(myOptions.length);
alert(myOptions[0].selected); // whether first element is slected or not.

}
init();

------------------------------

It would be a great help if someone could suggest some idea to implement this.

Thanks much.
-Jack
TS 5.5

Find more posts tagged with

Comments

Migrateduser

Actually, there is a way to control the selection of multiselect boxes and I recommend it. Checkboxes can be a pain to work with...

If you wanted to set the selected values of a multiselect (let's say your multiselect consisted of integers between 1 and 5, inclusive), you would do the following:

IWDatacapture.getItem('/someMultiSelect').setValue(1,2,3,4,5);

You MAY need a single quote around the 1,2,3,4,5 but I think that's right. The line above would select all referenced values -- I'm using it myself for a heirarchical multi-select where if someone selects a parent item, the selection cascades to its descendants.

kaalraa

Jack,

A snippet of code ... which you can try within your FormAPI. I have written this code to be used within my javascript code.

'obj' is the item, in your case its select box (nameItem).


for (var i=0; i#obj.options.length; i++)
{
  obj.options.selected = true;
}

Replace # with < sign.

Migrateduser

kaalraa,

I had problems with that earlier today -- instead, you might want to attach your JS. I personally hate DevNet's inability to effectively embed a chunk of code in a page.

Dave

kaalraa

Hi Dave,

I know... they have given a lot of big bang features to encapsulate the code, the html's and others. But i have NEVER seen, code written their would go OK .. in first instance.

However, have updated the same with a replacement.

kaalraa,

I had problems with that earlier today -- instead, you might want to attach your JS. I personally hate DevNet's inability to effectively embed a chunk of code in a page.

Dave

d0353101

Actually, there is a way to control the selection of multiselect boxes and I recommend it. Checkboxes can be a pain to work with...

If you wanted to set the selected values of a multiselect (let's say your multiselect consisted of integers between 1 and 5, inclusive), you would do the following:

IWDatacapture.getItem('/someMultiSelect').setValue(1,2,3,4,5);

You MAY need a single quote around the 1,2,3,4,5 but I think that's right. The line above would select all referenced values -- I'm using it myself for a heirarchical multi-select where if someone selects a parent item, the selection cascades to its descendants.

Hi Dave,

Many thanks for help.
Your suggestion worked with some modification. i.e. I used IWDatacapture.getItem('/item_name').setValue([1,2]);
It is selecting second and third option perfectly.

But my requirement is to select all the options in Multiple select.
For that I used a for loop and concatenate the values in var x in the form of (0,1,2,3). And passed ‘x’ in IWDatacapture.getItem('/item_name').setValue(); but it is not working. I have tried it with single quotes and double quotes but dint work out.

For refrence see the js code I used :
---------------------------
function init()
{
IWEventRegistry.addItemHandler("/selectall_cb", "onItemChange", selectall);
}
function selectall(itemObject)
{
var maxLength = 120;
var itemValue = itemObject.getValue();
// alert(itemValue);
var nameItem = IWDatacapture.getItem("/item_name"); //Capturing object
var myOptions = nameItem.getOptions();
var x=0;

for (var i = 0; i < myOptions.length; i++) {
x= x+','+i;
}
alert(x);
IWDatacapture.getItem('/item_name').setValue();

// But x is not being substituted here.

}
init();
---------------------------
Thanks

-Jack

Migrateduser

Wouldn't

IWDatacapture.getItem('/item_name').setValue();

Keep resetting the value until it gets to the last element and finally set it to that one?

I'm not claiming that this is the best way but what I did in this case was I built a string in my loop. Basically, I iterated through the list of options, as you're doing, but on each pass, I do the following:

commandStr += i + ',';

So, at the end I have this long string with alternating numbers and commas. After this loop, what I do is:

var re = /,$/g;
commandString.replace(re,"");
eval("item.setValue([" + commandString + "]);");

I don't doubt that there are more efficient ways to do this but that seems to work.

Dave

ISCBorisB

I don't doubt that there are more efficient ways to do this but that seems to work.

Dave

You may consider the following:


// Get your combo object
var cmb = ....

// Select All
var cmb_options = cmb.getOptions(); 
if (cmb_options != null) {
   for (var i=0; i<cmb_options.length; i++) {
      cmb_options.selected = true;
   }
   cmb.setOptions(cmb_options);
}

For whatever reason this is more reliable than direct "obj.options.selected = true;". Perhaps "setOptions" is critical or may be it is
something else entirely

jbonifaci

I would recommend placing a button next to the multi select and add an onCallout event handler. Here is a generic function that will select all items for the item object passed in. Simply call this function onCallout and it will select all options.

function selectAll(itemObject)
{
 if (itemObject.isMultiSelect())
 {
  var optionsArray = itemObject.getOptions();
  for (var i=0; i<optionsArray.length; i++)
  {
   optionsArray.selected = true;
  }
  itemObject.setOptions(optionsArray);
 }
 else
 {
  return false;
 }
 return true;
}//function selectAll()

~Jeff