In this blog we will show you the features of our React Dropdownlist.

The DropDownList for React.js is a list component displayed like a drop down which contains selectable items. The DropDownList resembles a combobox the difference being that you cannot edit and input text in the top dropdown row. The DropDownList can be used in all cases when you have to select an item from a list of items and have it visible in the top row.

React DropDownList Basic Features

Our DropDown List component supports text with images. The images can be added to the left of the text in the list.

It also support data binding to XML and JSON data.

Checkboxes are also supported. By enabling this feature you can put checkboxes to the left of the text in the list.

One very useful feature is that you can change the text alignment of the React DropDown List. The horizontal alignment can be to the left or to the right of the drop down row. The vertical alignment can be top and bottom.

React DropDownList Advanced Features

One of the interesting advanced features is Animation. By enabling animation you can have a nice slide or fade effect.

Another feature is the support for Categories. In this case the items are displayed in groups by setting each item’s group property.

Our DropDownList supports also custom rendering. To enable the custom rendering you have to use the renderer function.

Very useful advanced feature is filtering. By enabling filtering you can enter text in a text field below the DropDpwn row and perform filtering.

You can also enable AutoOpen. In this case the list of items will appear when the mouse is over the DropDown List.

Our DropDownList for React supports also keyboard navigation and Right To Left layout.

You can see an example at : https://www.jqwidgets.com/react/react-dropdownlist/index.htm

The post React DropDownList appeared first on Javascript, HTML5, jQuery Widgets.