-
Main
- Dashboard No active orders
- Layouts
- Themes
- Starter kit
- Changelog2.0
- RTL version
-
Forms
- Form components
- JSON forms
- Text editors
- Pickers
- Form layouts
-
Components
- Basic components
- Content styling
- Extra components
- Color system
- Animations
- Icons
-
Layout
- Page layouts
- Sidebars
- Navbars
- Vertical navigation
- Horizontal navigation
- Menu levels
-
Data visualization
- Echarts library
- D3 library
- Dimple library
- C3 library
- Google charts
- Maps integration
-
Extensions
- Extensions
- JQuery UI
- File uploaders
- Event calendars
- Internationalization
-
Tables
- Basic tables
- Data tables
- Data tables extensions
- Handsontable
- Responsive tables
-
Page kits
- General pages
- Service pages
- User pages
- Application pages
- Widgets
Autocomplete lazy mode
This example shows the usage of the Autocomplete feature in the default lazymode. In this mode, user can choose one of the suggested options while typing or enter a custom value that is not included in the suggestions. In this mode, the mouse and keyboard bindings are identical as in Handsontablecell type. The options are rendered from the source property which can be an array, or a function that returns an array.
Autocomplete strict mode
This is the same example as above with a difference that autocomplete now runs in strictmode. In this mode, the autocomplete cells will only accept values that are defined in the source array. The mouse and keyboard bindings are identical as in Handsontable cell type with some differences. In strict mode, the allowInvalidoption determines the behaviour in case of manual user input.
Autocomplete strict mode (Ajax)
Autocomplete can be also used with ajaxdata source. In the below example, suggestions for the "Car" column are loaded from server. To load data from remote (asynchronous) source, assign a function to the sourceproperty. Function should perform the server side request and call the callback function when the result is available.
Password cell type
The following examples show how to configure Handsontable with passwordcell type. This kind of cell behaves like a text cell with a difference that it masks its value using asterisk in cell renderer. For the cell editor, a <input type="password">field is used. Data is stored in the data source as plain text. Additionally you can specify hash length and custom hash symbols.
Fixed hash length
The following examples show how to configure Handsontable with passwordcell type with limited hash length. By default every hash has length equal to the length of value that it corresponds with. Use option hashLengthadded to column configuration to set fixed hash length. Here hash length is set to 8, so if password is longer, other symbols are hidden.
Custom hash symbol
The following examples show how to configure Handsontable with passwordcell type with custom hash symbol. By default every hash consists of asterisks *. Use option hashSymbolto set custom hash symbol. You can use any character, entity or event HTML. Note that you can't change symbol used by the input field due to browsers limitations.