Written by

Question Nezla · Jun 11

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 (0)0

Add reply

Comments

Vitaliy Serdtsev · Jun 11

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>
}

0 0

Nezla Jun 11 to Vitaliy Serdtsev

Any ideas on how to tick on the previously saved selected items?

Thanks

0 0

Vitaliy Serdtsev Jun 11 to Nezla

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>
}

}

0 0

Nezla Jun 11 to Vitaliy Serdtsev

Thanks Vitaliy, is there a property that makes the MultiSelectionSet Scrollable ?

Thanks Again

0 0

Vitaliy Serdtsev Jun 12 to Nezla

See Zen Layout, Zen Style

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>
}

}

0 0

Nezla Jun 12 to Vitaliy Serdtsev

Thank you Vitaliy for your prompt assistance👌

0 0