Segbutton changea values

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div style="position:relative;height: 500px;">
  <div id="grid" style="width: 500px;float: left;"></div>
  <div id="form" style="float: left;margin-left: 10px;"></div>
</div>

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var form = new FancyForm({
    renderTo: 'form',
    theme: 'extra-gray',
    width: 320,
    height: 150,
    tbar: [{
      text: 'Set 0, 1 items',
      width: 80,
      handler: function(){
        let field = form.getItem('education');
        
        field.setValue([0, 1]);
      }
    },{
      text: 'Set Doctor and Bachelor',
      width: 140,
      handler: function(){
        let field = form.getItem('education');
        
        field.setValue(['doctor', 'bachelor']);
      }
    }],
    items: [{
      label: 'Education',
      type: 'segbutton',
      name: 'education',
      multiToggle: true,
      items: [{
        text: 'Bachelor',
        value: 'bachelor'
      }, {
        text: 'Master',
        value: 'master',
        pressed: true
      }, {
        text: 'PhD',
        value: 'phd',
        pressed: true
      }, {
        text: 'Doctor',
        value: 'doctor'
      }]
    }]
  });
});