Multiselction Zen component
Hi Guys,
I'm looking for a Zen component that allow me to populate a list of items and the ability to multiselect, similar to checklist?
I've thought of using MultiSelectSet component but don't know how can I populate it like to a query or resultset?
a short sample code would be helpful.
Thanks
Product version: IRIS 2024.3
Discussion (6)1
Comments
See Query Parameters
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen">
<multiSelectSet
sql="select 'Apple' union select 'Banana' union select 'Cherry'"
/>
</page>
}Any ideas on how to tick on the previously saved selected items?
Thanks
Class dc.test Extends %ZEN.Component.page
{
ClientMethod selectMulti() [ Language = javascript ]
{
var values = zenPage.GetValues()
zenSetProp('mss','value',values);
}
ClassMethod GetValues() As %String [ ZenMethod ]
{
; here select data according to a certain condition
&sql(
select LIST(id) into :r
from
(select 1 id,'Apple' name
union
select 2,'Banana'
union
select 3,'Cherry'
union
select 4,'Peach')
where name['a'
)
quit r ; return 2,4
}
ClientMethod saveMulti() [ Language = javascript ]
{
var values = zenGetProp('mss','value');
zenPage.SaveValues(values);
}
ClassMethod SaveValues(values) [ ZenMethod ]
{
set ^fruits=values
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen">
<button caption="Select All" onclick="zen('mss').selectAll()"/>
<button caption="Select based on data from the database" onclick="zenPage.selectMulti();"/>
<button caption="Save" onclick="zenPage.saveMulti();"/>
<multiSelectSet
id="mss"
sql="select 1 id,'Apple' name union select 2,'Banana' union select 3,'Cherry' union select 4,'Peach'"
/>
</page>
}
}
Thanks Vitaliy, is there a property that makes the MultiSelectionSet Scrollable ?
Thanks Again
Class dc.test Extends %ZEN.Component.page
{
XData Style
{
<style type="text/css">
#mss {
width:200px;
height:100px;
overflow:auto;
border:2px solid DeepPink;
background-color: #E5E5E5;
}
a.multiSelectSetCaption {
color: blue;
font-family: Verdana;
font-weight: bold;
}
</style>
}
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen">
<multiSelectSet
id="mss"
sql="
select 1 id,'Apple' name
union select 2,'Banana'
union select 3,'Cherry'
union select 4,'Peach'
union select 5,'Peach'
union select 6,'Cherry'
union select 7,'Banana'
union select 8,'Apple'"
/>
</page>
}
}
Thank you Vitaliy for your prompt assistance👌