Skip to main content

Input

This is an input field for entering some text.

Related sample: Toolbar. Input

Adding Input​

The following example shows how an Input control can be easily added to a toolbar with the help of the add() method of Tree Collection:

toolbar.data.add({
    type:"input",
    value:"",
    placeholder:"Type to search"
});

Properties​

You can provide the following properties in the configuration object of an Input control.

Showing/hiding Input​

You can show or hide Input with the show()/hide() methods of Toolbar:

toolbar.show(id);
toolbar.hide(id);

Related sample: Toolbar. Hide / show items

Enabling/disabling Input​

You can also enable and disable inputs with the enable()/disable() methods of Toolbar:

toolbar.enable(id);
toolbar.disable(id);

Related sample: Toolbar. Enable / disable items

Setting tooltip​

You can create a tooltip for an input:

{
    type: "input",
    value: "",
    tooltip:"Type to search"
}

Related sample: Toolbar. Tooltips

Setting/getting value​

You can use the setState() and getState() methods of Toolbar to change and access the value of Input.

To fill in Input with some text, call setState() with a key-value pair as a parameter, where the key is the ID of the input and the value is the text:

{
    type: "input",
    id:"search",
    value: ""
}
...
toolbar.setState({search:"Summer"});

To get the text that is currently inside the Input control, call getState():

toolbar.getState(); //-> {search:"Summer"}

Setting focus on a control​

To set focus on an Input control, use the setFocus() method. It takes the ID of a control as a parameter:

toolbar.setFocus("search");
info

Check the full list of available operations in the Toolbar API and Tree Collection API.