onchange

Description

Fires when the value of a control within the toolbar changes

Usage

onchange?: (ev: {
  value: any;
  item: {
    id?: string | number;
    comp?: string;
    icon?: string;
    css?: string;
    text?: string;
    menuText?: string;
    key?: string;
    spacer?: boolean;
    collapsed?: boolean;
    handler?: (item: item, value?: any) => void;
    layout?: "column";
    items?: item[];
    [key: string]: any;
  };
}) => void;

Parameters

The callback receives a single parameter ev – an object with the following fields:

• value – (required) the new value of the control. Its type depends on the component used (e.g., string for a text field, boolean for a checkbox, number for a spinner)

• item – (required) the toolbar item that triggered the change. The description of its parameters see here items

Example

type OnChangeResult {
    // Changed control item
    item: {
        id: string;
    };
    // New value of the control
    value: any;
}

onchange(ev: OnChangeResult): void

Capturing control value change:

<script>
  const items = [
    { id: "name", comp: Text },
    { id: "email", comp: Text },
  ];
  
  function handler(ev) {
    const { item, value } = ev;
    console.log("changed control", item.id);
    console.log("new value", value);
  }
</script>

<Toolbar {items} onchange={handler} />