B4J Library [ABMaterial]: Trying to wrap a multi-select

Ola

Get Library + Source Code

I'm trying to get this component running. I need a way to select multiple items from a list, so I found this here.

Just need to put it in a container and make it have a title and then return selected items.

page.AddExtraCSSFile("custom/multi-select.css")
    page.AddExtraJavaScriptFile("custom/jquery.multi-select.js")

Dim mms As MashMultiSelect
    mms.Initialize(page,"mms")
    mms.AddItem("elem_1","Element 1",True)
    mms.AddItem("elem_2","Element 2",False)
    mms.AddItem("elem_3","Element 3",False)
    mms.AddItem("elem_4","Element 4",False)
    mms.AddItem("elem_5","Element 5",False)
    mms.AddItem("elem_6","Element 6",False)
    page.Cell(1,1).AddComponent(mms.ABMComp)

To select items automatically via code, you can...

mms.ClearSelection
    mms.AddSelection("elem_6")
    mms.AddSelection("elem_5")
    mms.SelectItems

This will include these items on the selected items, other methods exist too, see the attached code.

 

[Mashiane]

Updates:

1. Increase of the Multi-Select area
2. Width to fill 100% of the area
3. Trapping select & deselect events
4. Setting selected items via code
5. Added headers for both sections (can accept HTML

'multi select events
Sub mms_select(value As Map)
    Dim valuex As String = value.GetDefault("value","")
    Log(valuex)
    page.Msgbox("",valuex,"Select","OK",False,"","")
End Sub


Sub mms_deselect(value As Map)
    Dim valuex As String = value.GetDefault("value","")
    Log(valuex)
    page.Msgbox("",valuex,"DeSelect","OK",False,"","")
End Sub

 

[joulongleu]

Hi:Mashiane:logs show : Invalid number of parentheses

 

[Mashiane]

Hi:Mashiane:logs show : Invalid number of parentheses

B4J logs or browser logs?

 

[joulongleu]

B4J logs

 

[Mashiane]

I'm not sure what the cause is though, have you included the css and js files? This is what works for me. Also ensure that MashPlugIns Library Source is the latest compiled as per provision.

Dim mms As MashMultiSelect
    mms.Initialize(page,"mms","500px")
    mms.selectableHeader = "Items"
    mms.selectionHeader = "Selection"
    mms.keepOrder = True
    mms.dblClick = False
    mms.AddItem("elem_1","Element 1",True)
    mms.AddItem("elem_2","Element 2",False)
    mms.AddItem("elem_3","Element 3",False)
    mms.AddItem("elem_4","Element 4",False)
    mms.AddItem("elem_5","Element 5",False)
    mms.AddItem("elem_6","Element 6",False)
    page.Cell(1,1).AddComponent(mms.ABMComp)

 

[joulongleu]

Very good function, test is ok , thanks a lot

 

[Mashiane]

In finality, this would not be complete without a way to return all the selected values. So I have added a GetSelection method to return a list of selected values (see logs) For this to work, you need to run the UpdateSelection method when you select or deselect an item.

'multi select events
Sub mms_select(value As Map)
    'get the selected values
    Dim valuex As String = value.GetDefault("value","")
    'ensure that our selection is updated, the second parameter should be true
    mms.UpdateSelection(valuex,True)
    Log(mms.GetSelection)
    'page.Msgbox("",valuex,"Select","OK",False,"","")
End Sub


Sub mms_deselect(value As Map)
    'get the selected values
    Dim valuex As String = value.GetDefault("value","")
    'ensure that our selection is updated, this time remove the de-selection
    mms.UpdateSelection(valuex,False)
    Log(mms.GetSelection)
    'page.Msgbox("",valuex,"DeSelect","OK",False,"","")
End Sub

PS: your variable name, e.g. mms should be declared in Class_Globals

Get Library + Source in #1

 

[joulongleu]

wow+good+likes