CODEWITHSUNDEEP
comboboxpolymervaadin-elements
Gabrielle
Gabrielle

Reputation: 840

Set value to vaadin combobox(polymer)

I have a system where I can select a value in a vaadin-combobox or select the value in another div (with a svg) and set the combo's value dynamically. How can I set the combo's value?

I already tried value="", but this didn't work...

Upvotes: 0

Views: 1908

Answers (2)

Recc
Recc

Reputation: 11

I simply set:

item-label-path="nombreCorto" item-value-path="idWaEmpresa" value="1"

Upvotes: 1

tony19
tony19

Reputation: 138696

UPDATE To bind the combobox's value to the first array item, you'd use a computed binding:

<vaadin-combo-box
  value="[[_getFirstItem(sessions)]]"
  ...>
</vaadin-combo-box>

where _getFirstItem() is a method on your Polymer object:

Polymer({
  is: 'x-foo',
  ...
  _getFirstItem: function(sessions) {
    return sessions.length > 0 && sessions[0];
  }
});


<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-combo-box/vaadin-combo-box.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <vaadin-combo-box
        label="Element"
        items='[[sessions]]'
        value="[[_getFirstItem(sessions)]]">
      </vaadin-combo-box>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties : {
            sessions: {
              type: Array,
              value: function() {
                return ["Bohrium", "Boron", "Bromine", "Cadmium", "Caesium", "Calcium"];
              }
            }
          },
          _getFirstItem: function(sessions) {
            return sessions.length > 0 && sessions[0];
          }
        });
      });
    </script>
  </dom-module>
</body>

codepen

From docs for vaadin-combobox:

You need to provide the set of items which the user can select with the items property. Current selection is indicated by the value and selectedItem properties. You can set or change the selection programmatically by setting the value property. Doing so also updates the visible fields.

When setting the items declaratively, notice that the attribute value needs to be a valid JSON string. You need to use single quotes for the attribute value and double quotes inside the value (in the JSON string). Alternatively, you can escape the double quotes inside the value.

<vaadin-combo-box
  label="Element"
  items='["Bohrium", "Boron", "Bromine", "Cadmium", "Caesium", "Calcium"]'
  value="Bromine">
</vaadin-combo-box>

Setting the items and value programmatically:

var combobox = document.querySelector('vaadin-combo-box');
combobox.items = ['Bohrium', 'Boron', 'Bromine', 'Cadmium', 'Caesium', 'Calcium'];
combobox.value = 'Bromine';

Upvotes: 0

Related Questions